Halaman Login Tutorial HTML5 dengan Formulir HTML5
HTML5 membawa banyak fitur dan peningkatan formulir web, ada atribut dan tipe input baru yang diperkenalkan terutama untuk membuat kehidupan pengembang web lebih mudah dan memberikan pengalaman yang lebih baik kepada pengguna web.
Jadi, dalam posting ini kita akan membuat halaman login menggunakan Formulir HTML5 untuk melihat cara kerja fitur baru yang ditambahkan.
- Demo
- Sumber Unduhan
Input HTML5
Mari kita lihat markup berikut.
Jika Anda pernah menggunakan formulir HTML sebelumnya, ini akan terlihat familier. Tapi, Anda juga akan melihat perbedaan di sana. Masukan sudah placeholder dan wajib atribut, yang merupakan atribut baru di HTML5.
Placeholder
Itu placeholder atribut memungkinkan kita untuk memberikan teks awal pada input yang akan hilang ketika berada dalam a fokus status atau sedang diisi. Sebelumnya, kami dulu melakukannya dengan JavaScript, tetapi sekarang menjadi jauh lebih mudah dengan atribut baru ini.
Atribut yang Diperlukan
Itu wajib atribut akan menetapkan bidang menjadi wajib dan dengan demikian tidak boleh dibiarkan kosong sebelum formulir dikirimkan, jadi ketika pengguna belum mengisi bidang, kesalahan berikut akan muncul.
Selektor baru juga diperkenalkan di CSS3, :wajib untuk menargetkan bidang dengan wajib atribut. Berikut ini sebuah contoh;
input: diperlukan border: 1px solid red;
Jenis Input Email
Jenis input pertama adalah e-mail yang sebenarnya tipe bidang baru ditambahkan dalam HTML5 juga. Itu e-mail tipe akan memberikan validasi alamat email dasar di bidang. Ketika pengguna tidak mengisi bidang dengan alamat email, browser akan menampilkan pemberitahuan berikut;
Menggunakan jenis masukan email juga dapat memberikan pengalaman yang lebih baik bagi pengguna seluler, seperti pengguna iPhone dan Android, di mana akan ditampilkan keyboard layar yang dioptimalkan untuk email dengan berdedikasi “@” tombol untuk membantu mengetikkan alamat email lebih cepat.
Kerugiannya
Fitur bentuk baru yang ditawarkan dalam HTML5 kuat dan mudah diimplementasikan, tetapi masih kurang di beberapa daerah. Contohnya;
Itu placeholder atribut, hanya didukung di browser modern - Firefox 3.7+, Safari 4+, Chrome 4+ dan Opera 11+. Jadi, jika Anda membutuhkannya untuk bekerja di browser yang tidak didukung, Anda dapat menggunakan polyfill ini bersama dengan Modernizr.
Hal yang sama berlaku dengan wajib atribut. Pemberitahuan kesalahan tidak dapat dipersonalisasi, kesalahan akan tetap ada “Silakan isi kolom ini” daripada “Silakan isi Nama Depan Anda”, dukungan atribut ini juga terbatas pada browser terbaru.
Jadi, menggunakan JavaScript untuk memvalidasi bidang yang diperlukan adalah (sejauh ini) merupakan pilihan yang lebih baik.
function validateForm () var x = document.forms ["login"] ["username"]. value; if (x == null || x == "") alert ("Silakan isi nama pengguna"); return false; Menata Formulir
Baiklah, sekarang mari kita hiasi formulir login kami dengan CSS. Pertama kita akan memberikan latar belakang pola kayu di html menandai.
html background: url ('wood_pattern.png'); ukuran font: 10pt; Kemudian, kita perlu menghapus padding dan margin default di ul tag yang membungkus keseluruhan input dan mengapung li ke kiri, sehingga input akan ditampilkan secara horizontal, berdampingan.
.form login ul padding: 0; margin: 0; .loginform li display: inline; mengapung: kiri;
Karena kita mengapung li, orang tua akan runtuh, jadi kita perlu menghapus hal-hal di sekitar orang tua dengan peretasan clearfix.
label display: block; warna: # 999; .cf: before, .cf: after content: ""; tampilan: tabel; .cf: after clear: Keduanya; .cf * zoom: 1; : focus outline: 0;
Di CSS3 kita memiliki pemilih negasi. Jadi, kita akan menggunakannya untuk menargetkan input selain menyerahkan ketik, yang dalam hal ini akan menargetkan input email dan kata sandi;
.input form login: not ([type = submit]) padding: 5px; margin-right: 10px; perbatasan: 1px solid rgba (0, 0, 0, 0.3); batas-jari-jari: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Terakhir, kami akan memberikan sedikit gaya dekorasi untuk Menyerahkan tombol, sebagai berikut.
.input form login [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); latar belakang: # 64c8ef; / * Browser lama * / latar belakang: -moz-linear-gradient (atas, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # 64c8ef), color-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / latar belakang: -webkit-linear-gradient (atas, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / latar belakang: -o-linear-gradient (atas, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / latar belakang: -ms-linear-gradient (atas, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: linear-gradient (ke bawah, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; padding: 5px 15px; margin-right: 0; margin-top: 15px; batas-jari-jari: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0,3);
Itu saja, sekarang Anda dapat mencoba formulir login dari tautan berikut.
- Demo
- Sumber Unduhan
Kata-kata terakhir
Dalam tutorial ini kami melihat beberapa fitur baru dalam bentuk HTML5:placeholder, wajib dan e-mail masukkan tipe untuk membuat halaman login sederhana. Kami juga telah melalui kelemahan atribut, sehingga kami dapat memutuskan pendekatan yang lebih baik untuk diterapkan.
Dalam posting berikutnya kita akan melihat ke dalam fitur formulir HTML5 baru lainnya, jadi tetap disini.
