HTML Input Atribut

The value Atribut

The value atribut menentukan nilai awal untuk sebuah field input:

The readonly Atribut

The readonly atribut menentukan bahwa kolom input dibaca hanya (cannot be changed) :

The readonly atribut tidak perlu nilai. Hal ini sama dengan menulis dibaca = "readonly".

The disabled Atribut

The disabled atribut menentukan bahwa kolom input dinonaktifkan.

Unsur cacat adalah un-digunakan dan un-diklik.

elemen dinonaktifkan tidak akan diserahkan.

The disabled atribut tidak perlu nilai. Hal ini sama dengan menulis cacat = "cacat".

The size Atribut

The size atribut menentukan ukuran (in characters) untuk bidang masukan:

The maxlength Atribut

The maxlength atribut menentukan panjang maksimum yang diperbolehkan untuk bidang masukan:

Dengan maxlength atribut, kontrol masukan tidak akan menerima lebih dari jumlah yang diizinkan karakter.

atribut tidak memberikan umpan balik. Jika Anda ingin memperingatkan pengguna, Anda harus menulis kode JavaScript.

Atribut HTML5

HTML5 menambahkan following atribut untuk <input> :

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

dan following atribut untuk <form> :

• autocomplete
• novalidate

The autocomplete Atribut

The autocomplete atribut menentukan apakah bentuk atau masukan lapangan harus memiliki autocomplete atau menonaktifkan.

Ketika autocomplete aktif, browser nilai otomatis lengkap berdasarkan nilai-nilai yang pengguna telah masuk sebelumnya.

Tip: Hal ini dimungkinkan untuk memiliki autocomplete "on" untuk formulir, dan "off" untuk bidang masukan tertentu, atau sebaliknya.

The autocomplete atribut bekerja dengan <form> dan berikut <input> jenis: text, search, url, tel, email, password, datepickers, range, and color .

Contoh

Bentuk HTML dengan autocomplete pada (and off for one input field) :

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

Cobalah sendiri "

Tip: Dalam beberapa browser Anda mungkin perlu mengaktifkan autocomplete fungsi untuk bekerja.

The novalidate Atribut

The novalidate atribut adalah <form> atribut.

Ketika hadir, novalidate menetapkan bahwa data formulir tidak harus divalidasi ketika disampaikan.

Contoh

Menunjukkan bahwa bentuk tidak akan divalidasi di submit:

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

Cobalah sendiri "

The autofocus Atribut

The autofocus atribut adalah atribut boolean.

Ketika hadir, itu menentukan bahwa <input> elemen harus secara otomatis mendapatkan fokus ketika beban halaman.

Contoh

Biarkan "First name" field input secara otomatis mendapatkan fokus ketika beban halaman:

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

Cobalah sendiri "

The form Atribut

The form atribut menentukan satu atau lebih bentuk sebuah <input> elemen milik.

Tip: Untuk mengacu pada lebih dari satu bentuk, menggunakan daftar dipisahkan dengan spasi dari form ids .

Contoh

Sebuah input field yang terletak di luar bentuk HTML (but still a part of the form) :

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

Last name: <input type="text" name="lname" form="form1">

Cobalah sendiri "

The formaction Atribut

The formaction atribut menentukan URL dari file yang akan memproses input kontrol ketika formulir dikirimkan.

The formaction atribut menimpa action atribut dari <form> elemen.

The formaction atribut digunakan dengan type = "submit" dan ketik = "image".

Contoh

Bentuk HTML dengan dua tombol submit, dengan tindakan yang berbeda:

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

Cobalah sendiri "

The formenctype Atribut

The formenctype atribut menentukan bagaimana bentuk-data harus dikodekan ketika mengirimkan ke server (only for forms with method="post" ) .

The formenctype atribut menimpa enctype atribut dari <form> elemen.

The formenctype atribut digunakan dengan type="submit" dan type="image" .

Contoh

Kirim form-data yang standar dikodekan (the first submit button) , dan dikodekan sebagai "multipart/form-data" (the second submit button) :

<form action="demo_post_enctype.asp" method="post">
  First name: <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>

Cobalah sendiri "

The formmethod Atribut

The formmethod atribut mendefinisikan metode HTTP untuk mengirimkan form-data ke URL tindakan.

The formmethod atribut menimpa method atribut dari <form> elemen.

The formmethod atribut dapat digunakan dengan type="submit" dan type="image" .

Contoh

Submit kedua tombol menggantikan metode HTTP dalam bentuk:

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <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>

Cobalah sendiri "

The formnovalidate Atribut

The novalidate atribut adalah atribut boolean.

Ketika hadir, itu menetapkan bahwa <input> elemen tidak harus divalidasi ketika disampaikan.

The formnovalidate atribut menimpa novalidate atribut dari <form> elemen.

The formnovalidate atribut dapat digunakan dengan type="submit" .

Contoh

Bentuk dengan dua tombol submit (with and without validation) :

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

Cobalah sendiri "

The formtarget Atribut

The formtarget atribut menentukan nama atau kata kunci yang menunjukkan di mana untuk menampilkan respon yang diterima setelah mengirimkan formulir.

The formtarget atribut menimpa target atribut dari <form> elemen.

The formtarget atribut dapat digunakan dengan type = "submit" dan ketik = "image".

Contoh

Bentuk dengan dua tombol submit, dengan jendela sasaran yang berbeda:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Cobalah sendiri "

The height dan width Atribut

The height dan lebar atribut menentukan tinggi dan lebar dari <input> elemen.

The height dan width atribut hanya digunakan dengan <input type="image"> .

Contoh

Tentukan gambar sebagai tombol submit, dengan tinggi dan lebar atribut:

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

Cobalah sendiri "

The list Atribut

The list atribut mengacu pada <datalist> elemen yang berisi opsi yang telah ditentukan untuk <input> elemen.

Contoh

Sebuah <input> elemen dengan nilai-nilai yang telah ditetapkan dalam <datalist> :

<input list="browsers">

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

Cobalah sendiri "

The min dan max Atribut

The min dan max atribut menentukan minimum dan nilai maksimum untuk <input> elemen.

The min dan max atribut bekerja dengan jenis masukan berikut: number, range, date, datetime, datetime-local, month, time and week .

Contoh

<Input> elemen dengan nilai min dan max:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Cobalah sendiri "

The multiple Attribute

The multiple atribut adalah atribut boolean.

Ketika hadir, itu menetapkan bahwa pengguna diperbolehkan untuk memasukkan lebih dari satu nilai dalam <input> elemen.

The multiple atribut bekerja dengan jenis berikut masukan: email , dan file .

Contoh

Bidang file upload yang menerima beberapa nilai:

Select images: <input type="file" name="img" multiple>

Cobalah sendiri "

The pattern Atribut

The pattern atribut menentukan ekspresi reguler bahwa <input> nilai elemen diperiksa terhadap.

The pattern atribut bekerja dengan jenis masukan berikut: text, search, url, tel, email, and password .

Tip: Gunakan global judul atribut untuk menggambarkan pola untuk membantu pengguna.

Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.

Contoh

Field input yang dapat berisi hanya tiga huruf (no numbers or special characters) :

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

Cobalah sendiri "

The placeholder Atribut

The placeholder atribut menetapkan petunjuk yang menggambarkan nilai yang diharapkan dari sebuah field input (a sample value or a short description of the format) .

Petunjuk ditampilkan dalam kolom input sebelum pengguna memasukkan nilai.

The placeholder atribut bekerja dengan jenis masukan berikut: text, search, url, tel, email, and password .

Contoh

Sebuah field input dengan teks placeholder:

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

Cobalah sendiri "

The required Atribut

The required atribut adalah atribut boolean.

Ketika hadir, itu menetapkan bahwa sebuah field input harus diisi sebelum mengirimkan formulir.

The required atribut bekerja dengan jenis berikut masukan: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

Contoh

Sebuah field input yang diperlukan:

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

Cobalah sendiri "

The step Atribut

The step atribut menentukan interval nomor hukum untuk <input> elemen.

Contoh: jika langkah = "3", nomor hukum bisa menjadi -3, 0, 3, 6, dll

Tip: The step atribut dapat digunakan bersama-sama dengan max dan min atribut untuk membuat rentang nilai hukum.

The step atribut bekerja dengan jenis masukan berikut: number, range, date, datetime, datetime-local, month, time and week .

Contoh

Field input dengan interval nomor hukum yang ditentukan:

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

Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»