Trang chủTác giảLiên hệ

Seri HTML cơ bản - [HTML Basic Tutorial 3] Form and Validations

By Phạm Ngọc Hoàng
Published in HTML
June 07, 2021
2 min read

Hello các bạn, mình là Hoàng, hôm nay mình sẽ chia sẻ với các bạn 1 seri quay về cơ bản với lập trình web nhé. Cũng như thường lệ, chúng ta có cấu trúc các phần như sau

Tổng quan Về seri

  1. [HTML Basic Tutorial 1] HTML Basic
  2. [HTML Basic Tutorial 2] HTML Semantic
  3. [HTML Basic Tutorial 3] Form and Validations <==== You are here
  4. [HTML Basic Tutorial 4] Conventions and Best Practices
  5. [HTML Basic Tutorial 5] Accessibility
  6. [HTML Basic Tutorial 6] SEO Basic

Bắt đầu luôn cho nóng, phần 3 chúng ta đi tìm hiểu về Form and Validations với cấu trúc tổng quan như sau

Tổng quan về phần 3 - [HTML Basic Tutorial 3] Form and Validations

  1. Form Validation
  2. Thẻ <form>
  3. Các phần tử của <form>
  4. Validations Form
  5. Kết luận

Form and Validations

Form là một hình thức sử dụng để thu thập thông tin đầu vào của người dùng. Dữ liệu đầu vào có thể được gửi đến máy chủ để xử lý.

Hiển thị:

Thẻ <form>

Thẻ <form> được dùng để tạo biểu mẫu cho đầu vào của người dùng.

Thẻ form có rất nhiều thuộc tính, trong đó có 2 thuộc tính rất quan trọng sau:

  • action: đường dẫn mà form sẽ gửi dữ liệu tới.
  • method: phương thức gửi dữ liệu bao gồm: POST, GET.

Các phần tử của <form>

  • <label>: gắn nhãn cho các phần tử của form. Trong trường hợp cần gắn nhãn cho nút radio/checkbox, hăy gắn thuộc tính for của thẻ <label> bằng thuộc tính id của thẻ <input> để liên kết chúng.
  • <input>: là phần tử quan trọng nhất của form, có thể được hiển thị qua nhiều, tuỳ thuộc vào thuộc tính
    • <input type="text"/>: hiển thị trường nhập văn bản một dòng. - <input type="radio"/>: hiển thị nút radio (để chọn một trong nhiều lựa chọn)
    • <input type="checkbox"/>: hiển thị ô check (để chọn nhiều lựa chọn cùng lúc)
    • <input type="submit"/>: hiển thị nút gửi (để gửi biểu mẫu)
  • <textarea>: hiển thị trường nhập văn bản nhiều dòng. Có 2 thuộc tính quan trọng:
    • cols: thiết lập chiều rộng.
    • rows: thiết lập chiều cao (số dòng)
  • <select>: hiển thị các tuỳ chọn trong danh sách.
  • <option>: hiển thị mỗi tuỳ chọn cho thẻ <select>
  • <fieldset>: nhóm các phần tử có liên quan trong một form, thẻ <fieldset> sẽ tạo một khung bao quanh các phần tử đó.

Validations Form

HTML5 cung cấp một cách dễ dàng để “inline validation”, sử dụng các thuộc tính input. Có một số lượng lớn các thuộc tính có sẵn, nhưng hiện tại hãy xem xét một số thuộc tính phổ biến nhất.

  • required: Thuộc tính này quy định trường đầu vào không được để trống. Nó yêu cầu người dùng nhập nội dung nào đó trước khi gửi form.
  • maxlength, minlength: Chỉ định số lượng ký hiệu maximum/minimum (tối đa / tối thiểu) mà người dùng có thể nhập vào input. Điều này đặc biệt hữu ích trong các trường mật khẩu mà mật khẩu dài hơn có nghĩa là mật khẩu an toàn hơn.
  • pattern: Chỉ định cụm từ phải khớp với thứ tự dữ liệu đã nhập. Nó có thể được sử dụng với các loại input sau: text, search, url, email, password.

Kết luận

  • Cảm ơn các bạn đã đọc bài viết của mình. Hãy tiếp tục series của mình về HTML nhé. Cùng tìm hiểu về Conventions and Best Practices trong HTML như thế nào nha!
  • Bất ký thắc mắc hay góp ý gì thì hãy comment hoặc inbox trực tiếp để mình cải thiện trong những bài viêt sau nha.

@hoangpn - Better every day!


Phạm Ngọc Hoàng

Related Posts

HTML
Seri HTML cơ bản - [HTML Basic Tutorial 1] HTML Basic
June 08, 2021
6 min
© 2021, All Rights Reserved.

Quick Links

Liên hệ quảng cáoThông tinLiên hệ

Social Media