Kursus IT Dasar HTML 013_Formulir dan input pengguna

Formulir

Formulir HTML (Form) adalah bagian yang sangat penting dari HTML. Formulir memungkinkan pengguna memasukkan informasi pada halaman web dan mengirimkan informasi tersebut ke server.

Contoh:

1
<form action="/submit" method="post">
2
  <!-- Elemen formulir ada di sini -->
3
</form>

Elemen <form> mendefinisikan area tempat pengguna memasukkan data dan dapat berisi berbagai jenis elemen input, seperti area teks <textarea>, daftar dropdown <select>, tombol radio <radio>, checkbox <checkbox>, dan tombol <button>, dll.

Atribut formulir:

• action: Mendefinisikan URL file pemrosesan di server tempat data formulir dikirimkan.
• method: Mendefinisikan metode HTTP yang digunakan untuk mengirim data ke server. Nilai yang umum digunakan adalah “get” dan “post”.
• name: Digunakan untuk menentukan nama formulir. Nama formulir digunakan untuk mengidentifikasi formulir dan digunakan saat memproses data formulir di sisi server.
• enctype: Digunakan untuk menentukan metode pengkodean data formulir. Data formulir dapat dikodekan menggunakan application/x-www-form-urlencoded atau multipart/form-data.
• autocomplete: Digunakan untuk menentukan apakah fungsi pelengkapan otomatis formulir diaktifkan. Jika diatur ke on, browser akan secara otomatis mengisi data yang sebelumnya dimasukkan dalam formulir.
• novalidate: Digunakan untuk menentukan apakah data formulir harus divalidasi. Jika diatur ke on, data formulir tidak akan divalidasi sebelum dikirim.

[!Ringkasan]

• Elemen form itu sendiri tidak terlihat.

Field teks

Dalam formulir, kita sering memerlukan pengguna untuk memasukkan konten teks seperti huruf dan angka. Ini dapat dicapai dengan elemen <input>, dengan atribut type diatur ke “text”.

Contoh:

1
<form>
2
Nama: <input type="text" name="name"><br>
3
Usia: <input type="text" name="age">
4
</form>

Efek:

[!Ringkasan]

• Di sebagian besar browser, lebar default field teks adalah 20 karakter.

Field kata sandi

Jika Anda memerlukan pengguna memasukkan kata sandi, Anda dapat mengatur atribut type elemen <input> ke “password”, dan konten yang dimasukkan akan disembunyikan.

Contoh:

1
<form>
2
Kata sandi: <input type="password" name="pwd">
3
</form>

Efek:

[!Ringkasan]

• Karakter field kata sandi tidak ditampilkan dalam teks biasa, tetapi diganti dengan tanda bintang * atau titik .

Tombol radio (Radio Buttons)

Tombol radio dan checkbox memungkinkan pengguna memilih satu atau beberapa opsi dari beberapa pilihan. Nilai atribut type tombol radio adalah “radio”.

Contoh:

1
<form action="">
2
Jenis kelamin:
3
<input type="radio" name="sex" value="male" checked>Laki-laki
4
<input type="radio" name="sex" value="female">Perempuan
5
</form>

Efek:

[!Ringkasan]

• Nilai atribut name tombol radio harus sama, jika tidak mereka tidak akan menjadi bagian dari grup yang sama.
• Atribut checked digunakan untuk menentukan apakah tombol radio dipilih secara default.

Checkbox (Checkboxes)

Checkbox dapat memilih satu atau beberapa opsi, didefinisikan dengan <input type="checkbox">

Contoh:

1
<form>
2
  Aplikasi yang pernah Anda gunakan:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

Efek:

[!Ringkasan]

• Atribut checked digunakan untuk menentukan apakah checkbox dipilih secara default.

Daftar dropdown (select)

Daftar dropdown memungkinkan pengguna memilih satu opsi dari beberapa pilihan. Daftar dropdown dibuat dengan elemen <select> dan menggunakan elemen <option> untuk mendefinisikan opsi.

Contoh:

1
<form action="">
2
  Silakan pilih negara Anda:
3
  <select name="country">
4
    <option value="china">Tiongkok</option>
5
    <option value="us">Amerika Serikat</option>
6
    <option value="japan">Jepang</option>
7
  </select>
8
</form>

Efek:

[!Ringkasan]

• Atribut selected digunakan untuk menentukan opsi default daftar dropdown.
• Atribut disabled digunakan untuk menentukan apakah daftar dropdown tersedia.
• Anda dapat menggunakan atribut size untuk menentukan jumlah opsi yang terlihat dalam daftar dropdown.

Tombol kirim (Submit, Reset, Button)

Formulir biasanya memerlukan tombol untuk mengirim atau mengonfirmasi input pengguna. submit, reset, dan button semuanya adalah elemen tombol formulir dalam HTML.

Contoh:

1
<form action="/submit" method="post">
2
  <input type="submit" value="Tombol kirim">
3
  <input type="reset" value="Tombol reset">
4
  <button type="button" value="Tombol konfirmasi">Tombol konfirmasi</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Tombol gambar" width="50" height="50">
6
</form>

Efek:

[!Ringkasan]

• post: Mengacu pada metode HTTP POST. Data formulir akan disertakan dalam badan formulir kemudian dikirim ke server, digunakan untuk mengirim data sensitif seperti nama pengguna dan kata sandi.
• get: Nilai default, mengacu pada metode HTTP GET. Data formulir akan dilampirkan ke URL atribut action, dengan ? sebagai pemisah, umumnya digunakan untuk informasi tidak sensitif seperti pagination. Misalnya: https://www.zhaojian.net/?page=1, di sini page=1 adalah data yang dikirim dengan metode get.

Elemen dan atribut formulir