Gunakan formulir HTML5 dan CSS3 untuk memverifikasi fungsi

Verifikasi klien adalah salah satu fungsi yang paling umum digunakan dari program klien web. HTML5 telah memberi kami fungsi verifikasi bentuk. Adapun mengapa itu tidak populer, diperkirakan kompatibel, dan gayanya terlalu jelek.

Di bawah ini kami akan membuat verifikasi formulir HTML5 dan CSS3 langkah demi langkah, hanya menggunakan HTML dan CSS.

Berikut ini adalah sebagai berikut:

Pertama -tama, kita membutuhkan bidang -bidang berikut:

• Nama lengkap
• Nomor telepon (nomor telepon)
• Alamat email
• URL (situs web)

Setelah pengguna memasukkan beberapa informasi, kita perlu memeriksa apakah informasi pengguna benar untuk menghindari data kesalahan dan menipuan data ke server.

Dalam spesifikasi baru HTML5, kotak input input menyediakan berbagai jenis input seperti: tel, email, angka, rentang, warna, dll. Jenis -jenis ini umumnya tidak terlalu tercermin dalam klien desktop. Misalnya, nomor akan secara otomatis beralih ke nomor murni pada keyboard seluler, dan keyboard email akan secara otomatis beralih dengan@keyboard.

Kita juga perlu menentukan gaya terakhir formulir. Di sini saya menemukan gaya bentuk dribble sebagai gaya demo saat ini.

Gunakan kode pernyataan HTML5 standar

 <!

Buat elemen format dasar.

 <Form Action = OnsubMit = Return False> </form>

Elemen tabel memiliki komposisi elemen berikut:

• ul
• li
• label
• masukan
• menjangkau

Elemen UL dan LI digunakan untuk tata letak tipografi, yang digunakan untuk membagi elemen dan tata letak unit tabel. Label digunakan untuk teks prompt bidang formulir. Input digunakan untuk data input pengguna. SPAN digunakan untuk menggunakan emoji untuk menunjukkan apakah bidang pengguna diisi dengan benar.

 <ul> <li> <label for = name> nama lengkap </label> <input type = Text id = name name = name placeholder = silakan masukkan nama/> <span class = icon-name> </span> <spacer /span> </span> li> </ul>

Formulir Formulir Kode HTML Kode lengkap adalah sebagai berikut:

Lengkapi penulisan elemen bentuk, tingkatkan gayanya dengan erat, membuatnya terlihat lebih indah.

 Body {flex;} bentuk {padding: 0 10%; ; Warna: Posisi: Relatif; Absolute;

Kode CSS menyelesaikan kode sebagai berikut:

Dalam setiap struktur bentuk bentuk, kami telah menambahkan tag rentang, seperti kami menambahkan label <span class = icon-name> </span> di bidang nama. Sekarang tambahkan gaya ke keadaan bidang tes sekolah.

 Li Span {Block; Posity: Absolute;