Tag Terkait Formulir

Artikel ini menjelaskan tag yang terkait dengan formulir.

Ini menjelaskan berbagai bidang formulir seperti input teks dan menu tarik-turun.

YouTube Video

Tag Terkait Formulir

Tag <form>

1<form action="/submit" method="post">...</form>

• Tag <form> digunakan untuk mendefinisikan keseluruhan form.
• Atribut action menentukan tujuan, dan atribut method menentukan metode (GET atau POST).
• Anda juga dapat menentukan atribut target, mirip dengan tag <a>.

Tag <input> (bidang masukan teks)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> membuat bidang input teks satu baris. Pengguna dapat memasukkan teks apa saja.

• Atribut placeholder menentukan teks deskriptif yang muncul saat kolom input kosong. Ini membantu pengguna lebih mudah memahami input yang diharapkan. Teks ini akan otomatis menghilang ketika pengguna mulai mengetik.

  • placeholder cocok untuk memberikan informasi tambahan dan tidak cocok untuk instruksi penting seperti input yang wajib. Dalam kasus seperti itu, Anda harus menggunakan label.

Tag <input> (bidang masukan kata sandi)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> membuat bidang untuk input kata sandi. Karakter yang dimasukkan disembunyikan dan ditutup untuk memastikan keamanan.

Tag <input> (bidang masukan alamat email)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> membuat bidang untuk memasukkan alamat email dan termasuk validasi untuk memastikan format email yang benar.

Tag <input> (kotak centang)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> membuat sebuah kotak centang. Ketika beberapa opsi tersedia, pengguna dapat memilih beberapa item.

Tag <input> (tombol radio)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> membuat tombol radio yang memungkinkan pengguna memilih hanya satu opsi dari beberapa pilihan.

Tag <input> (tombol kirim)

1<input type="submit" value="Submit">

• <input type="submit"> membuat tombol untuk mengirimkan data dalam formulir.
• Nilai dari atribut value disertakan dalam data formulir saat dikirimkan.

Tag <input> (Tombol Reset)

1<input type="reset" value="Reset">

• <input type="reset"> membuat tombol yang mengatur ulang semua nilai input dalam formulir.

Tag <input> (bidang tersembunyi)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> membuat bidang tersembunyi yang tidak ditampilkan di layar dan digunakan untuk mengirim data ke backend ketika formulir dikirimkan.

Tag <input> (pemilih warna)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> menampilkan pemilih warna dan membuat bidang input bagi pengguna untuk memilih warna.

Tag <input> (bidang masukan tanggal)

1<input type="date" name="birthday">

• <input type="date"> membuat bidang input tanggal yang menampilkan kalender untuk memilih tanggal.

Tag <input> (bidang masukan waktu)

1<input type="time" name="appointment_time">

• <input type="time"> membuat bidang untuk memasukkan waktu, dan pemilih waktu ditampilkan.

Tag <input> (bidang input file)

1<input type="file" name="resume">

• <input type="file"> membuat bidang input bagi pengguna untuk memilih dan mengunggah file.
• Atribut enctype dari tag form harus diatur ke multipart/form-data.

Tag <input> (angka)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> membuat input field angka yang memungkinkan pengaturan nilai minimum, nilai maksimum, dan langkah (jumlah kenaikan/penurunan).

Tag <input> (bidang pemilihan rentang untuk angka)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> membuat input field di mana pengguna dapat memilih nilai dalam rentang menggunakan slider.

Tag <textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• Tag <textarea> membuat input field teks multi-baris. Ini cocok untuk memasukkan teks panjang atau komentar.

Tag <select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• Tag <select> membuat menu dropdown, dan opsi-opsi didefinisikan dengan tag <option>. Pengguna dapat memilih satu atau beberapa item.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Untuk mengaktifkan pemilihan ganda, tambahkan atribut multiple. Menentukan atribut ini akan menampilkan opsi sebagai kotak daftar.

Tag <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• Tag <optgroup> digunakan untuk mengelompokkan item yang terkait bersama-sama. Atribut label memungkinkan Anda menetapkan nama grup, memberikan opsi yang jelas kepada pengguna meskipun daftar panjang.

Tag <label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• Tag <label> mendefinisikan label untuk input field, kotak centang, dan tombol radio, meningkatkan kegunaan dan aksesibilitas.
• Misalnya, mengklik label dapat memfokuskan bidang input atau mengaktifkan/mematikan kotak centang.

Tag <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• Tag <fieldset> mengelompokkan kontrol formulir yang terkait, dan tag <legend> memberikan judul untuk grup tersebut.

Tag <button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• Tag <button> mendefinisikan tombol yang dapat diklik yang memicu pengiriman formulir atau tindakan lain.

  Ketika type="button" ditentukan, ini berfungsi sebagai tombol biasa. Mengkliknya tidak mengirimkan formulir atau memicu tindakan default lainnya. Ini digunakan ketika Anda ingin menetapkan tindakan khusus dengan JavaScript.

  Ketika type="submit" ditentukan, ini berfungsi sebagai tombol kirim untuk formulir. Ketika tombol ini diklik, formulir yang mengandungnya akan dikirimkan.

  Ketika type="reset" ditentukan, ini berfungsi sebagai tombol reset untuk formulir. Mengkliknya akan mengatur ulang semua input field dalam formulir dan mengembalikannya ke keadaan awal.

  Jika atribut type tidak ditentukan, beberapa browser mungkin menganggapnya sebagai type="submit", jadi disarankan untuk menentukan tipe secara eksplisit untuk memastikan perilaku yang dimaksudkan.

• Tag <button> dapat menyertakan konten HTML lain di antara tag pembuka dan penutup, memungkinkan untuk membuat tombol dengan ikon atau teks yang kompleks.

• Untuk tombol submit menggunakan tag <input>, nilai atribut value disertakan dalam data form, tetapi dengan tag <button>, nilai tersebut tidak dikirim secara default.

  Dengan menentukan atribut name dan value untuk tag <button>, nilainya dapat dikirim sebagai data form.

Tag <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• Tag <datalist> memberikan daftar opsi yang dapat dipilih untuk elemen <input>. Pengguna dapat memilih dari daftar atau memasukkan nilai mereka sendiri.

Tag <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• Tag <output> menampilkan hasil dari perhitungan atau interaksi pengguna. Tag ini digunakan untuk menampilkan hasil perhitungan secara dinamis dalam formulir atau skrip.
• Untuk atribut for, tentukan ID elemen formulir yang ingin Anda hubungkan, dipisahkan dengan spasi.

Tag <progress>

1<progress value="70" max="100">70%</progress>

• Tag <progress> menunjukkan kepada pengguna kemajuan dari sebuah tugas. Misalnya, tag ini dapat secara visual menunjukkan kemajuan dari pengunduhan atau instalasi berkas.

Tag <meter>

1<meter value="0.6">60%</meter>

• Tag <meter> merepresentasikan pengukuran numerik dalam rentang yang diketahui. Tag ini digunakan untuk menampilkan pengukuran seperti penggunaan disk atau pengukur bahan bakar dalam rentang tertentu.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video