Tutorial Lengkap Belajar Html # Membuat Form Input Di Html

Zainu.developer Html , Programming , Tutorial ,

Untuk menerima inputan data dari pengunjung halaman web, kita dapat menggunakan elemen yang namanya form.

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>

Kita tidak akan menggunakan semua tag di atas, karena memang hanya beberapa yang sering digunakan (ditandai dengan tanda ✔).

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,
1. <input type="button">, untuk membuat button
2. <input type="checkbox">, untuk membuat cekbok
3. <input type="color">, untuk membuat color chooser
4. <input type="date">, untuk membuat date chooser
5. <input type="datetime-local">, untuk membuat datetime lokal
6. <input type="email">, untuk membuat field email
7. <input type="file">, untuk upload file
8. <input type="hidden">, membuat field tersembunyi
9. <input type="image">, membuat tombol dari gambar
10. <input type="month">, untuk input bulan
11. <input type="number">, untuk input angka
12. <input type="password">, untuk input password
13. <input type="radio">, untuk membuat radio button
14. <input type="range">, untuk membuat skala meter
15. <input type="reset">, membuat tombol reset
16. <input type="search">, membuat filed untuk pencarian
17. <input type="submit">, untuk membuat tombol submit
18. <input type="tel">, untuk membuat inputan telepon
19. <input type="text">, untuk membuat inputan umum
20. <input type="time">, untuk membuat inputan waktu
21. <input type="url">, untuk membuat inputan url
22. <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,

Tutorial Lengkap Belajar Html # Membuat Form Input

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.