Tutorial HTML Bag 13: Membuat Form

Tutorial HTML Bag 13: Membuat Form| Masih melengkapi tutorial HTML sebelumnya membuat layout web untuk belajar siswa SMK kelas X pada mata diklat pemrograman web dasar. Kali ini sub bahasan tutorial adalah form, membuat form. Pada bahasan kali ini kita akan mengenal input type text field, checkbox, password, radio button, submit button, dan lainnya.

Form HTML
Dasar tag untuk membuat form:
Tag awal <form> - input element - tag penutup </form>

<form>
-
input elements
-
</form>

Form HTML, Input element
Kita akan mengenal text field, checkbox, password, radio button, submit button, dan lainnya.

Text Field
Input type yang digunakan adalah text. <input type="text">

<form>
Nama depan: <input type="text" name="nama depan"><br>
Nama belakang: <input type="text" name="nama belakang">
</form> 

Jika ditampilkan dalam browser maka hasilnya seperti dibawah ini:

Nama depan:
Nama belakang:

Tips:
Agar penempatan kotak inputan terlihat lebih rapi, kita bisa menggunakan tabel. Kita juga bisa menentukan size menggunakan atribut size. Perhatikan contoh dibawah ini:

<table>
<tr>
<form>
<td>Nama depan:</td> 
<td><input type="text" name="nama depan"></td>
</tr>
<tr>
<td>Nama belakang:</td> 
<td><input type="text" name="nama belakang" size="50"></td> 

</tr> 
</form>
</table>

Jika ditampilkan dalam browser hasilnya:

Nama depan:
Nama belakang:

 
Radio Button
Input type yang digunakan adalah radio. <input type="radio">
Input type ini biasa digunakan untk membuat pilihan.

<form>
<input type="radio" name="sex" value="Pria">Male<br>
<input type="radio" name="sex" value="Wanita">Female
</form> 

Jika ditampilkan dalam browser maka hasilnya:

Male
Female

Checkboxes
Input type yang digunakan adalah checkbox. <input type="checkbox">
Input type checkbox biasa digunakan untuk responden
<form>
<input type="checkbox" name="vehicle" value="Mie Ayam">Saya suka mie ayam<br>
<input type="checkbox" name="vehicle" value="Bubur Kacang Ijo">Saya suka bubur kacang ijo
</form> 

Jika ditampilkan dalam browser hasilnya seperti dibawah ini:

Saya suka mie ayam
Saya suka bubur kacang ijo

Submit Button
Input type yang digunakan <input type="submit">

<form name="input" action="form_tampil.html" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

Jika ditampilkan dalam browser hasilnya:

Username:

Agar teks yang diinput bisa ditampilkan, maka terlebih dahulu kita harus membuat form untuk menampilkan hasil inputan. Pada contoh diatas saya membuat form dengan nama form_tampil.html, untuk pembahasan ini kita pelajari di posting khusus.

Password Field
Input type "password", <input type="password">

<form>
Password: <input type="password" name="pwd">
</form> 

Jika ditampilkan dalam browser, hasilnya:

Password:

Demikian Tutorial HTML Bag 13: Membuat Form, tutorial basic html  ini saya buat sebagai arsip mengajar dan bahan evaluasi mengajar saya pada SMK Nida El-Adabi.