Atribut Masukan HTML
Bab ini menjelaskan atribut yang berbeda untuk <input>elemen HTML.
Nilai Atribut
Atribut input valuemenentukan nilai awal untuk bidang input:
Contoh
Bidang input dengan nilai awal (default):
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atribut yang hanya bisa dibaca
Atribut input readonlymenentukan bahwa field input adalah read-only.
Bidang input read-only tidak dapat dimodifikasi (namun, pengguna dapat melakukan tab ke sana, menyorotnya, dan menyalin teks darinya).
Nilai bidang input read-only akan dikirim saat mengirimkan formulir!
Contoh
Bidang masukan hanya-baca:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atribut yang dinonaktifkan
Atribut input disabledmenentukan bahwa bidang input harus dinonaktifkan.
Bidang masukan yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklik.
Nilai bidang input yang dinonaktifkan tidak akan dikirim saat mengirimkan formulir!
Contoh
Bidang masukan yang dinonaktifkan:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Ukuran Atribut
Atribut input sizemenentukan lebar yang terlihat, dalam karakter, dari bidang input.
Nilai default untuk sizeadalah 20.
Catatan: Atribut sizeberfungsi dengan jenis input berikut: teks, pencarian, telp, url, email, dan kata sandi.
Contoh
Tetapkan lebar untuk bidang input:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
Atribut maxlength
Atribut input maxlengthmenentukan jumlah karakter maksimum yang diizinkan dalam bidang input.
Catatan: Jika a maxlengthdisetel, bidang input tidak akan menerima lebih dari jumlah karakter yang ditentukan. Namun, atribut ini tidak memberikan umpan balik apa pun. Jadi, jika Anda ingin mengingatkan pengguna, Anda harus menulis kode JavaScript.
Contoh
Tetapkan panjang maksimum untuk bidang input:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Atribut min dan maks
Input mindan maxatribut menentukan nilai minimum dan maksimum untuk bidang input.
Atribut minand maxberfungsi dengan jenis input berikut: angka, rentang, tanggal, tanggal-waktu-lokal, bulan, waktu, dan minggu.
Kiat: Gunakan atribut maks dan min bersama-sama untuk membuat rentang nilai hukum.
Contoh
Tetapkan tanggal maksimum, tanggal minimum, dan rentang nilai hukum:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Beberapa Atribut
Atribut input multiplemenentukan bahwa pengguna diizinkan untuk memasukkan lebih dari satu nilai dalam bidang input.
Atribut multipleberfungsi dengan jenis input berikut: email, dan file.
Contoh
Bidang unggah file yang menerima beberapa nilai:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Atribut pola
Atribut input patternmenentukan ekspresi reguler yang memeriksa nilai bidang input, saat formulir dikirimkan.
Atribut patternberfungsi dengan jenis input berikut: teks, tanggal, pencarian, url, telp, email, dan kata sandi.
Tip: Gunakan atribut judul global untuk menjelaskan pola untuk membantu pengguna.
Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Contoh
Bidang input yang hanya dapat berisi tiga huruf (tanpa angka atau karakter khusus):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Atribut placeholder
Atribut input placeholdermenentukan petunjuk singkat yang menjelaskan nilai yang diharapkan dari bidang input (nilai sampel atau deskripsi singkat tentang format yang diharapkan).
Petunjuk singkat ditampilkan di bidang input sebelum pengguna memasukkan nilai.
Atribut placeholderberfungsi dengan jenis input berikut: teks, pencarian, url, telp, email, dan kata sandi.
Contoh
Bidang masukan dengan teks placeholder:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Atribut yang dibutuhkan
Atribut input requiredmenentukan bahwa bidang input harus diisi sebelum mengirimkan formulir.
Atribut requiredberfungsi dengan jenis input berikut: teks, pencarian, url, telp, email, kata sandi, pemilih tanggal, nomor, kotak centang, radio, dan file.
Contoh
Bidang masukan yang diperlukan:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Atribut langkah
Atribut input stepmenentukan interval nomor legal untuk bidang input.
Contoh: jika step="3", nomor resmi dapat berupa -3, 0, 3, 6, dst.
Tip: Atribut ini dapat digunakan bersama dengan atribut max dan min untuk membuat rentang nilai legal.
Atribut stepbekerja dengan jenis input berikut: nomor, rentang, tanggal, datetime-local, bulan, waktu dan minggu.
Contoh
Bidang masukan dengan interval nomor resmi yang ditentukan:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Catatan: Pembatasan input tidak mudah, dan JavaScript menyediakan banyak cara untuk menambahkan input ilegal. Untuk membatasi input dengan aman, itu juga harus diperiksa oleh penerima (server)!
Atribut fokus otomatis
Atribut input autofocusmenentukan bahwa bidang input harus secara otomatis mendapatkan fokus saat halaman dimuat.
Contoh
Biarkan bidang input "Nama depan" secara otomatis mendapatkan fokus saat halaman dimuat:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Atribut tinggi dan lebar
Input heightdan widthatribut menentukan tinggi dan lebar <input
type="image">elemen.
Tip: Selalu tentukan atribut tinggi dan lebar untuk gambar. Jika tinggi dan lebar diatur, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Tanpa atribut ini, browser tidak mengetahui ukuran gambar, dan tidak dapat memesan ruang yang sesuai untuk itu. Efeknya adalah tata letak halaman akan berubah selama pemuatan (saat gambar dimuat).
Contoh
Tentukan gambar sebagai tombol kirim, dengan atribut tinggi dan lebar:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Daftar Atribut
Atribut input listmengacu pada <datalist>elemen yang berisi opsi yang telah ditentukan sebelumnya untuk elemen <input>.
Contoh
Elemen <input> dengan nilai yang telah ditentukan sebelumnya dalam <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Atribut pelengkapan otomatis
Atribut input autocompletemenentukan apakah formulir atau bidang input harus memiliki pelengkapan otomatis aktif atau nonaktif.
Pelengkapan otomatis memungkinkan browser memprediksi nilainya. Saat pengguna mulai mengetik di bidang, browser akan menampilkan opsi untuk mengisi bidang, berdasarkan nilai yang diketik sebelumnya.
Atribut autocompleteberfungsi dengan <form>dan <input>jenis berikut: teks, pencarian, url, tel, email, kata sandi, datepickers, rentang, dan warna.
Contoh
Formulir HTML dengan pelengkapan otomatis aktif dan nonaktif untuk satu bidang masukan:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Tip: Di beberapa browser Anda mungkin perlu mengaktifkan fungsi pelengkapan otomatis agar ini berfungsi (Lihat di bawah "Preferensi" di menu browser).
Latihan HTML
Formulir HTML dan Elemen Masukan
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .