Saturday, August 11, 2018

Membuat Form Input Data Mahasiswa (Siswa)

Membuat form input data mahasiswa atau halaman input data mahasiswa dengan menggunakan html dasar. Untuk membentuk form input data mahasiwa tentunya perlu beberapa hal kriteria yang harus kita ketahui, yaitu mengenai data apa saja yang akan dimasukkan atau apa saja field dari data mahasiswa itu, kemudian kita harus tau juga gambaran form input data mahasiswa nantinya kira-kira seperti apa.

Ok.. langsung ke point pembicaraan kita, yaitu membuat form input data mahasiswa. Yap.. sebenarnya ini sama saja saya membagikan script atau codingan untuk membuat form input data mahasiswa. Ya gpp lah. Tapi mungkin saya juga tentunya akan memberikan penjelasan sedikit tentang script untuk membuat form input data mahasiswa agar bagi yang awam bisa bertambah paham.

Yuk simak gambar dibawah ini..

Gambar form input data mahasiswa

Sederhana? Yap... yang saya berikan ini adalah contoh fomr input data mahasiswa yang sangat sederhana, namun jangan dipandang dari kesederhanaannya guys, ilmunya yang perlu.

Baca Juga : Membuat Link Menu Terbuka di Tab Baru

pada dasarnya form input data mahasiswa atau lebih lengkapnya ialah biodata mahasiswa sebenarnya memiliki field yang lebih banyak. Namun ini hanya sebagai contoh saja.

Ok.. simak baik-baik script dibawah ini.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body bgcolor="#00FF00">
<form action="simpan.php" method="get">
<h2 align="center"><font color="#FF0000" style="alignment-baseline:" ><i><u>Input Data Mahasiswa </u></i></font></h2>
<table border="0" align="center">
<tr><td>NIM </td><td><input type=r="text" name="nim" size="10"/></td></tr>
<tr><td>Nama</td> <td><input type=r="text" name="nama" size="30" /></td></tr>
<tr><td>Jeni Kelamin</td> <td><input type="radio" name="jenis_kelamin" value="laki-laki" />
Laki-laki<input type="radio" name="jenis_kelamin" value="perempuan" /> 
Perempuan</td></tr>
<tr><td>TTL </td> <td><input type="text" name="tempat" size="10"><input type="date" size="30" name="ttl" /></td></tr>
<tr><td>Agama </td> <td><select name="agama">
   <option value="Kristen"> Kristen</option>
            <option value="Kristen"> Islam</option>
            <option value="Kristen"> Budha</option>
            <option value="Kristen"> Hindu</option>
            </select></td></tr>
<tr><td>Alamat </td> <td><textarea name="alamat" row="5" cols="31"></textarea></td></tr>
<tr><td>Hobby </td> <td><input type="text" size="30" name="hobby" /></td></tr>
<tr><td></td><td><input type="submit" Value="Submit" align="right">input type="reset" Value="Clear" ></td></tr>
</table>
</form>
</body>
</html>

Didalam coding bisa anda perhatikan bahwa untuk membuat form input data atau lebih dikenal hanya "form" saja. Harus dimulai dengan tag <form> dan diakhiri dengan </form>. Kenapa harus?.. ya kalau tidak memakai tag tersebut berbarti bukan form donk.. wkwkwk.

Penting!!!
Didalam pembuatan form input, kita harus sesuaikan method mana yang harus kita gunakan, sebab fungsi dan tujuan dari kedua method POST dan GET berbeda dan tidak sembarangan dalam pengguaannya di lapangan.

Baca Juga : Perbedaan Method POST dan GET yang Harus Kamu Pahami

Nah biasanya jika setelah kita mengklik "save" atau "Simpan" atau "submit" akan dibawah kehalaman tertentu. Walaupun nantinya tetap kembali kehalaman tersebut. Perhatikan script ini <form action="simpan.php" method="get">. Jika di klik submit, maka aksi yang dilakukan ialah menjalankan scipt lainnya yang bernama simpan.php. didalam simpan.php (atau sebeagainya) inilah perintah untuk memasukkan data-data tersebut kedalam database (table-table). Form hanya sebagai media penerima input atau masukan data.

Untuk pemilihan jenis kelamin tentunya menggunakan radio button agar memilih hanya salah satu. Kemudian untuk tanggal lahir menggunakan input type date "><input type="date" size="30" name="ttl" />. Dan untuk pemilihan agama menggunakan select.

Pada bagian alamat disini saya berikan menggunakan text area, agar tampilan lebih baik. Jika menggunakan "type text" tentunya hanya memanjang kesamping.

Untuk selebihnya yaitu tentang submit dan clear dan lainnya saya kira anda bisa memahasmi. Sebagai tambahan untuk membuat form input data, jangan lupa selalu memperhatikan atau juga memberikan name "<input type=r="text" name="nim" size="10"/>", name ini berfungsi sebagai variable penampung yang mana name ini lah yang dipanggil dalam proses penyimpanan.

Mungkin di artikel selanjutnya saya akan berikan aksi untuk penyimpanannya. Semoga artikel ini bermanfaat bagi yang membutuhkan.

Sudah Tau Cara Membuat/Menambah Tabel Didalam Tabel?

ATAU

Percantik Tampilan Tabel Kamu Dengan CSS Agar Lebih Menarik


EmoticonEmoticon