HTML - Atribut Borang: Panduan Pemula

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia menarik atribut borang HTML. Jangan khawatir jika Anda baru dalam hal ini - saya akan menjadi panduan ramah bagi Anda dalam perjalanan ini, sama seperti yang saya lakukan bagi murid-murid saya selama tahun tahun. Jadi, ambil secangkir minuman kesukaan Anda, dan mari kita mulai!

Apa Itu Atribut Borang?

Sebelum kita masuk ke dalam hal ini, mari kita mulai dari dasar. Atribut borang adalah petunjuk khusus yang kita berikan kepada borang HTML untuk mengendalikan perilakunya. Bayangkan mereka seperti saus rahasia yang membuat borang Anda berkerja seperti yang Anda inginkan.

Bayangkan Anda sedang memasak kue. Borang adalah adonan kue Anda, dan atribut adalah bahan khusus yang membuat kue Anda unik - mungkin sedikit esen vanila atau cokelat. Seperti bahan-bahan itu mengubah rasa kue Anda, atribut borang mengubah bagaimana borang Anda berkerja.

Atribut action

Atribut action adalah seperti memberitahu borang Anda tujuannya untuk mengirimkan pesannya. Itu adalah tujuan untuk data yang diisi pengguna.

Ini adalah contoh:

<form action="/submit-form">
<!-- Elemen borang di sini -->
</form>

Dalam kasus ini, ketika seseorang mengirimkan borang, semua data akan dikirim ke "/submit-form". Itu seperti mengalamatkan amplop sebelum Anda mengirimkan surat.

Atribut method

Atribut method menentukan bagaimana data dikirim. Ada dua metode utama: GET dan POST.

<form action="/submit-form" method="POST">
<!-- Elemen borang di sini -->
</form>

Bayangkan GET seperti mengirim postcard - informasi itu terlihat oleh semua. POST lebih seperti mengirim surat tertutup - informasi itu disembunyikan dari mata yang curiga.

Atribut target

Atribut target menentukan di mana tanggapan untuk pengiriman borang akan ditampilkan. Itu seperti memilih jendela mana yang akan dibuka saat Anda mengklik tautan.

<form action="/submit-form" method="POST" target="_blank">
<!-- Elemen borang di sini -->
</form>

Dalam contoh ini, _blank berarti tanggapan akan dibuka di tab atau jendela baru. Itu sempurna saat Anda ingin menjaga halaman asli Anda tetap terbuka.

Atribut novalidate

kadang-kadang, Anda mungkin ingin mematikan validasi borang bawaan browser. Itu di mana novalidate berguna.

<form action="/submit-form" method="POST" novalidate>
<!-- Elemen borang di sini -->
</form>

Dengan menambahkan novalidate, Anda memberitahu browser, "Jangan khawatir, saya akan menangani validasi itu sendiri!" Itu seperti mematikan spell-check di processor kata.

Atribut autocomplete

Atribut autocomplete adalah seperti memiliki asisten yang membantu yang ingat apa yang Anda ketik sebelumnya.

<form action="/submit-form" method="POST" autocomplete="on">
<!-- Elemen borang di sini -->
</form>

Dengan autocomplete="on", browser akan menyarankan nilai yang pernah dimasukkan sebelumnya. Itu sangat mudah bagi pengguna, seperti memiliki sekretaris pribadi!

Atribut enctype

Terakhir namun bukan kurang penting, kita ada atribut enctype. Ini agak teknis, tapi bayangkan itu seperti memilih jenis amplop yang tepat untuk surat Anda.

<form action="/submit-form" method="POST" enctype="multipart/form-data">
<!-- Elemen borang di sini -->
</form>

enctype="multipart/form-data" sangat penting saat borang Anda termasuk pengunggahan file. Itu seperti menggunakan amplop gepeng saat Anda mengirim sesuatu yang rapuh.

Menggabungkan Semua

Sekarang kita telah mengenal setiap atribut secara individual, mari kita lihat bagaimana mereka semua bekerja bersama dalam contoh dunia nyata:

<form action="/submit-application" method="POST" target="_blank" novalidate autocomplete="on" enctype="multipart/form-data">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="resume">Unggah Resume:</label>
<input type="file" id="resume" name="resume">

<input type="submit" value="Kirim Aplikasi">
</form>

Dalam contoh ini, kita telah membuat borang aplikasi kerja. Mari kita rincikan ini:

1. Data borang akan dikirim ke "/submit-application"
2. Kami menggunakan POST untuk menjaga data pribadi
3. Tanggapan akan dibuka di tab baru
4. Kami telah mematikan validasi browser untuk menggunakan validasi sendiri
5. Autocomplete diperbolehkan untuk membantu pengguna mengisi borang lebih cepat
6. Kami menggunakan multipart/form-data karena ada pengunggahan file

Atribut Borang Dalam Pandangan Umum

Berikut adalah tabel ringkasan semua atribut yang kita diskusikan:

Atribut	Tujuan	Contoh
action	Menentukan di mana data borang dikirim	action="/submit-form"
method	Menentukan bagaimana data borang dikirim	method="POST"
target	Menentukan di mana tanggapan ditampilkan	target="_blank"
novalidate	Mematikan validasi borang bawaan browser	novalidate
autocomplete	Membolehkan/menghilangkan fitur autocomplete	autocomplete="on"
enctype	Menentukan bagaimana data borang disembunyikan	enctype="multipart/form-data"

Dan begitu saja, teman-teman! Anda baru saja menyelesaikan perjalanan singkat melalui atribut borang HTML. Ingat, latihan membuat ahli, jadi jangan khawatir untuk mencoba atribut ini dalam borang Anda sendiri. Sebelum Anda tahu, Anda akan membuat borang yang tidak hanya berfungsi, tapi juga ramah pengguna dan efisien.

Selamat coding, dan semoga borang Anda selalu berhasil dikirim!

Credits: Image by storyset