Pengenalan kepada 8 jenis input INPUT baharu dalam kemahiran tutorial HTML5_html5

Contoh kod HTML jenis input sedia ada:

Salin kod

Kod adalah seperti berikut:

Medan teks<input type="text">
Radio button<input type="radio">
Checkbox<input type="checkbox">
Drop-down list&lt ;pilih><opsyen>
Medan kata laluan<input type="password">
Butang serah<input type="submit">
Butang boleh klik<input type="button">
Butang imej<input type="image">
Hidden field<input type="hidden">
Reset button<input type="reset ">
File field<input type= "file">

Dalam HTML5, berbilang jenis input input borang baharu telah ditambahkan Dengan menggunakan elemen baharu ini, anda boleh Mendayakan kawalan dan pengesahan input yang lebih baik.
1. Permohonan jenis e-mel
Elemen input jenis e-mel ialah kotak input teks yang digunakan khas untuk memasukkan alamat e-mel, input e-mel akan disahkan secara automatik daripada kotak itu.

Salin kod

Kod adalah seperti berikut:

<input type=" email" name ="user_email" />

2. Aplikasi jenis url
Elemen input jenis url menyediakan kotak teks untuk memasukkan teks khas seperti alamat url.

Salin kod

Kod adalah seperti berikut:

<input type=" url" name ="user_url" />

3. Aplikasi jenis nombor
Elemen input jenis nombor menyediakan kotak teks untuk memasukkan nilai berangka.

Salin kod

Kod adalah seperti berikut:

<input type=" number" name ="number1" min="1" max="20" step="4" />

4. Aplikasi jenis julat
Elemen input jenis julat menyediakan kotak teks untuk memasukkan nilai berangka dalam julat tertentu, yang dipaparkan sebagai bar skrol pada halaman web .

Salin kod

Kod adalah seperti berikut:

<input type=" julat" name ="julat1" min="1" max="30" />

5. Tarikh daftar keluar aplikasi
Input jenis kod HTML Penerangan fungsi

Salin kod

Kod adalah seperti berikut:

tarikh <input type="date">

Pilih hari, bulan, tahun
bulan < input type="month">
Pilih bulan dan tahun

Salin kod

Kod adalah seperti berikut:

minggu <input type="week">

Pilih minggu dan tahun

Salin kod

Kod adalah seperti berikut:

masa <input type="time">

Pilih masa ( jam dan minit)

Salin kod

Kod adalah seperti berikut:

masa tarikh &lt ;input type="datetime">

Pilih masa, hari, bulan, tahun (waktu UTC)

Salin kod

Kod Seperti berikut:

datetime-local
<input type="datetime-local"> masa)

6. Aplikasi jenis carian

Elemen input jenis carian menyediakan kotak teks untuk memasukkan kata kunci carian.

Salin kod

Kod tersebut adalah seperti berikut:

<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}

7. Aplikasi jenis Tel
Elemen input jenis tel menyediakan kotak teks khusus untuk memasukkan nombor telefon.

Salin kod

Kod adalah seperti berikut:

<input type=" tel" name ="tel" />

8. Aplikasi jenis warna
Elemen input jenis warna menyediakan kotak teks yang digunakan khas untuk menetapkan warna.

Salin kod

Kod adalah seperti berikut:

<input type=" color" name ="color" />