Terdapat 8 jenis input biasa dalam bentuk HTML, yang sesuai untuk keperluan input data yang berbeza. 1. Teks digunakan untuk input teks asas; 2. Kata laluan digunakan untuk menyembunyikan input kata laluan yang dipaparkan; 3. E -mel digunakan untuk memasukkan alamat e -mel secara khusus; 4. Nombor digunakan untuk input digital dan menyokong pelarasan nilai berangka; 5. Kotak semak digunakan untuk kotak semak pelbagai pilihan; 6. Radio digunakan untuk kumpulan butang pemilihan radio; 7. Tarikh menyediakan fungsi pemilihan tarikh; 8. Sambungan digunakan untuk mengemukakan data borang. Setiap jenis mempunyai penggunaan khusus dan ciri sokongan penyemak imbas tersendiri. Penggunaan tetap dapat meningkatkan pengalaman pengguna dan kecekapan pemprosesan data.

Terdapat banyak jenis input dalam bentuk HTML, setiap jenis sesuai untuk keperluan input data yang berbeza. Menggunakan jenis input yang betul bukan sahaja dapat meningkatkan pengalaman pengguna, tetapi juga membantu penyemak imbas yang lebih baik memproses kandungan input, seperti secara automatik muncul papan kekunci yang sesuai (seperti papan kekunci angka, papan kekunci peti mel, dll.). Berikut adalah beberapa jenis input biasa dan kegunaan mereka.

1. text : input teks asas

Ini adalah jenis input yang paling asas dan biasa, yang membolehkan pengguna memasukkan sekeping teks biasa, seperti nama, tajuk, dll.

 <input type = "text" name = "nama pengguna" placeholder = "Sila masukkan nama pengguna">

• Lebar lalai adalah 20 aksara, tetapi ia boleh diselaraskan melalui CSS.
• Tiada sekatan pemformatan pada kandungan input, dan pengguna boleh memasukkan sebarang aksara.
• Ia sering digunakan untuk input teks pendek, dan disyorkan untuk menggunakan <textarea> untuk teks panjang.

2. password : Kotak Input Kata Laluan

Kotak input jenis ini memaparkan input pengguna sebagai asterisk atau titik untuk melindungi privasi.

 <input jenis = "kata laluan" name = "kata laluan" placeholder = "Sila masukkan kata laluan anda">

• Kandungan input tidak akan dipaparkan secara eksplisit.
• Ia biasanya digunakan dengan kotak input kedua yang mengesahkan kata laluan.
• Nota: Walaupun antara muka menyembunyikan kandungan, ia masih dihantar teks biasa apabila menyerahkan, dan memerlukan https dan penyulitan backend.

3. email : Input Alamat E -mel

Jenis ini digunakan secara khusus untuk mengumpul alamat e -mel pengguna, dan penyemak imbas akan melakukan pengesahan format mudah.

 <input type = "email" name = "email" placeholder = "your@email.com">

• Penyemak imbas memeriksa sama ada simbol @ dan format asas dimasukkan.
• Papan kekunci dengan @ kekunci akan secara automatik muncul pada peranti mudah alih.
• Anda boleh menetapkan banyak alamat e -mel untuk dimasukkan:

 <input type = "e -mel" multiple>

4. number : input digital

Membolehkan pengguna memasukkan nilai angka, dan menyokong anak panah ke atas dan ke bawah untuk menyesuaikan saiz nilai angka.

 <input type = "Number" name = "Age" Min = "0" Max = "120" Step = "1">

• Nilai minimum (min), nilai maksimum (max) dan langkah (langkah) boleh ditetapkan.
• Dalam pelayar yang tidak menyokong jenis ini, ia kembali kepada text .
• Nota: Input masih rentetan dan perlu ditukar kepada nilai angka.

5. checkbox : kotak semak

Digunakan untuk membiarkan pengguna memilih satu atau lebih pilihan.

 <label> <input type = "checkbox" name = "Interts" value = "Sports"> Sports </label>
<label> <input type = "checkbox" name = "Interts" value = "Music"> Music </label>

• Setiap kotak semak wujud secara bebas dan boleh dipilih pada masa yang sama.
• Apabila menyerahkan, hanya item terpilih dihantar ke pelayan.
• Biasanya digunakan dengan <label> untuk meningkatkan kawasan klik dan kebolehgunaan.

6. radio : Butang Radio

Digunakan untuk membiarkan pengguna memilih hanya satu daripada pelbagai pilihan.

 <label> <input type = "radio" name = "gender" value = "lelaki"> lelaki </label>
<label> <input type = "radio" name = "gender" value = "female"> female </label>

• Atribut name set radio yang sama mestilah sama untuk mencapai pengecualian bersama.
• Pengguna hanya boleh memilih salah satu daripada mereka.
• Sekiranya tiada pemilihan lalai, anda mungkin perlu menetapkan keadaan awal melalui JavaScript.

7. date : Pemilih Tarikh

Membolehkan pengguna memilih tarikh (tahun, bulan, hari).

 <input type = "date" name = "BirthDate">

• Kawalan pemilihan tarikh dipaparkan dalam penyemak imbas yang menyokong HTML5.
• Format input ialah YYYY-MM-DD .
• Jika penyemak imbas tidak menyokongnya, ia akan muncul sebagai kotak input teks biasa.

Jenis lain yang berkaitan termasuk:

• time : Pilih Masa
• datetime-local : Pilih Tarikh dan Masa (tidak termasuk zon waktu)
• month : Pilihan Tahun dan Bulan
• week : Nombor tahun dan minggu yang dipilih

8. submit : Hantar butang

Digunakan untuk mencetuskan Operasi Penyerahan Borang.

 <input type = "hantar" value = "hantar">

• Selepas mengklik, data borang akan dihantar ke pelayan.
• Teks pada butang boleh disesuaikan.
• Anda juga boleh menggunakan <button type="submit">提交</button> untuk mencapai kawalan gaya yang lebih kaya.

Di samping itu, terdapat jenis lain seperti file (muat naik fail), color (pemilih warna), range (slider), hidden (medan tersembunyi), dan lain -lain. Memilih jenis input yang sesuai mengikut keperluan sebenar boleh membuat bentuk lebih mudah digunakan, lebih selamat, dan lebih mudah untuk mengekalkan.

Pada dasarnya jenis biasa ini ada. Selepas mengenali mereka, anda boleh fleksibel berurusan dengan pelbagai senario reka bentuk bentuk.

Atas ialah kandungan terperinci Apakah jenis input yang berbeza dalam bentuk HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!