HTML

Form di HTML: Cara membuat dan Contoh Codenya

Form pada HTML digunakan untuk mengumpulkan inputan dari pengguna. Inputan dari pengguna paling sering dikirim ke server untuk diproses.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Nama Belakang:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Jika Anda mengklik tombol "Submit", data dari form akan dikirim ke halaman bernama "/action_page.php".</p>

</body>
</html>

Elemen <form>

Elemen <form> HTML digunakan untuk membuat formulir input data pada HTML oleh pengguna.

<form>
.
form elements
.
</form>

Elemen <form> adalah wadah untuk berbagai jenis elemen masukan, seperti: textfield, checkbox, radio button, tombol submit, dll.

Semua elemen form yang berbeda dibahas dalam bab selanjutnya.

Elemen <input>

Elemen <input> pada HTML adalah elemen form yang paling banyak digunakan.

Sebuah elemen dapat ditampilkan dengan berbagai cara, bergantung pada tipe atributnya

Berikut beberapa contohnya:

TypeDescription
<input type=”text”>Menampilkan text field sebaris
<input type=”radio”>Menampilkan tombol radio (untuk memilih salah satu dari banyak pilihan)
<input type=”checkbox”>Menampilkan checkbox (untuk memilih nol atau lebih dari banyak pilihan)
<input type=”submit”>Menampilkan tombol submit (untuk mengirimkan formulir)
<input type=”button”>Menampilkan tombol yang dapat diklik

Text Field

<input type=”text”> mendefinisikan text field sebaris untuk masukan teks.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Input Text field</h2>

<form>
  <label for="fname">Nama depan:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Nama belakang:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

<p>Perhatikan bahwa form itu sendiri tidak terlihat.</p>

<p>Perhatikan juga bahwa lebar default kolom input teks adalah 20 karakter.</p>

</body>
</html>

Catatan: Form tidak terlihat. Perhatikan juga bahwa lebar default kolom input adalah 20 karakter.

Elemen <label>

Perhatikan penggunaan elemen <label> pada contoh di atas.

Tag <label> mendefinisikan label untuk banyak elemen form.

Elemen <label> berguna untuk end user, karena layar akan menampilkan label dengan jelas dan pengguna fokus pada elemen masukan.

Elemen <label> juga membantu pengguna yang kesulitan mengklik wilayah yang sangat kecil (seperti radio button atau checkbox) – karena ketika pengguna mengklik teks di dalam elemen <label> , radio button atau checkbox akan berubah.

Atribut for dari tag <label> harus sama dengan atribut id dari elemen <input> untuk mengikat keduanya.

Radio Button

<input type=”radio”> mendefinisikan tombol radio.

Tombol radio memungkinkan pengguna memilih SALAH SATU dari sejumlah pilihan.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Radio Button</h2>

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Laki-laki</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Perempuan</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Lainya</label>
</form> 

</body>
</html>

Checkbox

<input type=”checkbox”> mendefinisikan kotak pilihan yang dicentang.

Checkbox memungkinkan pengguna memilih opsi NOL atau LEBIH BANYAK dari sejumlah pilihan.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Checkbox</h2>
<p><strong>input type="checkbox"</strong> mendifinisikan checkbox:</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> Aku punya sepeda</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Aku punya mobil</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> Aku punya kapal</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Submit Button

<input type=”submit”> mendefinisikan tombol untuk mengirimkan data formulir ke form-handler.

Form-handler biasanya adalah file dalam server dengan script untuk memproses data masukan.

Form-handler ditentukan dalam atribut form action.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Form HTML</h2>

<form action="/action_page.php">
  <label for="fname">Nama depan:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Nama belakang:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Jika Anda mengklik tombol "submit", data formulir akan dikirim ke halaman bernama "/action_page.php".</p>

</body>
</html>

Atribut name untuk <input>

Perhatikan bahwa setiap kolom masukan harus memiliki atribut name untuk dikirimkan.

Jika atribut name dihilangkan, nilai field input tidak akan dikirim sama sekali.

Contoh :

Contoh ini tidak akan mengirimkan nilai dari kolom input “Nama depan”:

<!DOCTYPE html>
<html>
<body>

<h2>Atribut name</h2>

<form action="/action_page.php">
  <label for="fname">Nama depan:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Jika Anda mengklik tombol "submit", data formulir akan dikirim ke halaman bernama "/action_page.php".</p>

<p>Perhatikan bahwa nilai field "Nama depan" tidak akan dikirimkan, karena elemen masukan tidak memiliki atribut name.</p>

</body>
</html>


Catur Kurnia Sari

Share
Tags: formhtml