Trang đăng nhập hướng dẫn HTML5 với biểu mẫu HTML5
HTML5 mang lại nhiều tính năng và cải tiến cho mẫu web, có các thuộc tính và kiểu đầu vào mới được giới thiệu chủ yếu là để làm cho cuộc sống của các nhà phát triển web dễ dàng hơn và cung cấp trải nghiệm tốt hơn cho người dùng web.
Vì vậy, trong bài đăng này, chúng tôi sẽ tạo một trang đăng nhập bằng cách sử dụng Biểu mẫu HTML5 để xem các tính năng mới được thêm vào hoạt động như thế nào.
- Bản giới thiệu
- Tải xuống nguồn
Đầu vào HTML5
Chúng ta hãy xem đánh dấu sau đây.
Nếu bạn đã làm việc với các biểu mẫu HTML trước đây, điều này sẽ trông quen thuộc. Nhưng, bạn cũng sẽ nhận thấy sự khác biệt ở đó. Các đầu vào có giữ chỗ và cần thiết các thuộc tính, là các thuộc tính mới trong HTML5.
Giữ chỗ
Các giữ chỗ thuộc tính cho phép chúng ta đưa ra văn bản ban đầu trong đầu vào sẽ biến mất khi nó ở trong tiêu điểm trạng thái hoặc được điền vào. Trước đây, chúng ta thường làm điều đó với JavaScript, nhưng bây giờ nó trở nên dễ dàng hơn rất nhiều với thuộc tính mới này.
Thuộc tính bắt buộc
Các cần thiết thuộc tính sẽ đặt trường là bắt buộc và do đó không được để trống trước khi biểu mẫu được gửi, vì vậy khi người dùng không điền vào trường, lỗi sau sẽ xuất hiện.
Bộ chọn mới cũng được giới thiệu trong CSS3, :cần thiết nhắm mục tiêu các trường với cần thiết thuộc tính. Đây là một ví dụ;
đầu vào: bắt buộc viền: 1px màu đỏ;
Kiểu nhập email
Loại đầu vào là e-mail đó thực sự là một loại trường mới cũng được thêm vào HTML5. Các e-mail loại sẽ cung cấp xác nhận địa chỉ email cơ bản trong lĩnh vực này. Khi người dùng không điền vào trường bằng một địa chỉ email, trình duyệt sẽ hiển thị thông báo sau;
Sử dụng các kiểu nhập email cũng có thể mang lại trải nghiệm tốt hơn cho người dùng di động, như người dùng iPhone và Android, nơi nó sẽ hiển thị bàn phím trên màn hình được tối ưu hóa với sự tận tâm “@” nút để giúp nhập địa chỉ email nhanh hơn.
Nhược điểm
Các tính năng biểu mẫu mới được cung cấp trong HTML5 rất mạnh mẽ và dễ thực hiện, nhưng chúng vẫn còn thiếu ở một số khu vực. Ví dụ;
Các giữ chỗ thuộc tính, chỉ được hỗ trợ trong các trình duyệt hiện đại - Firefox 3.7+, Safari 4+, Chrome 4+ và Opera 11+. Vì vậy, nếu bạn cần nó để hoạt động trong các trình duyệt không được hỗ trợ, bạn có thể sử dụng polyfill này kết hợp với Modernizr.
Điều tương tự cũng xảy ra với cần thiết thuộc tính. Thông báo lỗi không thể được cá nhân hóa, lỗi sẽ vẫn còn “Vui lòng điền vào trường này” hơn là “Vui lòng điền tên của bạn”, hỗ trợ thuộc tính này cũng được giới hạn trong các trình duyệt mới nhất.
Vì vậy, sử dụng JavaScript để xác thực trường bắt buộc là (cho đến nay) là một lựa chọn tốt hơn.
function validateForm () var x = document.forms ["login"] ["username"]. value; if (x == null || x == "") alert ("Vui lòng điền tên người dùng"); trả lại sai; Tạo kiểu
Được rồi, bây giờ hãy trang trí biểu mẫu đăng nhập của chúng tôi bằng CSS. Đầu tiên, chúng tôi sẽ cung cấp cho nền một mô hình gỗ trong html nhãn.
html nền: url ('wood_potype.png'); cỡ chữ: 10pt; Sau đó, chúng ta cần xóa phần đệm mặc định và lề trong ul thẻ bao bọc toàn bộ đầu vào và nổi li ở bên trái, do đó, các đầu vào sẽ được hiển thị theo chiều ngang, cạnh nhau.
.loginform ul đệm: 0; lề: 0; .loginform li display: nội tuyến; phao: trái;
Kể từ khi chúng tôi nổi li, cha mẹ sẽ sụp đổ, vì vậy chúng ta cần phải xóa mọi thứ xung quanh cha mẹ với hack hack.
nhãn hiển thị: khối; màu: # 999; .cf: trước, .cf: sau nội dung: ""; hiển thị: bảng; .cf: sau xóa: cả hai; .cf * phóng to: 1; : tập trung phác thảo: 0;
Trong CSS3, chúng ta có bộ chọn phủ định. Vì vậy, chúng tôi sẽ sử dụng nó để nhắm mục tiêu đầu vào khác hơn Gửi đi loại, trong trường hợp này sẽ nhắm mục tiêu email và mật khẩu đầu vào;
.đăng nhập đầu vào: not ([type = submit]) padding: 5px; lề phải: 10px; viền: 1px rgba solid (0, 0, 0, 0,3); bán kính đường viền: 3px; hộp bóng: in 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rpx (250, 250, 250, 0.5);
Cuối cùng, chúng tôi sẽ cung cấp một chút phong cách trang trí cho Gửi đi nút, như sau.
.loginform input [type = submit] Border: 1px solid rgba (0, 0, 0, 0.3); nền: # 64c8ef; / * Các trình duyệt cũ * / nền: -moz-linear-gradient (trên cùng, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, # 64c8ef), dừng màu (100%, # 00a2e2)); / * Chrome, Safari4 + * / nền: -webkit-linear-gradient (trên cùng, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / nền: -o-linear-gradient (trên cùng, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / nền: -ms-linear-gradient (trên cùng, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / nền: gradient tuyến tính (xuống dưới, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / màu: #fff; phần đệm: 5px 15px; lề phải: 0; lề trên: 15px; bán kính đường viền: 3px; bóng văn bản: 1px 1px 0px rgba (0, 0, 0, 0,3);
Đó là nó, bây giờ bạn có thể thử hình thức đăng nhập từ các liên kết sau.
- Bản giới thiệu
- Tải xuống nguồn
Từ cuối cùng
Trong hướng dẫn này, chúng tôi đã xem xét một vài tính năng mới trong các hình thức HTML5:giữ chỗ, cần thiết và e-mail loại đầu vào để tạo một trang đăng nhập đơn giản. Chúng tôi cũng đã trải qua các nhược điểm của các thuộc tính, vì vậy chúng tôi có thể quyết định một cách tiếp cận tốt hơn để được áp dụng.
Trong bài đăng tiếp theo, chúng tôi sẽ xem xét các tính năng biểu mẫu HTML5 mới khác, vì vậy hãy theo dõi.
