loading...

HTML Dasar: Form

Form adalah sebuah elemen pada HTML yang digunakan untuk mengelola data dari input yang dilakukan oleh user. Baik itu saat user mengisi data pada kolom, memilih sesuatu pada combo box atau drop-down menu, memilih radio button, bahkan sampai user menekan sebuah tombol. Form pada HTML menggunakan sebuah tag <form> yang akan berisi elemen-elemen pembentuk form. 
Elemen pada HTML antara lain: input, label, textarea, select, dan buttonInput (textfield, radiobutton, combobox, dsb) untuk menginputkan sesuatu, label untuk menandai elemen inputtextarea untuk menginputkan teks yang lebih banyak, select digunakan untuk drop-down, dan button atau tombol untuk mengirimkan data. Ok langsung saja kita bikin dokumennya, let's code!
#input #label
Tag input memiliki beberapa type: text, password, radio, checkbox, (submit, reset, button).   
<form>
   <label for="username">username:</label> 
      <input type="text" id="username" name="username">
      <br>
   <label for="password">password:</label> 
      <input type="password"  id="password" name="password">
      <br>
   <input type="radio" id="pria" name="jeniskelamin"><label for="pria">Pria</label>
   <input type="radio" id="wanita" name="jeniskelamin"><label  for="wanita">Wanita</label>
   <br>
   <input type="checkbox" id="menyanyi" name="hoby"><label for="menyanyi">Menyanyi</label>
   <input type="checkbox" id="menari" name="hoby"><label for="menari">Menari</label>
   <input type="checkbox" id="menulis" name="hoby"><label for="menulis">Menulis</label>
   <br><br>
   <!-- <input type="submit" name="submit" value="Kirim"> tombol bukan elemen input- > gunakan button aja -->
   <button type="submit">Kirim aja</button>
</form>   
Pada dokumen tersebut penting diperjelas bahwa tombol tidak disarankan untuk menggunakan input. Karena sudah ada tag tersendiri untuk menangani tombol yaitu tag <button>. 
#textarea 
Textarea mirip dengan textfield namun ukurannya lebih besar dan teks yang bisa diinputkan lebih banyak. Biasanya textarea dapat digunakan untuk menuliskan artikel, testimoni, komentar, dsb.
<textarea></textarea>
#select
Select disebut juga dengan drop-down yang memiliki pilihan-pilihan tertentu. Pilihan (option) bisa kita tamabahkan sesuai dengan kebutuhan kita. Tampilan yang dihasilkan akan berupa drop-down atau istilah lainnya yaitu combo box.
<select>
   <option>pilihan 1</option>
   <option>pilihan 1</option>
   <option>pilihan 1</option>
   ...
</select>  
#button
Tombol dalam HTML menggunakan tag <button>, dimana button memiliki beberapa type: submit, reset, buttonSubmit untuk mengirimkan data, reset untuk menghapus data, dan button yaa tombol.
<button>kirim</button>
Mari kita gabungkan elemen-elemen pembentuk form dari #input #label #textarea #select dan #button.
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<form>
<label for="username">username:</label> 
<input type="text" id="username" name="username">
<br>
<label for="password">password:</label> 
<input type="password"  id="password" name="password">
<br>
<input type="radio" id="pria" name="jeniskelamin"><label  for="pria">Pria</label>
<input type="radio" id="wanita" name="jeniskelamin"><label  for="wanita">Wanita</label>
<br>
<input type="checkbox" id="menyanyi" name="hoby"><label for="menyanyi">Menyanyi</label>
<input type="checkbox" id="menari" name="hoby"><label for="menari">Menari</label>
<input type="checkbox" id="menulis" name="hoby"><label for="menulis">Menulis</label>
<br>
<textarea></textarea>
<br>
<select>
<option>Bandung</option>
<option>Semarang</option>
<option>Jogja</option>
<option>Surabaya</option>
</select>
<br><br>
<button type="submit">Kirim aja</button>
</form>
</body>
</html>

Note: Edisi belajar HTML dasar: menyusun dokumenmengenal tagmembuat paragrafheadinglisthyperlinkimagetabel dan form (cukup sampai disini). Secara lengkapnya bisa dipelajari sendiri pada laman  W3school.com. Edisi selanjutnya kita akan belajar tentang CSS! Yok teros semangat yok :-D 

  

0 Comments

Leave a comment