HTML 5: Login Page

HTML 5 mang lại nhiều tính năng và cải tiến cho việc thiết kế web forms (mẫu web ví như mẫu đăng ký, đăng nhập,...), nó cung cấp nhiều thuộc tính mới và kiểu đầu vào (input) mới, mục đích chủ yếu là làm cho cuộc sống của các nhà phát triển web được dễ dàng hơn và mang lại những trải nghiệm tốt hơn cho người sử dụng website.

Vì thế, trong bài viết này chúng ta sẽ tạo một trang login (đăng nhập) bằng HTML 5 để có thể nhìn thấy cách sử dụng các chức năng mới của nó trong công việc phát triển website.

Hãy nhìn vào đoạn mã HTML bên dưới.

<section class="loginform cf">
<form name="login" action="index_submit" method="get" accept-charset="utf-8">
    <ul>
        <li><label for="usermail">Email</label>
        <input type="email" name="usermail" placeholder="yourname@email.com" required></li>
        <li><label for="password">Password</label>
        <input type="password" name="password" placeholder="password" required></li>
        <li>
        <input type="submit" value="Login"></li>
    </ul>
</form>
</section>

Nếu bạn đã làm việc với HTML forms trước đây bạn sẽ thấy khá lá quen thuộc. Tuy nhiên bạn cũng sẽ chú ý tới một vài điểm khác biệt trong đó. Như bạn thấy trong thẻ <input> có hai thuộc tính là placeholder và required, chúng là các thuộc tính mới trong HTML5.

Thuộc Tính Placeholder

Thuộc tính placeholder cho phép chúng ta tạo đoạn text (văn bản) ban đầu trong input (text field) và nó sẽ biến mất khi con trỏ được chỉ vào text field hoặc text field này được nhập vào. Trước đây để làm được điều này ta phải sử dụng JavaScript, nhưng bây giờ với thuộc tính mới này thì nó trở nên vô cùng dễ dàng.

Thuộc Tính Required

Thuộc tính này cho phép ta thiết lập các field bắt buộc phải có giá trị nhập thì mới submitted (đệ trình) hay nói là lúc sự kiện nhấn nút buttom để gửi form tới server. Khi submitted mà field bị trống thì sẽ có một thông báo lỗi hiển thị nhắc nhở người dùng "Please fill out this field" xuất hiện.

Trong CSS3 giới thiệu thì thuộc tính action này có thể được định dạng thông bằng cách thêm :required trước field có sử dụng thuộc attribute, ví dụ như sau:

input:required {
    border: 1px solid red;
}

Email Input Type (Kiểu nhập email).

Như các bạn thấy trong đoạn mã HTML trên thì field text box đầu tiên có type là "email", đây là một kiểu input field mới trong HTML5 và nó thực sự tốt. Với kiểu input email này thì giá trị nhập trong field sẽ được kiểm tra theo chuẩn email được công nhận trên thế giới và một khi nó không hợp lẽ sẽ có một thông báo xuất để nhấn nhở.

Sử dụng các loại đầu vào email cũng có thể cung cấp kinh nghiệm tốt hơn cho người sử dụng điện thoại di động, giống như iPhone và Android người dùng khi bàn phím hiển thị đã được tối ưu trên màn hình với một nút "@"  chuyên dụng để giúp nhập địa chỉ email nhanh hơn.

The Downsides (Nhược điểm)

Các chức năng mới của HTML5 thực sự mạnh mẽ và dễ dàng để phát triển, tuy nhiên nó vẫn tồn tại một vài khuyết điểm nhỏ, ví như các trường hợp sau:

Thuộc tính placeholder chỉ hỗ trợ các phiên bản trình duyệt Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+. Vì vậy trong trường hợp bạn cần phải nó hoạt đông trên các trình duyệt không được hỗ trợ, bạn cần phải sử dụng polyfill kết hợp với modernizr. Điều này tương tự cũng cũng xảy ra với thuộc tính required.

Một điều nữa đối với câu thông báo field bắt buộc khi sử dụng thuộc tính required thì không thể cá nhân hóa nó được, như bạn thấy câu thông báo chung "Please fill out this field" không thể tốt hơn khi câu thông là "Please fill out your First Name" với câu thông báo này ta sẽ thấy ngay được vấn đề nằm tại field nào.

Vì vậy sử dụng JavaScript để kiểm tra tính hợp lệ của field (JavaScript to validate the required field) vẫn là lựa chọn tốt nhất cho tốt hiện nay.

function validateForm()
{
var x=document.forms["login"]["username"].value;
if (x==null || x=="")
  {
  alert("Please fill out the username");
  return false;
  }
}

Styling the Forms (Kiểm dáng của biểu mẫu)

Bây giờ chúng ta sẽ trang trí cho login form bằng CSS. Đầu tiên chúng ta sẽ tạo mẫu nền wood pattern trong HTML tag.

html {
    background: url('wood_pattern.png');
    font-size: 10pt;
}

Tiếp theo chúng ta sẽ loại bỏ các thông padding và margin mặc định của ul tag đang bao bọc các tag input và thiết lập lập thuộc tích float cho li tag về phái bên trái (left) để các input tag được hiển theo chiều ngang (horizontally) và liền kề nhau.

.loginform ul {
    padding: 0;
    margin: 0;
}
.loginform li {
    display: inline;
    float: left;
}

Kể từ khi chúng ta sử dụng thuộc tính float cho lig tag, thì các thành phần cha mẹ (parents) sẽ bị sụp đổ hay nói cách khác là bị hư hại ví như sai vị trí hiển thị lộn xộn, vì vậy chúng ta cần phải đảm các thành cha mẹ (parents) sẽ không bị ảnh hưởng khi sử dụng thuộc tính float bằng cách sử dụng kỹ thuật Clearfix Hack.

label {
    display: block;
    color: #999;
}
.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
:focus {
    outline: 0;
}

Trong CSS3 chúng ta có phủ định vùng xử lý (the negation selector). Chính vì thế ta sẽ sử dụng nó để xác định các field cần định nghĩa, trong trường hợp này mục tiêu của chúng ta là email và password input.

.loginform input:not([type=submit]) {
    padding: 5px;
    margin-right: 10px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
                0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
}

Cuối cùng chúng ta sẽ trang trí một chút xíu cho nút (button) submit như sau:

.loginform input[type=submit] {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: #64c8ef; /* Old browsers */
    background: -moz-linear-gradient(top,  #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #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;
    border-radius: 3px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

Bạn có thể thử nghiệm mẫu login HTML5 hoặc download source về theo 2 link bên dưới.

Theo hongkiat