PENDAHULUAN DAN CONTOH Fitur Baru dari Formulir HTML5

1. Pendahuluan

Faktanya, karakteristik bentuk HTML5 diperkenalkan dalam fitur Pasal 28 HTML5, tips dan teknik yang harus Anda ketahui tahun lalu. Namun, agak disesalkan bahwa pengenalan bagian ini ditampilkan dalam bentuk video. Bahkan, tidak apa -apa jika itu adalah video. Kuncinya adalah video toutube, yang perlu ditonton jailbreak. Nah, warga negara yang baik seperti saya yang hanya orang yang teliti terlalu malas untuk dibodohi dalam situasi lain kecuali untuk pramugari, sehingga konten yang ditampilkan di bagian video ini sebenarnya kosong.

Jadi, inilah tambalan untuk meningkatkan bagian konten ini. Konten umum artikel ini adalah:

# <input type = number />

# <input type = range />

# <Input Type = Date /> dan Kontrol Pemilih Waktu Lainnya

# <Input Type = Color /> Color Selector

# <input type = Search />

# <Datalist> elemen dan daftar atribut

# Hubungan ambigu antara verifikasi bentuk html5 dan css3

2. Fitur baru dari formulir HTML5

Elemen Formulir HTML dengan Type = Number memungkinkan Anda untuk mengubah nilai di kotak teks dengan menekan tombol. Efek ini sering terlihat dalam sistem Windows, seperti:

Orang malas lebih suka berbaring di kursi dan mengklik mouse daripada duduk dan menekan keyboard. Oleh karena itu, dibandingkan dengan input keyboard, ada juga pasar untuk mengklik dan input. Inilah sebabnya mengapa ada kontrol seleksi numerik dalam bentuk HTML5.

Kode HTML kasar adalah sebagai berikut:

 Jumlah orang: <input tipe = nilai angka = 1 />

Jika Anda menambahkan batas lebar yang sesuai untuk titik -titik, efek dalam chrome (perkiraan UI terkait dengan tema sistem) adalah sebagai berikut:

Browser yang saat ini didukung adalah Opera 11, tetapi tombol yang menambah dan mengurangi nilai di bawah opera terlihat agak bengkok dan memiliki gaya abstrak.

Anda dapat mengklik di sini keras: html5 Form Demo Kontrol Nubmer

Range Chinese Meaning Value Range, dan efek semacam ini juga umum di sistem jendela, seperti yang ditunjukkan pada tangkapan layar berikut:

Ada kontrol input dengan efek yang sama di HTML5. Tentukan saja jenisnya sebagai kisaran, sangat mudah!

 Seret Range: <input type = range value = 50 />

Secara default, kisaran nilai adalah 0 ~ 100, jadi jika nilai = 50, bilah drag berada di tengah kisaran area. Seperti yang ditunjukkan pada gambar di bawah ini:

Firefox saya saat ini versi 3.6 dan fitur ini belum didukung. Namun, Chrome, Opera, dan Safari 4 semuanya memiliki efek, tetapi mereka bukan ayah yang sama, jadi ada beberapa perbedaan dalam penampilan, sehingga perbedaan ini tidak akan ditampilkan di sini.

Anda dapat mengklik di sini keras: demo kontrol rentang bentuk html5

Item terakhir dari 28 fitur HTML5, trik dan teknik yang disebutkan di awal, yaitu, contoh efek luar biasa dari item ke -28 adalah efek yang diimplementasikan pada kontrol rentang, yang juga melibatkan atribut Min, Max, dan atribut langkah. Ini adalah contoh yang layak untuk diamati dan dipelajari. Mengenai demo contoh ini, Anda dapat mengklik di sini dengan kasar.

Ini adalah kontrol waktu pemilih. Jika Anda memilih waktu yang lama, jangan repot-repot dengan plug-in JS. Hanya memiliki atribut kencan, dan kemudian Anda dapat berkomunikasi dengan wanita tua yang menyapu lantai di sebelah Anda saat kopi. Jika Anda tidak percaya, lihat:

 Pilih Tanggal: <Input Jenis = Nilai Tanggal = 2011-01-04 />

Akibatnya, di bawah browser yang didukung, seperti opera, efek berikut tersedia:

Ini adalah pemilih waktu yang tidak hidup!

Terlepas dari penampilannya yang buruk, yang lain cukup menyenangkan.

Ruang kelas waktu, tidak hanya jenis tanggal, tetapi juga jenis waktu, tetapi juga datetime, minggu, dan bulan.

Jelas, seperti namanya, jenis tanggal adalah untuk memilih tanggal, jenis waktu untuk memilih waktu, datetime adalah untuk memilih tanggal dan waktu, dan minggu untuk memilih minggu, dan bulan menyadari untuk memilih bulan.

Anda dapat mengklik di sini keras: html5 bentuk waktu kelas ruang waktu ruang

Saya mengujinya dan baru saja meningkatkan Safari ke versi 5.0. Saya menemukan bahwa saat ini, Browser Opera mendukung jenis kontrol waktu ini. Efeknya adalah sebagai berikut:

Ketika tipe = waktu, efeknya agak mirip dengan tipe = angka. Anda dapat beralih acara dengan mengklik. Secara default, setiap titik sekali, waktu diaktifkan selama 1 menit, dan mouse sudah lama ditekan dan mouse juga valid.

 Pilih Waktu: <Input Jenis = Nilai Waktu = 22: 52 />

Pilih Waktu:

Di bawah tipe = minggu, ketika mouse lewat, warna latar belakang tanggal setiap baris (mewakili satu minggu) akan menjadi lebih gelap secara kolektif, seperti yang ditunjukkan pada gambar di bawah ini:

Ketika tipe = bulan, warna latar belakang seluruh bulan menjadi lebih gelap, seperti yang ditunjukkan pada gambar di bawah ini:

Nilai data setelah memilih keduanya adalah sebagai berikut:

Ini adalah kontrol pemilih warna, yang cukup kuat. Ini sangat mudah digunakan, sebagai berikut:

 Pilih Warna: <Input Tipe = Nilai Warna =#34538b />

Efek default di browser opera adalah sebagai berikut:

Kontrol input default memiliki latar belakang warna bundar dengan #34538b. Kami mengklik untuk turun -turun, dan hasilnya adalah, menghapus, dan memperluas panel warna web:

Klik tombol di bawah ini dengan ... kata -kata lainnya, dan sebagai hasilnya, panel pilihan warna yang indah diperluas:

Keren, sangat mudah digunakan, oh hehe.

Anda dapat mengklik di sini keras: html5 bentuk demo kontrol warna warna

Itu adalah fungsi pencarian. Saya ingat ketika saya melihat bahwa kotak input jenis pencarian akan secara otomatis memiliki ikon kaca pembesar pencarian. Namun, saya tidak melihat tes ini (apakah itu dalam mimpi), dan efek UI dari atribut ini sangat rendah dan dingin. Di browser inti WebKit, ketika ada nilai, akan ada salib seksi setelah kotak input, seperti yang ditunjukkan di bawah ini:

Saya tidak menemukan sesuatu yang istimewa tentang hal lain, jadi saya baru saja menyebutkan yang ini. Anda dapat mengklik di sini keras: demo kontrol tipe pencarian html5

Datasist adalah elemen yang sangat langka yang mengimplementasikan efek pull-down daftar data, dan gaya UI sedikit mirip dengan AutoComplete.

Untuk memberikan contoh sederhana:

Kode HTML berikut:

 DAFTAR: <Input Type = Daftar Teks = MyData Placeholder = Peringkat Film Populer/> <datalist id = mydata> <label opsi = nilai top1 = Biarkan peluru terbang> <label opsi = nilai top2 = jika Anda adalah label 2> <label first> label first> laughing Jianghu> <label opsi = nilai top4 nilai zha> orphan dari zha> laughing jianghu> <label opsi = nilai top4 nilai zha> orphan zha>

Hasilnya adalah sebagai berikut setelah kotak input mendapat fokus:

Hal ini, atribut ini adalah hal yang baik. Jangan berjalan -jalan dan mencari tahu bahwa itu hanya memiliki efek di bawah browser opera terbaru. Tidak diketahui apakah browser lain akan mendukungnya di masa depan.

3. Verifikasi bentuk html5 dan css3

Dengan HTML5, beberapa kelas semu baru juga muncul di bagian pemilih CSS3, seperti:

• : diperlukan dan: opsional, lihat apakah konten elemen formulir adalah opsional atau diperlukan
• : valid dan: tidak valid menunjukkan apakah data yang diisi valid atau tidak valid. Misalnya, kotak input jenis email harus menjadi format email yang valid.
• In-range dan: out-of-range, yang cocok untuk kontrol input tipe rentang saat mereka memiliki batasan rentang min atau maks

Misalnya, kode CSS dan HTML berikut:

 input [type = text]: fokus: valid, input [type = email]: fokus: valid, input [type = number]: fokus: in-range {outline: 2px green solid; } input [type = teks]: fokus: tidak valid, input [type = email]: fokus: tidak valid, input [type = angka]: fokus: out-of-range {outline: 2px solid merah; }

 <p> Kotak Input Normal: <Input Type = Text /> </p> <p> Kotak Input Surat: <Input Tipe = Email /> </p> <p> Kotak Input Numerik: <Input Jenis = Nomor Min = 0 Max = 10 /> (0 ~ 10) < /P>

Ambil kotak Input Mail sebagai contoh. Ketika teks input bukan kotak surat legal, garis besar kotak input akan menampilkan perbatasan peringatan merah:

Dengan input karakter, ketika kotak surat legal, perbatasan merah akan disikat ke perbatasan hijau yang aman:

Pekerjaan verifikasi, serta tampilan gaya terkait, dll. Semua diselesaikan oleh browser dan CSS. Saya memikirkannya 10 tahun kemudian, wow, itu web, semuanya sangat indah.

4. Kesimpulan terburu -buru

Beberapa fitur lain dari formulir HTML5, seperti yang diperlukan, fokus otomatis, placeholder, pola, dll., Telah ditampilkan dan dijelaskan dalam 28 fitur HTML5, tips dan teknik yang harus Anda ketahui, jadi saya tidak akan membahas detail di sini.

Jika Anda tertarik pada HTML5, saya pribadi merekomendasikan membaca artikel sebelumnya tentang 28 hal. Isi artikel ini dapat dikatakan sebagai perbaikan dan suplemen lebih lanjut untuk titik tertentu (fitur baru lainnya dari formulir HTML5). Yang pertama adalah masalah besar, dan artikel ini paling baik adalah kecap tingkat tinggi.

Akhirnya, karena itu semua hal HTML5, jika browser yang Anda coba lakukan sekarang adalah IE, bahkan jika Anda membiarkan browser Anda terbang sebentar, Anda tidak akan melihat efek yang menarik ini. Oleh karena itu, disarankan untuk pindah ke versi terbaru dari browser modern.

Fitur Formulir Baru di html5: http://dev.opera.com/articles/view/new-form-features-in-html5/