Susun secara menyeluruh elemen yang berkaitan dengan bentuk bentuk!

Borang asal HTML dan kawalan borang

elemen bentuk

Anda boleh menyematkan kandungan teras seperti id, kelas, gaya, dsb., dan juga menentukan atribut acara seperti onclick.

Selain itu, ia juga termasuk tindakan (menentukan alamat ke mana borang melompat apabila butang disahkan dalam jadual berdiri sendiri), kaedah (menentukan jenis permintaan yang dihantar semasa menyerahkan borang, nilai boleh get atau post ), enctype (nyatakan set aksara yang digunakan untuk mengekod kandungan ekspresi), nama (nyatakan nama unik borang), sasaran (nyatakan kaedah mana yang boleh digunakan untuk membuka URL sasaran). [Disyorkan: Tutorial video HTML]

elemen input

berikut dihasilkan oleh beberapa elemen input:

Kotak input kata laluan:

<input id="password" name="password" style="password" />

Medan tersembunyi:

<input id="hidden" name="hidden" style="hidden" />

Butang radio

<input id="radio" name="radio" style="radio" />

Kotak semak

<input id="checkbox" name="checkbox" style="checkbox" />

Medan imej

<input id="image" name="image" style="image" />

Medan muat naik fail

<input id="file" name="file" style="file" />

Butang serah

<input id="submit" name="submit" style="submit" />

Semula Biarkan beberapa atribut fokus daripada butang

<input id="reset" name="reset" style="reset	" />

tiada butang tindakan

<input id="button" name="buton" style="button" />

ditandakan : Tetapkan sama ada butang radio dan kotak semak dipilih pada mulanya .

dilumpuhkan: Gunakan elemen ini apabila menetapkan beban pertama.
maxlength: Atribut ini ialah nombor yang menentukan nombor maksimum yang dibenarkan untuk dimasukkan dalam kotak teks.
baca sahaja: Nilai dalam kotak teks yang ditentukan tidak dibenarkan untuk diubah suai oleh pengguna (boleh diubah suai menggunakan skrip js). Atribut ini ialah atribut yang menyokong nilai boolean
, yang menunjukkan bahawa nilai elemen ini ialah baca sahaja. saiz: Nilai atribut ini ialah nombor yang menentukan lebar unsur kalsium.
src: Menentukan URL imej yang dipaparkan dalam medan imej
lebar: Menentukan lebar imej yang dipaparkan dalam medan imej.
heigeht: Menentukan ketinggian imej yang dipaparkan dalam medan imej.
elemen label Elemen label boleh menentukan atribut teras seperti id, kelas, gaya, dll., dan juga boleh menentukan atribut acara seperti onclick. Selain itu, anda juga boleh menentukan atribut untuk, yang menentukan kawalan borang yang dikaitkan dengan label. Penggunaannya adalah untuk="", dan id kawalan yang berkaitan adalah dalam tanda petikan. Butang

elemen butang

Anda boleh menentukan keakraban teras seperti id, kelas, gaya, dsb., dan anda juga boleh menentukan atribut acara seperti onclick. Di samping itu, anda juga boleh menentukan elemen berikut.

dilumpuhkan

: Menentukan sama ada untuk melumpuhkan butang ini.

nama: Tentukan nama unik untuk butang Nama atribut harus konsisten dengan id.
jenis: Menentukan jenis butang yang dimiliki butang ini Nilai atribut hanya boleh menjadi salah satu butang, tetapkan semula atau serahkan.
nilai: Tentukan nilai awal butang. Boleh diubah melalui skrip js.
elemen pilih dan pilihan elemen digunakan untuk membuat kotak senarai atau menu lungsur turun Elemen kalsium mesti digabungkan dengan

Elemen boleh menentukan atribut teras seperti id, kelas, gaya, dll. Elemen ini boleh menentukan atribut acara onchange - apabila pilihan yang dipilih dalam kotak senarai atau item senarai lungsur turun , onchange dicetuskan.

Selain itu, elemen juga boleh menentukan atribut berikut.

dilumpuhkan

: Tetapkan untuk melumpuhkan kotak senarai dan menu lungsur. Nilai atribut ini hanya boleh dilumpuhkan atau hilangkan nilai atribut.

berbilang: Tetapkan sama ada kotak senarai dan menu lungsur membenarkan berbilang pilihan. Setelah ditetapkan untuk membenarkan berbilang pilihan, elemen akan menjana kotak senarai secara automatik.
saiz: Tentukan bilangan item senarai yang boleh dilaksanakan oleh kotak senarai dan menu lungsur pada masa yang sama. Setelah ditetapkan untuk membenarkan berbilang pilihan, elemen akan menjana kotak senarai secara automatik.
Dalam elemen, hanya dua sub-elemen berikut boleh disertakan.

: digunakan untuk mentakrif item senarai atau item menu. Elemen ini hanya boleh mengandungi kandungan teks sebagai teks untuk pilihan ini.

: digunakan untuk menentukan item senarai atau kumpulan baris menu. Elemen ini hanya boleh mengandungi Elemen
boleh menentukan elemen teras seperti id, kelas, gaya, dll. Ia juga boleh menentukan atribut acara seperti onclick. Selain itu, anda juga boleh menentukan elemen berikut.

dilumpuhkan

: Menentukan untuk melumpuhkan pilihan ini Nilai atribut ini hanya boleh dilumpuhkan.

dipilih: Menentukan sama ada keadaan awal kotak aliran dipilih. Nilai atribut ini hanya boleh dipilih.
nilai: Tentukan nilai parameter permintaan yang sepadan dengan pilihan ini. Elemen
boleh menentukan atribut teras seperti id, kelas, gaya, dll. Ia juga boleh menentukan atribut respons acara seperti onclick. Di samping itu, terdapat ciri-ciri berikut.

label: Tentukan label kumpulan pilihan ini. Atribut ini diperlukan.
dilumpuhkan: Tetapkan untuk melumpuhkan semua pilihan dalam kumpulan pilihan ini. Nilai atribut hanya boleh dilumpuhkan atau ditinggalkan.

Kawasan teks dipertingkatkan HTML5

Anda boleh menentukan elemen teras seperti id, kelas, gaya, dsb., dan anda juga boleh menentukan atribut acara seperti onclick. Disebabkan kekhususan kawasan teks, ia boleh menerima input pengguna, dan pengguna boleh memilih teks dalam kawasan teks, jadi anda juga boleh menentukan dua atribut, pada pilihan dan perubahan, yang digunakan pada masa apabila kawasan teks dipilih dan apabila teks diubah suai. Di samping itu, elemen ini juga boleh menentukan elemen berikut.

cols: Menentukan lebar medan teks dan diperlukan.
baris: Menentukan ketinggian teks, yang diperlukan.
dilumpuhkan: Menentukan bahawa medan teks dilumpuhkan. Nilai atribut hanya boleh dilumpuhkan.
baca sahaja: Menentukan bahawa medan teks adalah baca sahaja. Nilai atribut ini hanya boleh dibaca sahaja.
panjang maksimum: Tetapkan bilangan maksimum aksara yang boleh dimasukkan dalam medan teks berbilang baris ini.
balut: Menentukan sama ada hendak menambah pemisah baris pada medan teks berbilang baris. Atribut ini menyokong dua nilai atribut: lembut dan keras. Jika nilai atribut ditetapkan kepada keras, atribut cols mesti ditentukan Jika aksara input melebihi lebar yang ditentukan oleh cols dan menyebabkan teks dibalut, medan teks berbilang baris akan menambah aksara baris baharu secara automatik apabila baris baharu. borang diserahkan.

elemen set medan dan legenda

boleh digunakan untuk mengumpulkan elemen bentuk dalam borang. , elemen ini boleh menentukan elemen teras seperti id, kelas, gaya, dsb., dan juga boleh menentukan tiga atribut berikut.

nama: Menentukan nama
bentuk: Nilai atribut atribut ini mestilah id dengan elemen yang digunakan untuk menentukan bahawa elemen borang tersebut.
dilumpuhkan: Atribut ini digunakan untuk melumpuhkan elemen borang. Sifat ini ialah sifat yang menyokong nilai boolean.

Atribut borang baharu HTML

Atribut borang borang

html5 telah menambah atribut borang untuk semua kawalan borang, jadi ia lebih fleksibel apabila mentakrifkan kawalan borang pada halaman , anda boleh menghalang dan mengatur kawalan borang sesuka hati, yang memberikan fleksibiliti yang lebih besar dalam reka letak halaman.

Atribut Formaction

HTML5 menangani masalah bahawa borang yang sama mengandungi kedua-dua butang pendaftaran dan log masuk boleh ditentukan untuk sumit, set semula dan imej ini boleh menukar borang secara dinamik ke URL yang berbeza.

atribut formxxxx

Atribut formxxxx adalah serupa dengan atribut formasi Untuk summit, set semula dan imej, anda boleh menentukan formenctype, formmethod, formtarget dan atribut lain, antaranya:

formenctype : Atribut ini membenarkan butang bertukar secara dinamik kepada atribut enctype.
kaedah bentuk: Atribut ini membenarkan butang bertukar secara dinamik kepada atribut kaedah.
formtarget: Atribut ini membenarkan butang menjadi atribut sasaran secara dinamik.

atribut autofokus

Ini ialah atribut yang sangat biasa digunakan. Fungsinya adalah untuk memfokus secara automatik pada kedudukan yang sepadan semasa membuka halaman web. Penggunaannya adalah untuk menambahkannya pada kod yang sepadan, seperti: <input type="password" name="name" autofocus />Fungsi autofokus dalam kod ini adalah untuk memfokus secara automatik pada kotak kata laluan apabila membuka halaman web.

Atribut pemegang tempat

Atribut ini juga sangat biasa digunakan. Fungsinya adalah untuk memberikan gesaan yang sepadan dalam kotak teks tempat pengguna memasukkan data, seperti: <input type="text" name="username" palceholder="请输入用户名" />；Fungsi pemegang tempat dalam. kod ini ialah Apabila pengguna tidak memasukkan data dalam kotak teks, sila masukkan nama pengguna, menjadikan halaman lebih mesra pengguna.

atribut senarai

Atribut ini juga sangat praktikal Sebelum spesifikasi html5, tiada komponen yang serupa dengan ComboBox dalam atribut bentuk html. Atribut senarai html5 hanya menggantikan kekurangan ini Nilai atribut senarai hendaklah merupakan ID komponen .../> Elemen

adalah bersamaan dengan elemen boleh mengandungi elemen anak yang sama seperti elemen Elemen ini digunakan bersama-sama dengan elemen Apabila kotak teks atribut senarai diklik dua kali, menu lungsur yang dijana oleh

atribut autolengkap

Pilihan ini digunakan untuk mengawal sama ada untuk memaparkan sejarah pengisian sebelumnya secara automatik apabila mengklik pada kotak teks Penyemak imbas mendayakan fungsi ini secara lalai.

dihidupkan: Hidupkan autolengkap dan menu lungsur turun akan dipaparkan di bawah kotak teks.
mati: Matikan autolengkap dan menu lungsur turun tidak akan dipaparkan di bawah kotak teks.

Atribut kawalan label

html5 menyediakan atribut kawalan untuk elemen yang digunakan untuk mengakses kandungan ; elemen dalam skrip javascript Elemen borang.

Atribut label dalam bentuk

Terdapat perkaitan satu-ke-banyak antara elemen bentuk dan elemen dan ; Elemen memperoleh perkaitannya Elemen bentuk menggunakan atribut kawalan, dan elemen borang memperoleh elemen

Atribut selectionDirection dalam kotak teks

html5 menambah atribut baca sahaja selectionDirection baharu untuk kotak teks satu baris dan medan teks berbilang baris, yang digunakan untuk mengembalikan arah teks dalam kotak teks.

• Apabila pengguna memilih teks dalam arah hadapan, nilai pulangan adalah ke hadapan
• Apabila pengguna memilih teks dalam arah songsang, nilai pulangan adalah ke belakang
• Apabila pengguna tidak memilih teks, nilai pulangan adalah ke hadapan Nilai ialah pilihan terakhir yang dibuat oleh pengguna

Elemen bentuk baharu HTML5

Elemen input kaya dengan fungsi

HTML5 ialah elemen Jenis baharu berikut telah ditambah.

warna: Hasilkan pemilih warna, nilai nilai ialah nilai warna dalam bentuk #xxxxxx.
tarikh: Jana pemilih tarikh.
masa: Jana pemilih masa.
datetime-local: Jana pemilih tarikh dan masa setempat.
minggu: Menjana kotak teks untuk pengguna memilih minggu.
bulan: Life Guess ialah pemilih bulan.
maks: Nilai maksimum tarikh dan masa yang ditentukan.
langkah: Tentukan saiz langkah tarikh dan masa.
e-mel: Hasilkan kotak input E-mel, dan penyemak imbas akan menyemak secara automatik sama ada E-mel yang dimasukkan mematuhi format.

berbilang: Atribut ini menyokong jenis boolean Jika nilai atribut ini ditentukan, ini bermakna berbilang alamat e-mel dibenarkan untuk dimasukkan, dipisahkan dengan koma bahasa Inggeris.

tel: Menghasilkan kotak teks untuk memasukkan nombor telefon.
ur: Menghasilkan kotak teks untuk memasukkan URL Penyemak imbas akan menyemak secara automatik sama ada URL yang dimasukkan mematuhi format.
nombor: Jana kotak teks yang hanya boleh memasukkan nombor.

min: Nilai minimum bagi nilai yang ditentukan.
maks: Nilai maksimum bagi nilai yang ditentukan.
langkah: Tentukan saiz langkah nombor.

julat: Menghasilkan bar seret dengan atribut berikut:

min: Nilai minimum bar seret.
maks: Nilai maksimum bar seret.
langkah: Tentukan saiz langkah bar seret.

carian: Hasilkan kotak teks khusus untuk memasukkan kata kunci carian.

elemen output

HTML5 menambah kawalan borang baharu, yang digunakan untuk memaparkan output. Selain menentukan atribut teras seperti id, kelas dan gaya, elemen ini juga boleh menentukan atribut berikut.

untuk: Atribut ini akan memaparkan nilai elemen itu atau elemen tersebut apabila membrek elemen.

elemen meter

HTML5 juga menambahkan elemen baharu, yang mewakili meter pengiraan dengan nilai maksimum dan minimum yang diketahui. Selain mentakrifkan ciri teras seperti id, kelas, gaya, dll., elemen ini juga boleh mentakrifkan atribut berikut.

nilai: Tentukan nilai semasa meter pengiraan. Lalai ialah 0.
min: Menentukan nilai minimum alat pengiraan, lalai ialah 0.
maks: Menentukan nilai maksimum alat pengiraan. Lalai ialah 1.
rendah: menentukan nilai minimum julat instrumen pengiraan yang ditentukan, yang mesti lebih besar daripada atau sama dengan nilai min.
tinggi: Menentukan nilai maksimum julat instrumen pengiraan yang ditentukan, yang mesti kurang daripada atau sama dengan nilai maks.
optimum: Tentukan nilai optimum julat berkesan instrumen pengiraan. Unsur

kemajuan

digunakan untuk mewakili bar kemajuan. Selain menentukan atribut teras seperti id, kelas dan gaya, elemen ini juga boleh menentukan atribut berikut.
maks: Menentukan nilai apabila bar kemajuan selesai.
nilai: Menentukan nilai kemajuan semasa yang lengkap.

Pengesahan sisi klien baharu HTML5

Gunakan atribut pengesahan untuk melaksanakan pengesahan

HTML5 menambah atribut pengesahan berikut pada kawalan borang.

diperlukan: Atribut ini menentukan bahawa kawalan borang mesti diisi.
corak: Atribut ini menentukan bahawa nilai kawalan borang mesti mematuhi ungkapan biasa yang ditentukan.
min, maks, langkah: Tiga atribut ini hanya sah untuk elemen jenis berangka dan tarikh panjang langkah langkah.

Panggil kaedah checkValidity untuk pengesahan

• Jika borang kembali benar dengan memanggil kaedah checkValidity(), ini bermakna input semua elemen borang dalam borang adalah sah

• Jika objek borang memanggil kaedah checkValidity() dan mengembalikan benar, ini bermakna semua elemen bentuk ungkapan melepasi pengesahan input.

Matikan pengesahan

• Tambahkan atribut novalidate pada elemen

• Tetapkan atribut formnovalidate untuk elemen hantar dan butang Apabila pengguna menyerahkan borang melalui butang hantar, borang akan mematikan fungsi pengesahan.

Atas ialah kandungan terperinci Susun secara menyeluruh elemen yang berkaitan dengan bentuk bentuk!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!