Thiết kế form dễ dàng hơn với HTML5


Thật sự hữu ích khi sử dụng HTML5 để thay thế windows form, mặc dù vậy, nhưng bạn vẫn phải tìm hiểu hết những tag mới trong HTML5 cũng như một số effect mà HTML5 mang lại.

1) Bạn phải tìm hiểu kỹ những Input type của HTML5, trong đó có rất nhiều control mà với HTML5 bạn không cần làm gì nữa. Ví nhụ như bạn muốn nhập Email và bắt buộc người dùng phải nhập đúng format, bạn chỉ cần tim hiểu type=”email” là gì.

Hay như nếu bạn muốn tạo 1 ô nhập ngày tháng và build 1 cái calendar mini để cho người dùng chọn ngày cho tiện, thì với HTML5 cũng chỉ 1 dòng lệnh khá đơn giản:

<input type=”date” id=”deliveryDate” />

là bạn có ngay 1 control

Ngoài việc tương tác với các control trong HTML5 theo cách thông thường của JavaScript 1.2 thì bạn có thể sử dụng JQuery để thao tác trên đó. Rất dễ dàng và tiện dụng.

2) New Input Content Attributes in HTML5: nghĩa là nếu trước đây bạn tự xử lý thì bây giờ HTML5 xử lý giùm bạn. Ví dụ: nếu bạn muốn tạo 1 ô nhập email, bạn có thể để giá trị sample vào, và khi người dùng click chuột vào ô đó, tự nhiên dòng hướng dẫn sẽ mất đi, và bạn nhập bình thường. Dĩ nhiên, giá trị hướng dẫn sẽ sáng hơn màu bình thường của ô nhập.

Một đoạn code ngắn có thể làm nên nhiều việc trong HTML5, xem ví dụ:

Mã:
Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

Ngoài ra, HTML còn cung cấp 1 thuộc tính mới cho tag đó là autofocus

<input type=”text” id=”orderName” autofocus />

thuộc tính này giúp cho control tự động focus khi trang vừa được load lên xong.

3) HTML5 Form Validation là thành phần cực kỳ quan trọng mà hầu như ai cũng phải làm nhất là khi xây dựng form nhập liệu có các ràng buộc. Ví dụ như email là bắt buộc, nhập số điện thoại phải theo chuẩn mặc định. Thì HTML5 chỉ cần cơ bản giải quyết vấn đề thông qua một số thuộc tính:

<input type=”text” id=”orderName” required />

Là yêu cầu nhập, nếu không thì: 

Và:

<input type=”tel” id=”orderTelephone” pattern=”\(\d\d\d\) \d\d\d\-\d\d\d\d” title=”(xxx) xxx-xxxx” />

Phải nhập số fone theo chuẩn, nếu không thì: 

4) HTML5 Forms and ASP.NET Web Forms

Rất may mắn là hầu hết các control trong HTML5 có thể tương tác hoàn toàn với ASP.NET control, tuy nhiên để làm việc được với HTML5 bạn cần phải cài Visual Studio SP1 và .NET 4.0

Download sample ở đây nhé: http://archive.msdn.microsoft.com/mag201111HTML5

Advertisements

Về haipro912
Đời rất dở nhưng anh vẫn phải niềm nở =))

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

%d bloggers like this: