DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Html # Membuat Form Input Di Html

advertisement
Tutorial cara membuat form di html

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.
Cara membuat form di html

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.
Cara membuat form
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.

advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat Form Input Di Html"

Silahkan berkomentar dengan baik dan bijak!