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 :
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
- 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 :
|
Menentukan teks otomatis tesedia pada form input jika posisi on. |
enctype |
Nilai untuk atribut ini adalah :
|
Menentukan bagaimana form data dikodekan saat akan mengirimkan ke server (hanya untuk method="post" ) |
method |
Nilai untuk atribut ini adalah :
|
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 :
|
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;
}