Categories HTML JavaScript

Cách dùng thẻ input để làm Form trong HTML5

Làm Form trong HTML5 đơn giản hơn nhiều HTML thường, lý do nằm ở chỗ bạn không cần dùng Javascript để Validate (bắt lỗi dữ liệu) các trường nữa.

Tất nhiên điều này không tuyệt đối, một số cái vẫn phải dùng Javascript, nhưng gì thì gì, chơi với HTML5, code mà bạn phải gõ sẽ ít hơn nhiều lần.

Hiện trình duyệt Google Chrome hỗ trợ tốt nhất các thẻ input mới, do vậy tôi khuyên bạn nên dùng anh bạn này để xem các ví dụ trong bài viết.

Tôi sẽ bắt đầu luôn với thẻ input mà bạn thường xuyên phải bắt lỗi, đó là email. Nếu HTML thường bạn sẽ phải viết code JS khá dài thì với HTML5, bạn chỉ cần ghi:

<input type="email">

Giờ bạn thử gõ một đoạn không phải email chuẩn rồi nhấn Gửi xem điều gì xẩy ra. Thẻ email được hỗ trợ tốt trên đa số trình duyệt, ngoại trừ Safari.

Email:

Đoạn code mẫu cho form trên là:

<form action="#">
Email: <input name="email" type="email" />
 <input type="submit" />
</form>

Bạn cũng còn nhớ, một yêu cầu khác mà chúng ta thường phải làm với Form, đó là không cho phép người dùng bỏ trống dữ liệu. Code JS cho điều này rất đơn giản, nhưng HTML5 còn đơn giản hơn! Bạn chỉ cần thêm thuộc tính required vào, cụ thể:

<input type="email" required>
Email:

Bạn để trống và nhấn nút Gửi (submit) xem sao.

Như vậy, HTML5 không chỉ thêm các thẻ mới, nó còn thêm các thuộc tính mới nữa mà required ở trên là ví dụ.

Thuộc tính mới tiếp theo cũng rất hay dùng đó là placeholder, đây là đoạn văn bản trong thẻ input để nhắc người dùng nên nhập cái gì, ví dụ dòng chữ nhạt màu “Bạn nhập họ tên vào đây” được tạo bằng placeholder:

Họ tên:

Code mẫu:

<form action="#">
Họ tên: <input name="name" placeholder="Bạn nhập họ tên vào đây" required="" type="text" />
<input type="submit" />
</form>

Sau đây là các kiểu input mới khác trong HTML5…


Thẻ color – chọn màu

Chọn màu cho bạn:



Code mẫu:

<form action="#">
  Chọn màu cho bạn: <input type="color" name="mausac"><br>
  <input type="submit">
</form>

Hiện chỉ có Chrome và Opera hỗ trợ thẻ màu.


Thẻ number – số má

Nhập giá trị từ 1 đến 10:

Nhập giá trị từ 1 đến 10:

Code mẫu:

<form action="#">
  Nhập giá trị từ 1 đến 10: <input type="number" name="quantity" min="1" max="10">
  <input type="submit">
</form>

Với thẻ number bạn buộc phải nhập số, thẻ number bổ sung thêm các thuộc tính giá trị nhỏ nhất min, giá trị lớn nhất max. Ngoài ra còn cả thuộc tính step – bước nhảy. Hiện thẻ number chưa được hỗ trợ trên FireFox.


Thẻ day – ngày tháng năm

Ngày sinh:

Ngày sinh:

Code mẫu:

<form action="#">
  Ngày sinh: <input type="date" name="ngaysinh">
  <input type="submit">
</form>

Thẻ day sẽ giúp bạn nhanh chóng lấy ngày tháng năm cụ thể và dĩ nhiên bạn cũng không cần code để validate nữa, vì với thẻ này người dùng chỉ có thể nhập ngày tháng năm vào mà thôi.


Thẻ URL – thêm địa chỉ website

Địa chỉ web:

Địa chỉ web:

Code mẫu:

<form action="#">
  Địa chỉ web: <input type="url" name="page"><br>
  <input type="submit">
</form>

Thẻ này đa số các trình duyệt hỗ trợ, chỉ Safari là chưa. Yêu cầu nhập địa chỉ trang web phải có cả http://

Comments are closed.

Back to Top