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 :

<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 : `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;
}

Judul	`HTML form Tag`
Label	`HTML`
Diposting pada	`28 November 2016 - 17:04`
Diperbaharui pada	`24 Mei 2018 - 18:21`

Penjelasan HTML `form` :

Contoh 1 html element `<form>` :

Contoh 2 html element `<form>` :

Atribut HTML `<form>`:

Global Attributes:

Event Attributes:

Browser Support :

`Desktop`

`Mobile`

Default CSS :

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label

HTML form Tag

Penjelasan HTML form :

Contoh 1 html element <form> :

Contoh 2 html element <form> :

Atribut HTML <form>:

Global Attributes:

Event Attributes:

Browser Support :

Desktop

Mobile

Default CSS :

Post Info

Populer Post

Arsip Blog

Label

Penjelasan HTML `form` :

Contoh 1 html element `<form>` :

Contoh 2 html element `<form>` :

Atribut HTML `<form>`:

`Desktop`

`Mobile`