HTML5 memperkenalkan jenis input baru yang meningkatkan fungsi dan pengalaman pengguna dengan meningkatkan susun atur papan kekunci, UI, dan mudah alih. 1. E -mel mengesahkan alamat e -mel dan menyokong pelbagai penyertaan. 2. Pemeriksaan URL untuk alamat web yang sah dan mencetuskan papan kekunci yang dioptimumkan URL. 3. Bilangan membolehkan input angka dengan kawalan kenaikan/pengurangan dan sekatan julat. 4. Julat menyediakan gelangsar untuk memilih nilai dalam julat yang ditetapkan. 5. Tarikh, masa, dan jenis yang berkaitan menawarkan pemetik terbina dalam untuk kemasukan tarikh dan masa yang lebih mudah. 6. Carian meningkatkan medan carian dengan ciri-ciri seperti Auto-Complete. Input ini menyelaraskan perkembangan dan meningkatkan kebolehgunaan sementara merendahkan dengan anggun di pelayar yang lebih tua, menjadikannya berharga apabila dipasangkan dengan pengesahan sisi pelayan.

HTML5 memperkenalkan beberapa jenis input baru yang meningkatkan fungsi dan pengalaman pengguna borang web. Jenis input ini memberikan pengesahan yang lebih baik, antara muka pengguna yang lebih baik pada penyemak imbas yang menyokong, dan susun atur papan kekunci yang lebih sesuai pada peranti mudah alih.

1. email - untuk input alamat e -mel

Jenis input email digunakan apabila anda mahu pengguna memasukkan alamat e -mel. Pelayar yang menyokong jenis input ini secara automatik mengesahkan bahawa teks yang dimasukkan sepadan dengan format e -mel asas (misalnya, user@example.com).

Contoh:

 <input type = "email" name = "user_email" placeholder = "you@example.com">

• Anda boleh menggunakan atribut multiple untuk membolehkan pelbagai alamat e -mel dipisahkan oleh koma.
• Ia amat berguna dalam borang pendaftaran atau kenalan di mana alamat e-mel yang sah diperlukan.

2. url - untuk input alamat web

Jenis input url menjangkakan URL yang sah dari pengguna. Penyemak imbas memeriksa sama ada nilai bermula dengan protokol yang sah seperti http: // atau https: //.

Contoh:

 <input type = "url" name = "laman web" placeholder = "https://example.com">

• Pada peranti mudah alih, ini sering mencetuskan papan kekunci yang dioptimumkan untuk memasukkan URL.
• Pastikan untuk mengendalikan sisi pelayan pengesahan tambahan kerana penyemak imbas hanya melakukan pemeriksaan asas.

3. number - untuk input angka

Gunakan number apabila anda mahu pengguna memasukkan nombor. Jenis input ini membolehkan anak panah atas/bawah untuk meningkatkan dan menurunkan nilai dan menyekat input kepada nombor pada banyak peranti.

Contoh:

 <input type = "Number" name = "Quantity" min = "1" max = "10" step = "1">

Anda boleh mengawal tingkah laku menggunakan atribut:

• had set min dan max
• step mentakrifkan berapa banyak nilai meningkat atau berkurangan

4. range - untuk input gelangsar

Input range membolehkan pengguna memilih nilai dari julat menggunakan gelangsar. Ia bagus untuk tetapan seperti kelantangan, kecerahan, atau penilaian.

Contoh:

 <input type = "julat" name = "volume" min = "0" max = "100" step = "5">

• Pengguna tidak selalu tahu nilai sebenar yang mereka pilih, jadi ia lebih baik digunakan apabila ketepatan tidak kritikal.
• Sepasangnya dengan penunjuk visual atau label jika menunjukkan nilai semasa adalah penting.

5. date , time , datetime-local , month , dan week -Untuk Input Tarikh dan Masa

Input ini memudahkan entri tarikh dan masa dengan menawarkan pemetik terbina dalam:

• date : Pilih Tarikh Penuh (YYYY-MM-DD)
• time : Pilih Masa (HH: MM)
• datetime-local : Menggabungkan tarikh dan masa tanpa zon waktu
• month : Memilih sebulan dan tahun
• week : Memilih seminggu dan tahun

Contoh:

 <input type = "date" name = "Birthday">
<input type = "time" name = "Meeting_Time">

• Sokongan penyemak imbas berbeza -beza, jadi sentiasa menguji di seluruh platform.
• Input ini menjadikan kemasukan data lebih mudah dan mengurangkan kesilapan pemformatan.

6. search - untuk input medan carian

Direka khusus untuk kotak carian, search bertindak sama dengan text tetapi boleh digayakan secara berbeza atau menawarkan ciri-ciri seperti auto-lengkap dan butang yang jelas pada beberapa pelayar.

Contoh:

 <input type = "carian" name = "query" placeholder = "carian ...">

• Ia meningkatkan kebolehgunaan dalam bentuk carian dengan memanfaatkan peningkatan UI asli.
• Bekerja dengan baik di bar navigasi tapak dan bar alat aplikasi.

Jenis input ini membantu pemaju membina lebih pintar, bentuk yang lebih intuitif dengan kurang JavaScript. Walaupun tidak semua penyemak imbas menyokong setiap jenis sama, menggunakannya dengan anggun merendahkan text dalam persekitaran yang lebih tua. Jadi, pada dasarnya, mereka bernilai menggunakan hari ini-hanya menyokong mereka dengan pengesahan sisi pelayan.

Atas ialah kandungan terperinci Apakah jenis input baru yang terdapat dalam borang HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!