Form merupakan elemen yang didalamanya terdapat kolom kolom yang dapat diisi oleh pengunjung halaman web.
Kamu pernah menulis komentar diblog orang lain?
Jika iya, itu artinya kamu telah menggunakan form untuk menulis dan mengirimkan komentar.
Pada tutorial kali ini kita akan belajar cara membuat form di html.
Yuk kita mulai tutorialnya,
Tag yang digunakan untuk membuat form
Tag | Keterangan | Sering digunakan |
---|---|---|
<form> | Digunakan untuk membuat form area | ✔ |
<input> | Digunanak untuk membuat inputan user (text, checkbox, radio botton dll) | ✔ |
<textarea> | Digunakan untuk membuat inputan berupa teks baris | ✔ |
<select> | Digunakan untuk membuat daftar pilihan | ✔ |
<option> | Digunakan untuk membuat item dari tag <select> | ✔ |
<label> | Digunakan untuk membuat label dari form input | ✔ |
<button> | Digunakan untuk membuat tombol | ✔ |
<datalist> | Digunakan untuk membuat opsi pilihan dari tag <input> | |
<fieldset> | Digunakan untuk membuat group pada field. | |
<keygen> | Digunakan untuk membuat kunci enkripso | |
<meter> | Digunakan untuk membuat inputan sekala | |
<legend> | Digunakan untuk membuat judul dari tag <fieldset> | |
<optgroup> | Digunakan untuk membuat group pada tag <option> |
Atribut-Atribut Tag Yang Digunakana
Tag <form>
Pada tag form atribut yang digunakan yaitu,
- action, digunakan untuk menentukan aksi yang akan dilakukan ketika form disubmit
- methode, digunakan untuk menentukan metode pengiriman data, get atau post
ketika menggunakan get, parameter dan nilainya akan ditampilkan di kolom url. Jika menggunakan post, parameter dan nilainnya tidak akan ditampilkan di kolom url - enctype, digunakan untuk menentukan tipe enkripsi, contoh: multipart/form-data
Tag <input>
Pada tag input, atribut yang digunakan yaitu,
- type, digunakan untuk menentukan type inputan. Berikut adalah tipe-tipe inputan yang bisa digunakan,
- <input type="button">, untuk membuat button
- <input type="checkbox">, untuk membuat cekbok
- <input type="color">, untuk membuat color chooser
- <input type="date">, untuk membuat date chooser
- <input type="datetime-local">, untuk membuat datetime lokal
- <input type="email">, untuk membuat field email
- <input type="file">, untuk upload file
- <input type="hidden">, membuat field tersembunyi
- <input type="image">, membuat tombol dari gambar
- <input type="month">, untuk input bulan
- <input type="number">, untuk input angka
- <input type="password">, untuk input password
- <input type="radio">, untuk membuat radio button
- <input type="range">, untuk membuat skala meter
- <input type="reset">, membuat tombol reset
- <input type="search">, membuat filed untuk pencarian
- <input type="submit">, untuk membuat tombol submit
- <input type="tel">, untuk membuat inputan telepon
- <input type="text">, untuk membuat inputan umum
- <input type="time">, untuk membuat inputan waktu
- <input type="url">, untuk membuat inputan url
- <input type="week">, untuk membuat inputan minggu
- placeholder, digunakan untuk membuat teks keterangan
- readonly, digunakan agar field hanya bisa dibaca
- name, digunakan untuk membuat nama parameter yang akan dikirim
- value, digunakan untuk memberikan nilai parameter yang dikirim
- reaquired, digunakan untuk membuat field wajib diisi.
- maxlength, digunakan untuk menentukan maksimal jumlah karakter yang bisa diinput
- minlength, digunakan untuk menentukan minimal jumlah karakter yang harus diinput
Tag <textarea>
- name, digunakan untuk membuat nama parameter yang akan dikirim
- rows, digunakan untuk menentukan tinggi teks area berdasarkan baris yang ditampilkan
- cols, digunakan untuk menentukan lebar teks area berdasarkan pangjang teks yang ditampilkan
Tag <select>
- name, digunakan untuk membuat nama parameter yang akan dikirim
- multiple, digunakan agar item yang diselect bis lebih dari satu
Tag <option>
- value, digunakan untuk memberikan nilai parameter select yang dikirim
- selected, digunakan untuk memilih item dari <option>
Tag <label>
- for, digunakan untuk menentukan target elemen field berdasarkan atribut id
Tags <datalist>
- id, digunakan untuk memberikan unik id yang akan digunakan untuk memanggil datalist tersebut
Tag <keygen>
- name, digunakan untuk membuat nama parameter yang akan dikirim
Tag <optgroup>
- label, digunakan untuk memberikan judul group
Tag <meter>
- id, digunakan untuk memberikan unik id yang akan digunakan untuk memanggil datalist tersebut
- name, digunakan untuk membuat nama parameter yang akan dikirim
- value, digunakan untuk memberikan nilai parameter select yang dikirim
- min, digunakan untuk menentukan nilai minimal
- max, digunakan utnuk menentukan nilai maksimal
Membuat Form Di Html
Untuk membuat form hal yang harus dilakukan adalah membuat elemen formnya dengan tag <form>.
Hal ini perlu dilakukan agar nantinya data yang kita inputkan dapat di kirim ke sistem yang ada di server.
Contoh kodenya sebagai berikut,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<form action="#" method="get">
<label>Label</label><br/>
<input type="button" value="tombol"><br/>
<input checked type="checkbox"><br/>
<input type="color"><br/>
<input type="date"><br/>
<input type="datetime-local"><br/>
<input type="email"><br/>
<input type="file"><br/>
<input type="hidden"><br/>
<input src="gambar.png" type="image"><br/>
<input type="month"><br/>
<input readonly value="123" type="number"><br/>
<input required type="password"><br/>
<fieldset>
<legend>cekbok ku:</legend>
<input checked type="radio"><br/>
</fieldset>
<input min="10" max="10" type="range"><br/>
<input type="reset"><br/>
<input type="search"><br/>
<input type="submit"><br/>
<input type="tel"><br/>
<input name="fullname" placeholder="tulis namamu" maxlength="10" type="text"><br/>
<input type="time"><br/>
<input type="url"><br/>
<input type="week"><br/>
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<keygen name="key"><keygen/>
<textarea cols="30" rows="10"></textarea>
<br/>
<select name="opsi">
<optgroup label="Item">
<option value="1">item 1</option>
<option value="1">item 2</option>
</optgroup>
<optgroup label="Pilihan">
<option value="1">pilih 1</option>
<option value="1">pilih 2</option>
</optgroup>
</select>
<label for="a">Performa:</label><br/>
<meter id="a" value="2" min="0" max="10">2 out of 10</meter><br>
</form>
</body>
</html>
Hasilnya,
Disini kita hanya membuat formnya saja, belum sampai ke tahap cara memproses datanya.
Sekian dulu tutorial cara membuat form di html. Jika kalian merasa artikel ini bermanfaat, silahkan klik tombol share. Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat Form Input Di Html"
Silahkan berkomentar dengan baik dan bijak!