Halaman Log Masuk Tutorial HTML5 dengan Borang HTML5
HTML5 membawa banyak ciri dan penambahbaikan borang web, terdapat atribut baru dan jenis input yang diperkenalkan terutamanya untuk menjadikan kehidupan pemaju web lebih mudah dan memberikan pengalaman yang lebih baik kepada pengguna web.
Jadi, dalam catatan ini kita akan membuat halaman log masuk menggunakan Bentuk HTML5 untuk melihat bagaimana ciri-ciri tambahan baharu berfungsi.
- Demo
- Muat turun Sumber
Input HTML5
Mari lihat pada markup berikut.
Jika anda telah bekerja dengan borang HTML sebelum ini, ini akan kelihatan biasa. Tetapi, anda juga akan melihat perbezaan di sana. Input mempunyai pemegang tempat dan diperlukan atribut, yang merupakan atribut baharu dalam HTML5.
Placeholder
The pemegang tempat atribut membolehkan kita memberi teks awal dalam input yang akan hilang apabila ia berada dalam tumpuan nyatakan atau diisi. Sebelum ini, kami biasa melakukannya dengan JavaScript, tetapi kini menjadi lebih mudah dengan atribut baru ini.
Atribut yang diperlukan
The diperlukan atribut akan menetapkan medan menjadi wajib dan dengan demikian tidak boleh dibiarkan kosong sebelum form dikemukakan, jadi apabila pengguna belum mengisi lapangan, kesalahan berikut akan muncul.
Pemilih baru juga diperkenalkan dalam CSS3, : diperlukan untuk menyasarkan bidang dengan diperlukan atribut. Inilah contohnya;
input: diperlukan sempadan: 1px pepejal merah;
Jenis Input E-mel
Jenis input pertama ialah e-mel yang sebenarnya jenis medan baru ditambah dalam HTML5 juga. The e-mel jenis akan memberikan pengesahan alamat e-mel asas di lapangan. Apabila pengguna tidak mengisi medan dengan alamat e-mel, penyemak imbas akan menunjukkan pemberitahuan berikut;
Menggunakan jenis input e-mel juga boleh memberikan pengalaman yang lebih baik untuk pengguna mudah alih, seperti pengguna iPhone dan Android, di mana ia akan menunjukkan Papan kekunci dioptimumkan pada e-mel dengan dedikasi “@” butang untuk membantu menaipkan alamat e-mel dengan cepat.
The Downsides
Ciri-ciri bentuk baharu yang ditawarkan dalam HTML5 adalah kuat dan mudah dilaksanakan, tetapi mereka masih kekurangan di beberapa tempat. Sebagai contoh;
The pemegang tempat atribut, hanya disokong dalam penyemak imbas moden - Firefox 3.7+, Safari 4+, Chrome 4+ dan Opera 11+. Oleh itu, sekiranya anda memerlukannya untuk berfungsi dalam penyemak imbas yang tidak disokong, anda boleh menggunakan polyfills ini bersempena dengan Modernizr.
Perkara yang sama berlaku dengan diperlukan atribut. Pemberitahuan ralat tidak boleh diperibadikan, ralat akan tetap berlaku “Sila isi medan ini” bukannya “Sila isi Nama Pertama anda”, sokongan atribut ini juga terhad kepada penyemak imbas terkini.
Oleh itu, menggunakan JavaScript untuk mengesahkan bidang yang diperlukan adalah (setakat ini) pilihan yang lebih baik.
fungsi validateForm () var x = document.forms ["login"] ["username"]. nilai; jika (x == null || x == "") alert ("Sila isikan nama pengguna"); kembali palsu; Menggayakan Borang
Baiklah, sekarang mari kita menghiasi borang login kami dengan CSS. Mula-mula kita akan memberi latar belakang corak kayu dalam html tag.
html background: url ('wood_pattern.png'); saiz fon: 10pt; Kemudian, kita perlu mengalih keluar padding lalai dan margin dalam ul tag yang membungkus keseluruhannya input dan terapung li ke kiri, jadi input akan dipaparkan secara mendatar, bersebelahan.
.loginform ul padding: 0; margin: 0; .loginform li display: inline; terapung: kiri;
Oleh kerana kita terapung li, ibu bapa akan runtuh, jadi kita perlu membersihkan perkara di sekeliling ibu bapa dengan hack jelas.
label display: block; warna: # 999; .cf: sebelum, .cf: selepas kandungan: ""; paparan: jadual; .cf: selepas clear: both; .cf * zoom: 1; : fokus outline: 0;
Dalam CSS3 kami mempunyai pemilih penafian. Jadi, kami akan menggunakannya untuk disasarkan input selain daripada mengemukakan jenis, yang dalam kes ini akan menyasarkan input e-mel dan kata laluan;
.input input login: not ([type = submit]) padding: 5px; margin-right: 10px; sempadan: rpb pepejal 1px (0, 0, 0, 0.3); jejari sempadan: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);
Akhir sekali, kami akan memberikan hiasan gaya kecil untuk Hantar butang, seperti berikut.
.masukkan input login [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); latar belakang: # 64c8ef; / * Pelayar lama * / latar belakang: -moz-linear-kecerunan (atas, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0%, # 64c8ef), berhenti warna (100%, # 00a2e2)); / * Chrome, Safari4 + * / latar belakang: -webkit-linear-gradient (atas, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / latar belakang: -o-linear-kecerunan (atas, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / latar belakang: -ms-linear-gradient (atas, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / latar belakang: linear-gradient (ke bawah, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / warna: #fff; padding: 5px 15px; margin-right: 0; margin-top: 15px; jejari sempadan: 3px; teks-bayangan: 1px 1px 0px rgba (0, 0, 0, 0.3);
Itulah, kini anda boleh mencuba borang login dari pautan berikut.
- Demo
- Muat turun Sumber
Perkataan Akhir
Dalam tutorial ini, kita melihat beberapa ciri baru dalam bentuk HTML5:pemegang tempat, diperlukan dan e-mel jenis input untuk membuat halaman log masuk yang mudah. Kami juga telah melalui kelemahan atribut, jadi kami boleh menentukan pendekatan yang lebih baik untuk digunakan.
Dalam jawatan berikutnya, kami akan melihat ciri-ciri baru HTML5 yang lain, jadi tunggu.
