Các thuộc tính quan trọng trong biểu mẫu trong HTML
Biểu mẫu HTML không chỉ giúp thu thập dữ liệu mà còn có thể kiểm soát và hướng dẫn người dùng nhập liệu đúng cách.
Các thuộc tính quan trọng giúp tối ưu form:
-
required: Bắt buộc nhập dữ liệu. -
placeholder: Hiển thị gợi ý trong ô nhập. -
disabled: Vô hiệu hóa trường nhập. -
readonly: Chỉ cho phép đọc, không chỉnh sửa. -
maxlength/minlength: Giới hạn số ký tự nhập vào. -
pattern: Kiểm tra dữ liệu theo biểu thức chính quy.
Bài học này sẽ giúp bạn nắm rõ cách sử dụng những thuộc tính này để tạo biểu mẫu hiệu quả hơn.
1. Các thuộc tính quan trọng trong biểu mẫu
Required – Bắt buộc nhập liệu
Thuộc tính required đảm bảo rằng trường nhập không được để trống trước khi gửi biểu mẫu.
Ví dụ:
<label for="name">Họ và Tên:</label>
<input type="text" id="name" name="name" required>
Lợi ích:
- Ngăn người dùng gửi biểu mẫu khi chưa điền đủ thông tin.
Placeholder – Gợi ý nhập liệu
Thuộc tính placeholder giúp hiển thị văn bản gợi ý trong ô nhập, biến mất khi người dùng nhập nội dung.
Ví dụ:
<input type="email" name="email" placeholder="Nhập email của bạn">
Lợi ích:
- Giúp người dùng biết cần nhập thông tin gì.
Disabled & Readonly – Kiểm soát chỉnh sửa dữ liệu
-
disabled: Làm ô nhập bị vô hiệu hóa, không thể tương tác. -
readonly: Chỉ cho phép đọc, không cho chỉnh sửa.
Ví dụ:
<input type="text" value="Không thể chỉnh sửa" readonly>
<input type="text" value="Đã bị vô hiệu hóa" disabled>
Lợi ích:
- Bảo vệ dữ liệu quan trọng khỏi chỉnh sửa.
Maxlength & Minlength – Giới hạn số ký tự nhập
-
maxlength: Giới hạn số ký tự tối đa. -
minlength: Yêu cầu số ký tự tối thiểu.
Ví dụ:
<input type="text" name="username" maxlength="15" minlength="5" required>
Lợi ích:
- Đảm bảo dữ liệu nhập vào có độ dài hợp lý.
Pattern – Kiểm tra định dạng dữ liệu nhập
Thuộc tính pattern cho phép kiểm tra dữ liệu bằng biểu thức chính quy (RegEx).
Ví dụ kiểm tra số điện thoại:
<input type="tel" name="phone" pattern="[0-9]{10}" placeholder="Nhập 10 chữ số" required>
Lợi ích:
- Ngăn người dùng nhập sai định dạng.
2. Thực hành: Tạo biểu mẫu kiểm tra dữ liệu đầu vào
Chúng ta sẽ tạo một biểu mẫu gồm:
- Họ và tên (bắt buộc).
- Email (bắt buộc, có gợi ý).
- Số điện thoại (10 chữ số).
- Mật khẩu (tối thiểu 6 ký tự).
- Nút gửi form.
Mã HTML hoàn chỉnh:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biểu mẫu kiểm tra dữ liệu</title>
</head>
<body>
<h2>Đăng ký tài khoản</h2>
<form action="submit.php" method="POST">
<label for="fullname">Họ và Tên:</label>
<input type="text" id="fullname" name="fullname" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Nhập email của bạn" required>
<br><br>
<label for="phone">Số điện thoại:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Nhập 10 chữ số" required>
<br><br>
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" minlength="6" required>
<br><br>
<button type="submit">Đăng ký</button>
</form>
</body>
</html>
3. Kết luận
Bài học này đã giúp bạn hiểu cách sử dụng các thuộc tính quan trọng trong biểu mẫu HTML để kiểm soát và tối ưu dữ liệu nhập vào.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com