Bab ini akan menjelaskan berbagai jenis atribut yang terdapat pada elemen <input> HTML.
Section Artikel
- 1 Atribut Value
- 2 Atribut readonly
- 3 Atribut Disabled
- 4 Atribut Size
- 5 Atribut Maxlength
- 6 Atribut min dan max
- 7 Atribut multiple
- 8 Atribut Pattern
- 9 Atribut Placeholder
- 10 Atribut Required
- 11 Atribut Step
- 12 Atribut Autofocus
- 13 Atribut height dan width
- 14 Atribut List
- 15 Atribut autocomplete
- 16 HTML Form and Input Elements
Atribut Value
Atribut input value menentukan nilai awal pada field input.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Atribut input value</h1> <p>Atribut value menentukan nilai awal pada field input.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut readonly
Atribute input readonly menentukan bahwa kolom input hanya dapat dibaca tidak dapat diubah.
Field input readonly tidak dapat diubah (namun, pengguna dapat melakukan tab, highlight, dan copy pada teks tersebut).
Nilai Field input readonly akan dikirimkan saat menekan submit pada sebuah form.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Atribut readonly </h1> <p>Atribute input readonly menentukan bahwa kolom input hanya dapat dibaca tidak dapat diubah.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut Disabled
Atribut input disabled menentukan bahwa field input harus dinonaktifkan.
Filed input yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklik.
Nilai field input yang dinonaktifkan tidak akan terkirim saat menekan tombol submit pada sebuah form.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Atribut disabled</h1> <p>Atribut input disabled menentukan bahwa filed input yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklik.:</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut Size
Atribut input size berfungsi untuk menentukan panjang karakter yang terlihat dari field inputan.
Nilai default untuk atribut size adalah 20 karakter.
Catatan: Atribut size hanya bekerja pada jenis input seperti text, search, tel, url, email, dan password.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Atribut Input</h1> <p>Atribut input sizeberfungsi untuk menentukan panjang karakter yang terlihat dari field inputan.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</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"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut Maxlength
Atribut input maxlength menentukan jumlah karakter maksimum yang diperbolehkan dalam field inputan.
Catatan: Saat maxlength diatur, field input tidak akan menerima lebih dari jumlah karakter yang ditentukan. Namun, atribut ini tidak memberikan umpan balik apa pun. Jadi, untuk mengingatkan pengguna, gunakanlah JavaScript.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Atribut maxlength</h1> <p>Atribut input maxlength menentukan jumlah karakter maksimum yang diperbolehkan dalam field input.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</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"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut min dan max
Atribut input min dan max menentukan nilai minimum dan maksimum pada filed inputan.
Atribut min dan max bekerja dengan jenis input berikut: number, range, date, datetime-local, month, time and week.
Tip: Gunakan atribut max dan min bersama-sama untuk membuat nilai range yang sah.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Atribut min dan max</h1> <p>Atribut input min dan max menentukan nilai minimum dan maksimum pada filed inputan.</p> <form action="/action_page.php"> <label for="datemax">Masukan tanggal sebelum 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Masukan tanggal sesudah 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">Jumlah (antara 1 dan 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut multiple
Atribut input multiple menentukan bahwa pengguna diizinkan untuk memasukkan lebih dari satu nilai dalam field inputan.
Atribut multiple berfungsi pada jenis inputan berikut: email, dan file.
Contoh :
Field upload file yang menerima nilai multiple.
<!DOCTYPE html> <html> <body> <h1>Atribut input multiples</h1> <p>Atribut input multiple menentukan bahwa pengguna diizinkan untuk memasukkan lebih dari satu nilai dalam field inputan.</p> <form action="/action_page.php"> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple><br><br> <input type="submit" value="Submit"> </form> <p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p> </body> </html>
Atribut Pattern
Atribut input pattern menentukan ekspresi reguler yang nilai filed inputnya diperiksa, saat form dikirimkan.
Atribut pattern bekerja pada jenis inputan berikut: text, date, search, url, tel, email, dan password.
Tip: Gunakan atribut global title untuk mendeskripsikan pattern untuk membantu pengguna.
Contoh :
Field inputan yang hanya dapat berisi tiga huruf (tidak ada angka atau karakter khusus).
<!DOCTYPE html>
<html>
<body>
<h1>Atribut Pattern</h1>
<p>Atribut input pattern menentukan ekspresi reguler yang nilai filed inputnya diperiksa, saat form dikirimkan.</p>
<form action="/action_page.php">
<label for="country_code">Kode Negara:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Catatan:</strong> Atribut pola dari tag input tidak didukung di Safari 10 (atau versi lebih lama).</p>
</body>
</html>
Atribut Placeholder
Atribut input placeholder menentukan petunjuk singkat yang menjelaskan nilai yang diharapkan dari field input (nilai sampel atau deskripsi singkat tentang format yang diharapkan).
Petunjuk singkat ditampilkan di kolom input sebelum pengguna memasukkan nilai.
Atribut placeholder berfungsi pada jenis input berikut: text, search, url, tel, email, dan password.
Contoh :
Field input dengan teks placeholder.
<!DOCTYPE html>
<html>
<body>
<h1>Atribut Placeholder</h1>
<p>Atribut input placeholder menentukan petunjuk singkat yang menjelaskan nilai yang diharapkan dari field input.</p>
<form action="/action_page.php">
<label for="phone">Masukan nomor telp:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Atribut Required
Atribut input required menentukan bahwa field input harus diisi sebelum form dikirimkan.
Atribut required berfungsi pada jenis masukan berikut: text, search, url, tel, email, password, date picker, number, checkbox, radio, dan file.
Contoh :
Field input required:
<!DOCTYPE html> <html> <body> <h1>Atribut required</h1> <p>Atribut input required menentukan bahwa field input harus diisi sebelum form dikirimkan.</p> <form action="/action_page.php"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <input type="submit" value="Submit"> </form> <p><strong>catatan:</strong> Atribut require tag input tidak didukung pada Safari versi 10.1 sebelumnya.</p> </body> </html>
Atribut Step
Atribut input step menentukan interval nomor resmi untuk field inputan.
Contoh: jika steh = “3”, angka resmi bisa jadi -3, 0, 3, 6, dll.
Tip: Atribut ini dapat digunakan bersama dengan atribut max dan min untuk membuat berbagai nilai sah.
Atribut step berfungsi dengan jenis input berikut: number, range, date, datetime-local, month, time and week.
Contoh
Field inputan dengan interval nomor resmi tertentu:
<!DOCTYPE html> <html> <body> <h1>Atribut Step</h1> <p>Atribut input step menentukan interval nomor resmi untuk field inputan.</p> <form action="/action_page.php"> <label for="points">Poin:</label> <input type="number" id="points" name="points" step="3"> <input type="submit" value="Submit"> </form> </body> </html>
Catatan: Membatasi input pada form tidak mudah dilakukan, dan JavaScript menyediakan banyak cara untuk menambahkan input ilegal. Untuk membatasi inputan dengan aman, inputan legal juga harus diperiksa oleh penerima (server)!
Atribut Autofocus
Atribut input autofocus menentukan bahwa field inputan harus secara otomatis menjadi fokus saat halaman dimuat.
Contoh
Biarkan kolom input “Nama depan” mendapatkan autofocus saat halaman dimuat:
<!DOCTYPE html> <html> <body> <h1>Atribut autofocus</h1> <p>Atribut input autofocus menentukan bahwa field inputan harus secara otomatis menjadi fokus saat halaman dimuat.</p> <form action="/action_page.php"> <label for="fname">Nama depan:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Nama belakang:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Atribut height dan width
Atribut input height dan width menentukan tinggi dan lebar elemen <input type=”image”> .
Tip: Selalu tentukan atribut height dan width untuk gambar. Jika height dan width diatur, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Tanpa atribut ini, browser tidak mengetahui ukuran gambar, dan tidak dapat menyediakan ruang yang sesuai untuk itu. Efeknya adalah tata letak halaman akan berubah selama pemuatan (saat gambar dimuat).
Contoh
Menentukan sebuah gambar sebagai tombol submit, dengan atribut height dan width
<!DOCTYPE html> <html> <body> <h1>TAtribut input height dan width </h1> <p>Atribut input height dan width menentukan tinggi dan lebar elemen input type="image" .</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Nama Belakang:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> <p><b>Catatan:</b> Input type = "image" mengirimkan koordinat X dan Y dari klik yang mengaktifkan image button.</p> </body> </html>
Atribut List
Atribut input List merujuk ke elemen <datalist> yang berisi opsi yang telah ditentukan sebelumnya untuk elemen <input>.
Contoh
Elemen <input> dengan nilai yang ditentukan sebelumnya.
<!DOCTYPE html>
<html>
<body>
<h1>Atribut List</h1>
<p>Atribut input List merujuk ke elemen datalist yang berisi opsi yang telah ditentukan sebelumnya untuk elemen input.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
<p><b>Catattan:</b>Tag datalist tidak didukung di Safari 12.0 (atau versi lebih lama).</p>
</body>
</html>
Atribut autocomplete
Atribut input autocomplete menentukan apakah formulir atau field inputan harus mengaktifkan atau menonaktifkan pelengkapan otomatis.
Autocomplete memungkinkan browser memprediksi nilainya. Saat pengguna mulai mengetik di field input, browser harus menampilkan opsi untuk mengisi field , berdasarkan nilai yang diketik sebelumnya.
Atribut autocomplete berfungsi dengan dan jenis berikut: text, search, url, tel, email, password, datepickers, range, dan color.
Contoh
Formulir HTML dengan autocomplete aktif dan nonaktif untuk satu field inputan:
<!DOCTYPE html> <html> <body> <h1>Atribut autocomplete</h1> <p>Atribut input autocomplete menentukan apakah formulir atau field inputan harus mengaktifkan atau menonaktifkan pelengkapan otomatis.</p> <p>Isi dan submit form, lalu muat ulang halaman untuk melihat cara kerja autocomplete.</p> <p>Perhatikan bahwa autocomplte "aktif" untuk formulir, tetapi "nonaktif" untuk field email!</p> <form action="/action_page.php" autocomplete="on"> <label for="fname">Nama depan:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Nama belakang:</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> </body> </html>
Tip: Di beberapa browser, Anda mungkin perlu mengaktifkan fungsi autocomplete agar atribut ini berfungsi (Lihat di bawah “Preferences” di menu browser).
HTML Form and Input Elements
| Tag | Description |
|---|---|
| <form> | Mendefinisikan bentuk formulir untuk input pengguna |
| <input> | Mendefinisikan kontrol input |
