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:
Langkah 1: Urutkan bidang dan ketik verifikasiPertama -tama, kita membutuhkan bidang -bidang berikut:
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.
Langkah 2: Tentukan gaya formulirKita juga perlu menentukan gaya terakhir formulir. Di sini saya menemukan gaya bentuk dribble sebagai gaya demo saat ini.
Langkah 3: Kode TemplateGunakan kode pernyataan HTML5 standar
<!Langkah 4: Buat formulir
Buat elemen format dasar.
<Form Action = OnsubMit = Return False> </form>Langkah 5: Buat elemen
Elemen tabel memiliki komposisi elemen berikut:
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:
Langkah 6: Tambahkan gayaLengkapi 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:
Langkah 7: Tambahkan prompt emojiDalam 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;