tRikSonic
Tema

HTML form Tag

Terakhir diperbarui : 24 Mei 2018 - 18.21

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.
background html
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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 onclick="alert('ini hanya untuk demo');" id="button1" type="button" value="Kirim" /> 
    <input id="button2" type="reset" />
  </p>
</form>

</body>
</html>

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 :
  1. on
  2. off
Menentukan teks otomatis tesedia pada form input jika posisi on.
enctype Nilai untuk atribut ini adalah :
  1. application/x-www-form-urlencoded
  2. multipart/form-data
  3. text/plain
Menentukan bagaimana form data dikodekan saat akan mengirimkan ke server (hanya untuk method="post")
method Nilai untuk atribut ini adalah :
  1. get
  2. 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 :
  1. _blank
  2. _self
  3. _parent
  4. _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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <form>, biasanya mempunyai nilai default :
form {
    display: block;
    margin-top: 0em;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.