HTML form Tag

Penjelasan HTML form :

HTML form Tag - belajar html form, element <form> mempunyai definisi sebagai element pembuat sebuah formulir pada halaman website / blog. Element <form> didalam penulisannya dapat disiipkan element lainnya untuk keperluan tampilan dan fungsi sebuah form formulir.

Berikut adalah element yang dapat dan sering digunakan dalam pembuatan form pada html :

1. <input>
2. <textarea>
3. <button>
4. <select>
5. <option>
6. <optgroup>
7. <fieldset>
8. <label>
9. dll

Contoh 1 html element <form> :

<form>
  Nama : <input type="text" name="fname"><br/>
  Umur : <input type="text" name="lname"><br/>
</form>

Contoh 2 html element <form> :

<form id="form-lamaran">
  <fieldset id="personal">
    <legend>BIODATA</legend>
    <label for="namadepan">Nama Depan : </label> 
    <input name="namadepan" id="namadepan" type="text"/>
    <br />
    <label for="namabelakang">Nama Belakang : </label>
    <input name="namabelakang" id="namabelakang" type="text"/>
    <br />
    <label for="alamat">alamat : </label> 
    <input name="alamat" id="alamat" type="text"/>
  </fieldset>
  <fieldset id="medical">
    <legend>RIWAYAT KESEHATAN</legend>
    <label for="cacar">cacar : </label>
    <input name="cacar" id="cacar" type="checkbox" value="cacar"/>
    <br />
    <label for="gondok">gondok : </label> 
    <input name="gondok" id="gondok" type="checkbox" value="gondok"/>
    <br />
    <label for="pusing">pusing : </label> 
    <input name="pusing" id="pusing" type="checkbox" value="gondok"/>
    <br />
    <label for="tidakadariwayat">tidak ada : </label> 
    <input name="tidakadariwayat" id="tidakadariwayat" type="checkbox" value="hepatitis"/>
  </fieldset>
  <fieldset id="opt">
    <legend>POSISI PEKERJAAN</legend>
    <select name="choice">
      <option selected="selected" label="none" value="Pilih">Pilih</option>
      <optgroup label="Administrasi">
        <option id="data_1a" value="data_1a">xxxxxxxxxxxxxx</option>
        <option id="data_1b" value="data_1b">xxxxxxxxxxxxxx</option>
        <option id="data_1c" value="data_1c">xxxxxxxxxxxxxx</option>
      </optgroup>
      <optgroup label="Keuangan">
        <option id="data_2a" value="data_2a">xxxxxxxxxxxxxx</option>
        <option id="datal_2a" value="datal_2a">xxxxxxxxxxxxxx</option>
      </optgroup>
      <optgroup label="Komputer">
        <option id="data_3a" value="data_3a">xxxxxxxxxxxxxx</option>
        <option id="data_3" value="data_3b">xxxxxxxxxxxxxx</option>
      </optgroup>
    </select>
  </fieldset>
  <fieldset id="pengalaman-kerja">
    <legend>PENGALAMAN KERJA</legend>
    <p>Apakah anda sudah berpengalaman pada pekerjaan yang dipilih</p>
    <label for="ya-berpengalaman">ya : </label>
    <input name="ya-berpengalaman" id="ya-berpengalaman" type="checkbox" value="ya"/>
    <br />
    <label for="tidak-berpengalaman">tidak : </label>
    <input name="tidak-berpengalaman" id="tidak-berpengalaman" type="checkbox" value="tidak"/>
    <br />
    <p>Apa alasan anda mengambil jenis pekerjaan yang anda pilih :</p>
    <textarea style="width:100%;height:200px" name="area-alasan" id="area-alasan" placeholder="masukan jawaban anda"></textarea>
  </fieldset>
  <p>
    <input id="button1" type="submit" value="Kirim" /> 
    <input id="button2" type="reset" />
  </p>
</form>

Atribut HTML <form>:

Attribute HTML <form>

accept-charset	Nilai untuk atribut ini adalah : character_set	Menentukkan character encodings yang diterima oleh server sebelum form dikirim.
action	Nilai untuk atribut ini adalah : url	Menentukan url atau link tujuan sebuah data dari form akan dikirim
autocomplete	Nilai untuk atribut ini adalah : on off	Menentukan teks otomatis tesedia pada form input jika posisi on.
enctype	Nilai untuk atribut ini adalah : application/x-www-form-urlencoded multipart/form-data text/plain	Menentukan bagaimana form data dikodekan saat akan mengirimkan ke server (hanya untuk method="post")
method	Nilai untuk atribut ini adalah : get post	Menentukan metode HTTP yang digunakan pada saat mengirim form data inputtext
name	Nilai untuk atribut ini adalah : text	Menentukan nama form
novalidate	Nilai untuk atribut ini adalah : novalidate	Menentukan bahwa form tidak harus divalidasi saat akan dikirim ke server
target	Nilai untuk atribut ini adalah : _blank _self _parent _top	Menentukan respon saat user mengirim sebuah form ke server. contoh : ketika ketika user mengirim form data, maka browser akan membuka tab baru.

Global Attributes:

Element <form> mencakup Global Attributes HTML.

Event Attributes:

Element <form> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	Ya
Safari	Ya
Firefox	Ya
Opera	Ya
IE	Ya
Edge	Ya

Mobile

Android Webview	Ya
Chrome Android	Ya
Edge Mobile	Ya
Firefox Android	Ya
Opera Android	Ya
iOs Safari	Ya
Samsung Internet	Ya

Default CSS :

Browser yang support dengan element <form>, biasanya mempunyai nilai default :

form {
    display: block;
    margin-top: 0em;
}