HTML5 Form Properti

Properti HTML5 Form New

HTML5 <form> dan <input> tag menambahkan beberapa properti baru.

<Form> atribut baru:

• autocomplete
• novalidate

<Input> sifat New:

• autocomplete
• autofocus
• bentuk
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• tinggi dan lebar
• daftar
• min dan max
• kelipatan
• Pola (regexp)
• placeholder
• wajib
• langkah

<Form> / <input> atribut autocomplete

atribut autocomplete menentukan bentuk atau masukan bidang harus memiliki autocomplete.

Ketika pengguna mulai mengetik di bidang autocomplete, browser harus menampilkan pilihan untuk mengisi bidang ini.

Tip: autocomplete atribut mungkin elemen bentuk diaktifkan, dan dalam elemen input dimatikan.

Catatan: autocomplete berlaku <form> tag, dan jenis berikut <input> tag: teks, pencarian, url, telepon , email, password, datepickers, berbagai dan warna.

contoh

bentuk HTML di autocomplete terbuka (a autocomplete field input shutdown):

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

Coba »

Tip: Beberapa browser, Anda mungkin perlu mengaktifkan fitur AutoComplete, dalam rangka untuk mengambil properti.

<Form> properti novalidate

Properti boolean properti novalidate.

Atribut novalidate menentukan kapan mengirimkan formulir tidak harus memvalidasi form input atau domain.

contoh

Tanpa verifikasi pengiriman formulir Data

<Form action = "demo-form.php" novalidate> E-mail: <input ketik = "email" name = "user_email"> <input ketik = "submit"> </ Form>

Coba »

<Input> atribut autofocus

atribut autofocus adalah atribut boolean.

Atribut autofocus menentukan kapan beban halaman, domain secara otomatis menerima fokus.

contoh

Biarkan "Nama depan" field input masukkan auto fokus pada beban halaman:

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

Coba »

<Input> properti bentuk

atribut menentukan bentuk bidang masukan milik satu atau lebih bentuk.

Tip: Untuk mengutip lebih dari satu bentuk, menggunakan daftar dipisahkan dengan spasi.

contoh

Terletak dalam bentuk bentuk luar kolom input mengacu ke bentuk HTML (bentuk masih input berupa merupakan bagian dari):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

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

Coba »

<Input> properti formaction

Properti formaction digunakan untuk menggambarkan URL dari pengiriman formulir.

formaction atribut menimpa <form> elemen dalam atribut aksi.

Catatan: formaction The atribut type = "submit" dan type = "image".

contoh

HTMLform menyerahkan formulir berikut berisi tombol dua alamat yang berbeda:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

Coba »

<Input> properti formenctype

formenctype atribut menggambarkan formulir dikirimkan ke encoding server data (hanya untuk metode bentuk bentuk = "post" bentuk)

menimpa properti formenctype enctype atribut elemen form.

Main: Jenis Atribut ini = "submit" dan ketik = "image" digunakan bersama.

contoh

tombol submit pertama untuk mengirim data formulir dikodekan secara default, kedua tombol submit untuk "multipart / form-data" encoding format yang mengirim data formulir:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

Coba »

<Input> properti formmethod

atribut formmethod mendefinisikan pengiriman formulir cara.

properti formmethod meliputi <form> atribut metode elemen.

Catatan: Atribut ini dapat digunakan dengan type = "submit" dan ketik = "image" digunakan bersama.

contoh

Mendefinisikan kembali pengiriman formulir dengan cara misalnya:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

Coba »

<Input> properti formnovalidate

Properti novalidate adalah properti boolean.

atribut novalidate menggambarkan <input> elemen tidak perlu divalidasi ketika formulir dikirimkan.

atribut formnovalidate menimpa atribut novalidate <form> elemen.

Catatan: formnovalidate jenis atribut = "submit untuk digunakan dengan

contoh

Dua tombol menyerahkan formulir (tidak berlaku dengan verifikasi):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

Coba »

<Input> properti formtarget

Atribut formtarget menentukan nama atau kata kunci untuk menunjukkan data display diterima setelah formulir dikirimkan.

Menimpa properti formtarget <form> atribut target dari elemen.

Catatan: formtarget jenis atribut = "submit" dan ketik = "image" digunakan bersama.

contoh

Dua tombol menyerahkan formulir ditampilkan dalam jendela yang berbeda:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

Coba »

<Input> tinggi dan lebar atribut

atribut tinggi dan lebar yang ditentukan untuk jenis citra <input> tinggi tag gambar dan lebar.

Catatan: tinggi dan lebar properti hanya berlaku untuk jenis gambar <input> tag.

Tip: Gambar biasanya akan menentukan atribut tinggi dan lebar.Jika gambar mengatur tinggi dan lebar ruang yang dibutuhkan untuk gambar ketika halaman dimuat akan dipertahankan. Tanpa atribut ini, browser tidak tahu ukuran gambar, dan tidak dapat menyisihkan ruang yang sesuai. Foto selama proses loading akan mempengaruhi tata letak perubahan halaman (meskipun gambar telah dimuat).

contoh

Mendefinisikan gambar tombol submit, menggunakan atribut tinggi dan lebar:

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

Coba »

<Input> sifat daftar

Atribut daftar datalist menentukan field input. datalist adalah daftar pilihan untuk field input.

contoh

Telah ditetapkan di <datalist> di <input> value:

<input list="browsers">

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

Coba »

<Input> min dan max atribut

min, max, dan atribut langkah digunakan sebagai jenis masukan yang berisi angka atau tanggal Terbatas (kendala).

Catatan: min, max, dan langkah atribut berlaku untuk jenis berikut <input> tag: pemetik tanggal, jumlah dan jangkauan.

contoh

<Input> elemen minimum dan pengaturan maksimum:

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">

Coba »

<Input> beberapa properti

beberapa atribut adalah atribut boolean.

beberapa menspesifikasikan atribut <input> elemen untuk memilih beberapa nilai.

Catatan: beberapa properti berlaku untuk jenis berikut <input> tag: email dan berkas:

contoh

Upload beberapa file:

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

Coba »

<Input> properti pola

Atribut pola menggambarkan ekspresi reguler digunakan untuk memvalidasi nilai <input> elemen.

Catatan: Atribut polaberlaku untuk jenis berikut <input> tag: teks, pencarian, url, tel , email, dan password.

Tip: Hal ini digunakan untuk global judul atribut menggambarkan mode.

Tip: Anda dapat di kami tutorial JavaScript untuk belajar tentang isi dari ekspresi reguler

contoh

Contoh berikut menunjukkan tiga huruf hanya berisi text field (tidak ada angka atau karakter khusus):

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

Coba »

<Input> atribut placeholder

atribut placeholder memberikan petunjuk (petunjuk), menggambarkan nilai yang diharapkan dari field input.

Sebuah pengingat singkat akan ditampilkan pada kolom input sebelum nilai input pengguna.

Catatan: Atribut placeholderberlaku untuk jenis berikut <input> tag: teks, pencarian, url, telepon , email dan password.

contoh

field input t teks prompt:

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

Coba »

<Input> Atribut diperlukan

Atribut yang dibutuhkan adalah atribut boolean.

Atribut wajib menetapkan bahwa sebuah field input harus diisi (tidak kosong) sebelum mengirimkan.

Catatan: atribut yang diperlukanuntuk jenis berikut <input> tag: teks, pencarian, url, telepon , email, password, pemetik tanggal, nomor, checkbox, radio dan berkas.

contoh

Tidak bisa field input kosong:

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

Coba »

<Input> atribut langkah

Langkah atribut untuk kolom input menentukan interval nomor hukum.

Jika langkah = "3", nomor hukum bisa -3,0,3,6, dll

Tip: Langkah atribut dapat menciptakan nilai max regional dan min atribut.

Catatan: Langkah atribut jenis yang digunakan dalam hubungannya dengan jenis berikut: jumlah, rentang, tanggal, datetime , datetime-lokal, bulan, waktu dan minggu.

contoh

Yang telah ditentukan masukan langkah langkah 3:

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

Coba »

HTML5 <input> tag