Properti HTML Input

Properti value

value Properti menentukan nilai awal bidang masukan:

Contoh

<form action="">
 Nama Pertama:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Nama Terakhir:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Properti readonly

readonly Properti menentukan bidang masukan hanya-baca (tidak dapat diubah):

Contoh

<form action="">
 Nama Pertama:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Nama Terakhir:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Properti readonly tidak memerlukan nilai. Ini setara dengan readonly="readonly".

Properti disabled

disabled Properti menentukan bidang masukan adalah diblokir.

Elemen yang diblokir tidak dapat digunakan dan diklik.

Elemen yang diblokir tidak akan disubmit.

Contoh

<form action="">
 Nama Pertama:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Nama Terakhir:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Properti disabled tidak memerlukan nilai. Ini setara dengan disabled="disabled".

Properti size

size Properti menentukan ukuran bidang masukan (dalam karakter):

Contoh

<form action="">
 Nama Pertama:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Nama Terakhir:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Properti maxlength

maxlength Aturan properti menentukan panjang maksimal bidang masukan:

Contoh

<form action="">
 Nama Pertama:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Nama Terakhir:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Jika diatur atribut maxlength, kontrol input tidak akan menerima karakter yang melebihi jumlah yang diizinkan.

Atribut ini tidak akan memberikan umpan balik. Jika perlu memberikan peringatan kepada pengguna, maka harus ditulis kode JavaScript.

Keterangan:Batas input bukan selalu benar. JavaScript menyediakan banyak metode untuk menambahkan input yang ilegal. Untuk membatasi input dengan aman, penerima (server) harus memeriksa pengaturan secara bersamaan.

Atribut HTML5

HTML5 menambahkan atribut berikut untuk <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • tinggi dan lebar
  • list
  • min dan max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

dan tambahkan atribut seperti yang berikut untuk <form>:

  • autocomplete
  • novalidate

Atribut autocomplete

Atribut autocomplete menentukan apakah form atau field input seharusnya diisi otomatis.

Ketika otomatis penempatan diaktifkan, peramban akan mengisi nilai otomatis berdasarkan input sebelumnya pengguna.

Petunjuk:Anda dapat mengatur penempatan form menjadi on, sambil mengatur input field tertentu menjadi off, dan sebaliknya.

Atribut autocomplete berlaku untuk <form> dan <input> tipe berikut: text, search, url, tel, email, password, datepickers, range serta color.

Contoh

Form HTML yang mengaktifkan otomatis penempatan (input field yang ada di off):

<form action="action_page.php" autocomplete="on">
   Nama Pertama:<input type="text" name="fname"><br>
   Nama belakang: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Coba Sendiri

Petunjuk:Dalam beberapa peramban, Anda mungkin perlu mengaktifkan fitur penyelesaian otomatis secara manual.

Atribut novalidate

Atribut novalidate termasuk dalam atribut <form>.

Jika diatur, novalidate menentukan bahwa data formulir tidak akan diverifikasi saat formulir disubmit.

Contoh

Menunjukkan bahwa formulir tidak melakukan verifikasi saat disubmit:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Coba Sendiri

Atribut autofocus

Atribut autofocus adalah atribut boolean.

Jika diatur, maka atribut autofocus menentukan bahwa elemen <input> harus otomatis mendapatkan fokus saat halaman dimuat.

Contoh

Membuat kolom input "First name" otomatis mendapatkan fokus saat halaman dimuat:

First name:<input type="text" name="fname" autofocus>

Coba Sendiri

Atribut form

Atribut form menentukan satu atau lebih formulir yang milik elemen <input>.

Petunjuk:Untuk mengutip lebih dari satu formulir, gunakan daftar id formulir yang dipisahkan dengan spasi.

Contoh

Kolom input berada di luar formulir HTML (tetapi tetap milik formulir):

<form action="action_page.php" id="form1">
   Nama depan: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

Coba Sendiri

Atribut formaction

Atribut formaction menentukan URL file yang akan ditangani saat formulir disubmit.

Atribut formaction menimbu atribut action elemen <form>.

Atribut formaction berlaku untuk type="submit" dan type="image".

Contoh

Form HTML dengan dua tombol submit dan aksi yang berbeda:

<form action="action_page.php">
   Nama depan: <input type="text" name="fname"><br>
   Nama belakang: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Coba Sendiri

Atribut formenctype

Atribut formenctype menentukan bagaimana data formulir (form-data) disubmitkan ke server (hanya untuk formulir dengan method="post").

属性 formenctype menimbu atribut enctype elemen <form>.

Atribut formenctype berlaku untuk type="submit" serta type="image".

Contoh

Kirim data formulir standar serta data formulir dengan encoding "multipart/form-data" (tombol submit kedua):

<form action="demo_post_enctype.asp" method="post">
   Nama depan: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

Coba Sendiri

Atribut formmethod

Atribut formmethod menentukan metode HTTP yang digunakan untuk mengirimkan data formulir (form-data) ke URL aksi.

Atribut formmethod menimpa atribut method elemen <form>.

Atribut formmethod berlaku untuk type="submit" serta type="image".

Contoh

Tombol submit kedua menimpa metode HTTP formulir:

<form action="action_page.php" method="get">
   Nama depan: <input type="text" name="fname"><br>
   Nama belakang: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

Coba Sendiri

Atribut formnovalidate

Atribut novalidate adalah atribut boolean.

Jika diatur, maka menentukan bahwa tidak ada pemeriksaan dilakukan terhadap elemen <input> saat formulir disubmit.

Atribut formnovalidate menimpa atribut novalidate elemen <form>.

Atribut formnovalidate dapat digunakan untuk type="submit"。

Contoh

Formulir dengan dua tombol submit (validasi dan tanpa validasi):

<form action="action_page.php">
   Email: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

Coba Sendiri

Atribut formtarget

Atribut formtarget yang ditentukan menunjukkan tempat tampilan tanggapan yang diterima setelah mengirimkan formulir.

Atribut formtarget akan menimpa atribut target elemen <form>.

Atribut formtarget dapat digunakan dengan type="submit" dan type="image".

Contoh

Form ini memiliki 2 tombol submit, yang coraknya berbeda untuk jendela tujuan yang berbeda:

<form action="action_page.php">
   Nama depan: <input type="text" name="fname"><br>
   Nama belakang: <input type="text" name="lname"><br>
   <input type="submit" value="Submit seperti biasa">
   <input type="submit" formtarget="_blank">
   value="Submit ke jendela baru">
</form>

Coba Sendiri

Atribut height dan width

Atribut height dan width menentukan tinggi dan lebar elemen <input>.

Atribut height dan width hanya digunakan untuk <input type="image">.

Keterangan:Selalu tentukan ukuran gambar. Jika peramban tidak mengetahui ukuran gambar, halaman akan berkedip saat gambar dimuat.

Contoh

Definisikan gambar sebagai tombol submit, dan atur atribut height dan width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Coba Sendiri

Atribut list

Atribut list mengacu ke elemen <datalist> yang mengandung opsi yang ditetapkan untuk elemen <input>.

Contoh

Gunakan <datalist> untuk menata elemen <input> nilai yang ditetapkan sebelumnya:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Coba Sendiri

Atribut min dan max

Atribut min dan max menentukan nilai minimum dan maksimum elemen <input>.

Atribut min dan max berlaku untuk jenis input seperti: number, range, date, datetime, datetime-local, month, time, dan week.

Contoh

Elemen <input> yang memiliki nilai minimum dan maksimum:

Masukkan tanggal sebelum 1980-01-01:
Masukkan tanggal sebelum 1980-01-01:
 Masukkan tanggal sebelum 1980-01-01:
Masukkan tanggal setelah 2000-01-02:
 Kuantitas (antara 1 dan 5):
<input type="number" name="quantity" min="1" max="5">

Coba Sendiri

Atribut multiple

Atribut multiple adalah atribut boolean.

Jika diatur, maka atur untuk memungkinkan pengguna memasukkan lebih dari satu nilai di dalam elemen <input>.

Atribut multiple berlaku untuk jenis input berikut: email dan file.

Contoh

Bidang unggah berkas yang menerima nilai yang berbeda:

Pilih gambar: <input type="file" name="img" multiple>

Coba Sendiri

Atribut pattern

Atribut pattern mengatur ekspresi reguler yang digunakan untuk memeriksa nilai elemen <input>.

Atribut pattern berlaku untuk jenis input berikut: text, search, url, tel, email, dan password.

Petunjuk:Gunakan atribut title global untuk mendeskripsikan pola untuk membantu pengguna.

Petunjuk:Belajar lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.

Contoh

Bidang input hanya dapat mengandung tiga huruf (tanpa angka atau karakter khusus):

Kode negara: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Coba Sendiri

Atribut placeholder

Atribut placeholder mengatur penjelasan yang digunakan untuk mendeskripsikan nilai yang diharapkan bidang input (contoh nilai atau deskripsi singkat tentang format).

Peringatan ini akan muncul di dalam bidang input sebelum pengguna memasukkan nilai.

Atribut placeholder berlaku untuk tipe input berikut: text, search, url, tel, email, dan password.

Contoh

Bidang input dengan teks penampung:

<input type="text" name="fname" placeholder="First name">

Coba Sendiri

Atribut required

Atribut required adalah atribut boolean.

Jika diatur, maka menentukan bahwa bidang input harus diisi sebelum mengirim formulir.

Atribut required berlaku untuk tipe input berikut: text, search, url, tel, email, dan password.

Contoh

Bidang input wajib diisi:

Username: <input type="text" name="usrname" required>

Coba Sendiri

Atribut step

Atribut step menentukan interval angka sah untuk elemen <input>.

Contoh: Jika step="3", angka yang sah adalah -3, 0, 3, 6, dan seterusnya.

Petunjuk:Atribut step dapat digunakan bersamaan dengan atribut max dan min untuk membuat rentang nilai yang sah.

Atribut step berlaku untuk tipe input berikut: number, range, date, datetime, datetime-local, month, time, dan week.

Contoh

Bidang input dengan interval angka yang konkrit dan sah:

<input type="number" name="points" step="3">

Coba Sendiri