Membuat Form HTML

HTML FORM

form merupakan sebuah element pada html digunakan untuk menampung element yang lain yang berkaitan dengan input pengguna, didakam sebuah element form bisa terdiri banyak element lain sesuai dengan kebutuhan, biasanya data yang berasal dari form akan dikirim dan diproses oleh sebuah server tergantung dari bahasa pemrograman yang digunakan.

Attribute form

pada sebuah form terdapat attribute yang dapat kita gunakan, berikut adalah attribute yang sering digunakan didalam form : 

1. action, digunakan untuk melakukan submit kepada url yang akan dituju.
2. enctype,merupakan atribut yang berperan menentukan cara pengiriman  data yang ada pada form ke server. Atribut enctype itu sendiri hanya digunakan saat form menggunakan method=’POST’.
3. method,digunakan untuk menentukan  HTTP method yang akan digunakan ketika form disubmit terdapat dua buah method yang dapat digunakan yaitu POST dan GET secara default jika kita tidak setting maka akan di submit pada method GET.
4. target,target yang digunakan untuk membuka halaman yang dituju target, atribut target bida berinilai _self dan _blank

Contoh Form

<form action="/tujuan.php">
  Nama Depan:<br>
  <input type="text" name="nama_depan" value="John"><br>
  Nama Belakang:<br>
  <input type="text" name="nama_belakang" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Pada contoh diatas terdapat sebuah form dengan action tujuan.php dan dua buah input nama depan dan belakang. jika form tersebut di klik maka akan mengarah ke file tujuan.php dengan method GET.

Kapan Menggunaan Method POST dan GET

untuk menentukan penggunaan Method POST dan GET, Berikut adalah aturan umum jika kita menggunakan GET :

1. Menambahkan data ke url dalam pasangan nama / nilai
2. Panjang URL terbatas (2048 karakter)
3. Jangan menggunakan GET untuk mengirim data sensitif, seperti username dan password karena akan terlihat di url.
4. Berguna untuk pengiriman formulir di mana pengguna ingin menandai hasil.

Sedangkan aturan penggunaan POST adalah sebagai berikut :

1. POST tidak memiliki batasan ukuran dalam pengiriman data, 
2. Data dapat berupa data sensitif karena tidak akan terlihat pada url.
3. Pengiriman data menggunakan POST tidak dapat di-bookmark oleh browser.

jika anda membuat dua buah form pada suatu halaman dapat dipisahkan dengan menggunakan element <legend> contoh sebagai berikut :

<form action="/action_page.php">
 <fieldset>
    <legend>Data Pribadi:</legend>
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  </fieldset>
</form>

Element Pada Form

didalam sebuh form terdapat element-elemet  yang dapat kita gunakan diantaranya adalah :

HTML Form Elements

Tag	Description
<form>	Sigunakan untuk membuat form user input
<input>	Digunakan sebagai input control
<textarea>	Digunakan untuk membuat beberapa baris/ multiline input control (text area)
<label>	Digunakan untuk membuat label
<fieldset>	digunakan untuk membuat group box
<legend>	digunakan untuk membuat judul pada <fieldset> element
<select>	Digunakan untuk membuat drop-down list
<option>	Digunakan untuk membuat pilihan pada drop-down list
<button>	Digunakan membuat tombol

Contoh :

Contoh Input :
<input name="firstname" type="text">

Contoh Textarea :
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Contoh Select :
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Contoh Button :
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Contoh Fieldset dan Legend :
<fieldset>
    <legend>Personal information:</legend>
    Nama Depan:<br>
    <input type="text" name="nama_depan" value="John"><br>
    Nama Belakang:<br>
    <input type="text" name="nama_belakang" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>

Jenis Input

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Contoh :
Input CheckBox

<form>
  <input type="checkbox" name="if" value="if"> Teknik Informatika<br>
  <input type="checkbox" name="si" value="si"> Sistem Informasi
</form>

Input Radio Button

<form>
  <input type="radio" name="jk" value="L" checked> Laki-Laki<br>
  <input type="radio" name="jk" value="P"> Perempuan<br>
</form>

Contoh Button :

<input type="button" onclick="alert('Apakabar!')" value="Klik Saya!">

Contoh Color:

<form action="/action_page.php">
  Select your favorite color:
  <input type="color" name="favcolor" value="#ff0000">
</form>

Attribute Input

attribute input biasa digunkan untuk membuat aturan-aturan pada input, misalnya aturan terhadap sebuah text input minimal input sepuluh karakter maka coding nya sebagai berikut :

<form action="">
Nama Depan:<br>
<input type="text" name="nama_depan" maxlength="10">
<br>
Nama Belakang:<br>
<input type="text" name="nama_belakang">
</form>

Contoh Attribute Auto Complete Email :

<form action="/action_page.php" autocomplete="on">
  Nama Depan:<input type="text" name="nama_depan"><br>
  Nama Belakang: <input type="text" name="nama_belakang"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Beirkut ini adalah contoh attribute yang lain element input :

1. autocomplete
2. autofocus
3. form
4. formaction
5. formenctype
6. formmethod
7. formnovalidate
8. formtarget
9. height and width
10. list
11. min and max
12. multiple
13. pattern (regexp)
14. placeholder
15. required
16. step