Atribut HTML Input

Atribut value

value Atribut menentukan nilai awal bidang input:

Contoh

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

Coba Sendiri

Atribut readonly

readonly Atribut menentukan bidang input hanya baca (tidak dapat diubah):

Contoh

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

Coba Sendiri

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

Atribut disabled

disabled Atribut menentukan bidang input adalah disabilitasi.

Elemen yang disabilitasi tidak dapat digunakan dan diklik.

Elemen yang disabilitasi tidak akan disubmit.

Contoh

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

Coba Sendiri

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

Atribut size

size Atribut menentukan ukuran bidang input (dalam huruf):

Contoh

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

Coba Sendiri

Atribut maxlength

maxlength Pengaturan sifat memutuskan panjang maksimum bidang input:

Contoh

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

Coba Sendiri

Jika diatur properti maxlength, kontrol input tidak akan menerima lebih daripada jumlah yang diizinkan huruf.

Properti ini tidak akan memberikan sebarang umpan balik. Jika perlu memberikan umpan balik kepada pengguna, anda mesti menulis kod JavaScript.

註釋：Penghadapan input bukan pasti. JavaScript menyediakan banyak cara untuk menambahkan input yang ilegal. Untuk menghadapi penghadapan input yang selamat, penerima (server) mesti memeriksa penghadapan secara bersamaan.

Properti HTML5

HTML5 menambahkan seperti properti 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 seperti properti yang diperlukan untuk <form>:

  • autocomplete
  • novalidate

Properti autocomplete

Properti autocomplete menentukan sama ada borang atau bidang input seharusnya mengisi otomatis.

Ketika pengisian otomatis diaktifkan, pelayar akan mengisi nilai secara otomatis berdasarkan masukan sebelumnya pengguna.

Petunjuk:Anda boleh menetapkan pengisian otomatis borang menjadi on, serta mengatur bidang input khusus menjadi off, dan sebaliknya.

Properti autocomplete berlaku untuk <form> serta <input> jenis: text, search, url, tel, email, password, datepickers, range serta color.

Contoh

Borang HTML yang mengaktifkan pengisian otomatis (bidang input tertentu adalah off):

<form action="action_page.php" autocomplete="on">
   Nama Pertama:<input type="text" name="fname"><br>
   姓氏： <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 divalidasi saat formulir disubmit.

Contoh

Menunjukkan bahwa formulir tidak akan divalidasi 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 elemen <input> akan secara otomatis mendapatkan fokus saat halaman dimuat.

Contoh

Membuat kolom input "First name" secara 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 milik elemen <input>.

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

Contoh

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

<form action="action_page.php" id="form1">
   名字： <input type="text" name="fname"><br>
   <input type="submit" value="Hantar">
</form>
 Last name: <input type="text" name="lname" form="form1">

Coba Sendiri

Atribut formaction

Atribut formaction menentukan URL yang akan diproses bila formulir disubmitkan.

Atribut formaction menggantikan atribut action elemen <form>.

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

Contoh

Pemformulir HTML yang memiliki dua tombol submit dan untuk aksi yang berbeda:

<form action="action_page.php">
   名字： <input type="text" name="fname"><br>
   姓氏： <input type="text" name="lname"><br>
   <input type="submit" value="Hantar"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Coba Sendiri

Atribut formentype

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

attribut formentype menggantikan atribut enctype elemen <form>.

Atribut formenctype digunakan untuk type="submit" serta type="image"。

Contoh

Hantar data borang (form-data) dengan pengkodean lalai serta pengkodean "multipart/form-data" (butang hantar kedua):

<form action="demo_post_enctype.asp" method="post">
   名字： <input type="text" name="fname"><br>
   <input type="submit" value="Hantar">
   <input type="submit" formenctype="multipart/form-data">
   value="Hantar sebagai Multipart/form-data">
</form>

Coba Sendiri

Atribut formmethod

Atribut formmethod menentukan metod HTTP yang digunakan untuk menghantar data borang (form-data) ke URL tindak balas.

Atribut formmethod menimpa atribut method elemen <form>。

Atribut formmethod digunakan untuk type="submit" serta type="image"。

Contoh

Butang hantar kedua menimpa metod HTTP borang:

<form action="action_page.php" method="get">
   名字： <input type="text" name="fname"><br>
   姓氏： <input type="text" name="lname"><br>
   <input type="submit" value="Hantar">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Hantar menggunakan POST">
</form>

Coba Sendiri

Atribut formnovalidate

Atribut novalidate adalah atribut boolean.

Jika diatur, ia tentu bahawa pengesahan elemen <input> tidak akan dilakukan semasa menghantar borang.

Atribut formnovalidate menimpa atribut novalidate elemen <form>。

Atribut formnovalidate boleh digunakan untuk type="submit"。

Contoh

Borang dengan dua butang hantar (pengesahan dan tanpa pengesahan):

<form action="action_page.php">
   E-mel: <input type="email" name="userid"><br>
   <input type="submit" value="Hantar"><br>
   <input type="submit" formnovalidate value="Hantar tanpa pengesahan">
</form>

Coba Sendiri

formtarget 屬性

formtarget 屬性規定的名稱或關鍵詞指示提交表單後在何處顯示接收到的響應。

formtarget 屬性會覆蓋 <form> 元素的 target 屬性。

formtarget 屬性可與 type="submit" 和 type="image" 使用。

Contoh

這個表單有兩個提交按鈕，對應不同的目標窗口：

<form action="action_page.php">
   名字： <input type="text" name="fname"><br>
   姓氏： <input type="text" name="lname"><br>
   <input type="submit" value="正常提交">
   <input type="submit" formtarget="_blank">
   value="提交到新窗口">
</form>

Coba Sendiri

height 和 width 屬性

height 和 width 屬性規定 <input> 元素的高度和寬度。

height 和 width 屬性僅用於 <input type="image">。

註釋：請始終規定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍。

Contoh

將圖像定義為提交按鈕，並設置 height 和 width 屬性：

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

Coba Sendiri

list 属性

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

Contoh

使用 <datalist> 设定预定义值的 <input> 元素：

<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

Properti min dan max

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

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

Contoh

Elemen <input> yang mempunyai nilai minimum dan maksimum:

Masukkan tarikh sebelum 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Masukkan tarikh selepas 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Kuantiti (di antara 1 dan 5):
<input type="number" name="quantity" min="1" max="5">

Coba Sendiri

Properti multiple

Properti multiple adalah properti boolean.

Jika diatur, ia menentukan bahawa pengguna diizinkan untuk memasukkan lebih daripada satu nilai di dalam elemen <input>.

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

Contoh

Medan upload fail yang menerima beberapa nilai:

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

Coba Sendiri

Properti pattern

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

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

Petunjuk:Gunakan properti title secara global untuk mendeskripsikan model untuk membantu pengguna.

Petunjuk:Belajar lebih banyak tentang ekspresi reguler di dalam maklumat JavaScript kami.

Contoh

Medan input hanya boleh mengandungi tiga huruf (tanpa nombor atau simbol khas):

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

Coba Sendiri

Properti placeholder

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

Pemberitahuan ini akan dipaparkan di dalam medan input sebelum pengguna memasukkan nilai.

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

Contoh

Field input dengan teks placeholder:

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

Coba Sendiri

Atribut required

Atribut required adalah atribut boolean.

Jika diatur, maka diatur bahwa field input harus diisi sebelum mengirimkan formulir.

Atribut required berlaku untuk tipe input berikut: text, search, url, tel, email, password, pilih tanggal, number, checkbox, radio, dan file.

Contoh

Field input wajib diisi:

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

Coba Sendiri

Atribut step

Atribut step menentukan interval angka sah 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 serta week.

Contoh

Field input dengan interval angka yang konkrit dan sah:

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

Coba Sendiri