Một website doanh nghiệp có thể thiếu hiệu ứng đẹp, nhưng gần như không thể thiếu Form.
Từ trang liên hệ, đăng nhập, đăng ký, tìm kiếm, đặt hàng, gửi yêu cầu báo giá đến hệ thống CRM hay ERP, tất cả đều hoạt động thông qua biểu mẫu.
HTML5 đã bổ sung rất nhiều tính năng giúp Form trở nên thông minh hơn, giảm lượng JavaScript phải viết và mang lại trải nghiệm tốt hơn cho người dùng.
🎯 Mục tiêu bài học
Sau bài này bạn sẽ:
Hiểu cấu trúc chuẩn của một Form HTML5.
Biết sử dụng các loại
inputhiện đại.Áp dụng các thuộc tính kiểm tra dữ liệu.
Tạo Form thân thiện với người dùng.
Chuẩn bị nền tảng để tích hợp PHP, Laravel hoặc Node.js.
Form là gì?
Form là nơi người dùng nhập dữ liệu và gửi về máy chủ.
Ví dụ:
Đăng nhập
Đăng ký
Liên hệ
Thanh toán
Đặt lịch
Gửi CV
Tìm kiếm
Cấu trúc cơ bản
<form action="/login" method="post">
<label>Email</label>
<input type="email">
<label>Password</label>
<input type="password">
<button type="submit">
Đăng nhập
</button>
</form>
Form luôn bắt đầu bằng thẻ:
<form>
và kết thúc bằng:
</form>
Hai thuộc tính quan trọng
action
Là địa chỉ sẽ nhận dữ liệu.
Ví dụ:
<form action="/contact">
hoặc
<form action="save.php">
method
Có hai giá trị phổ biến.
GET
<form method="get">
Dữ liệu xuất hiện trên URL.
Ví dụ
/search?q=html
Phù hợp cho:
tìm kiếm
lọc dữ liệu
phân trang
POST
<form method="post">
Dữ liệu gửi trong phần thân của request.
Phù hợp cho:
đăng nhập
đăng ký
thanh toán
cập nhật dữ liệu
upload file
Label
Luôn nên sử dụng label.
Ví dụ:
<label>Email</label>
<input type="email">
Hoặc tốt hơn:
<label for="email">
Email
</label>
<input
id="email"
type="email">
Khi nhấn vào chữ Email, con trỏ sẽ tự động chuyển vào ô nhập liệu.
Các loại Input quan trọng
Text
<input type="text">
Dùng nhập:
họ tên
địa chỉ
tên công ty
<input type="email">
HTML5 tự kiểm tra định dạng email.
Password
<input type="password">
Ẩn ký tự khi nhập.
Number
<input type="number">
Chỉ cho phép nhập số.
Date
<input type="date">
Hiển thị lịch chọn ngày.
Time
<input type="time">
Tel
<input type="tel">
Nhập số điện thoại.
URL
<input type="url">
Kiểm tra định dạng website.
Search
<input type="search">
Dùng cho ô tìm kiếm.
File
<input type="file">
Cho phép tải tệp lên.
Placeholder
<input
type="text"
placeholder="Nhập họ tên">
Placeholder chỉ mang tính gợi ý.
Không thay thế Label.
Required
Bắt buộc nhập.
<input
type="email"
required>
Nếu bỏ trống, trình duyệt sẽ không cho gửi Form.
Minlength
<input
type="text"
minlength="6">
Ít nhất 6 ký tự.
Maxlength
<input
maxlength="50">
Giới hạn số ký tự.
Min và Max
<input
type="number"
min="18"
max="65">
Pattern
Cho phép kiểm tra bằng biểu thức chính quy.
Ví dụ:
<input
pattern="[A-Za-z]{5,20}">
Chỉ chấp nhận chữ cái.
Readonly
<input
readonly>
Có thể xem nhưng không sửa.
Disabled
<input
disabled>
Không thể thao tác.
Giá trị cũng sẽ không được gửi lên máy chủ.
Autofocus
<input
autofocus>
Con trỏ tự động đứng tại ô này khi mở trang.
Autocomplete
<input
autocomplete="email">
Giúp trình duyệt gợi ý dữ liệu đã lưu.
Checkbox
<input type="checkbox">
Có thể chọn nhiều.
Ví dụ:
HTML
CSS
JavaScript
Radio
<input
type="radio"
name="gender">
Chỉ chọn một.
Ví dụ:
Nam
Nữ
Khác
Select
<select>
<option>Việt Nam</option>
<option>Hoa Kỳ</option>
<option>Nhật Bản</option>
</select>
Danh sách lựa chọn.
Textarea
<textarea
rows="5">
</textarea>
Dùng nhập nội dung dài.
Button
<button
type="submit">
Gửi
</button>
Reset
<button
type="reset">
Làm lại
</button>
Xóa dữ liệu đã nhập.
Ví dụ Form doanh nghiệp
<form action="/contact" method="post">
<label for="name">Họ và tên</label>
<input
id="name"
type="text"
required>
<label for="email">Email</label>
<input
id="email"
type="email"
required>
<label for="phone">Số điện thoại</label>
<input
id="phone"
type="tel">
<label for="message">Nội dung</label>
<textarea
id="message"
rows="5">
</textarea>
<button type="submit">
Gửi liên hệ
</button>
</form>
Đây là cấu trúc phù hợp cho hầu hết website doanh nghiệp.
Những lỗi thường gặp
❌ Không dùng label.
❌ Chỉ dùng placeholder thay cho label.
❌ Dùng method="get" cho đăng nhập.
❌ Không kiểm tra dữ liệu bằng required.
❌ Không đặt type phù hợp cho từng trường.
❌ Không liên kết label với input bằng thuộc tính for và id.
❌ Quên thêm name cho các trường, khiến dữ liệu không được gửi lên máy chủ.
Thực hành
Tạo một Form Đăng ký khóa học gồm:
Họ và tên
Email
Số điện thoại
Ngày sinh
Giới tính
Khóa học muốn đăng ký
Nội dung ghi chú
Nút Đăng ký
Nút Làm lại
Yêu cầu:
Sử dụng Semantic HTML.
Mỗi trường đều có
label.Áp dụng
requiredcho các trường quan trọng.Chọn đúng
typecho từng ô nhập liệu.
Tổng kết
Form là cầu nối giữa người dùng và hệ thống. Một biểu mẫu được xây dựng đúng chuẩn HTML5 không chỉ giúp nhập liệu nhanh hơn mà còn giảm lỗi, cải thiện trải nghiệm người dùng và tạo nền tảng vững chắc để tích hợp với PHP, Laravel, Node.js hay bất kỳ công nghệ backend nào.
Trong các bài tiếp theo, chúng ta sẽ tiếp tục tối ưu cấu trúc HTML để website thân thiện hơn với công cụ tìm kiếm và sẵn sàng cho các dự án thực tế.
📌 Kiến thức đạt được
✅ Hiểu cấu trúc của thẻ
form.✅ Phân biệt
GETvàPOST.✅ Sử dụng các loại
inputphổ biến trong HTML5.✅ Áp dụng các thuộc tính kiểm tra dữ liệu như
required,minlength,maxlength,pattern.✅ Biết cách tạo Form theo chuẩn Enterprise.
✅ Nắm được các lỗi phổ biến khi xây dựng biểu mẫu.
➡️ Bài tiếp theo: Bài 03 — SEO Friendly HTML: Xây dựng HTML thân thiện với công cụ tìm kiếm.
Không có nhận xét nào:
Đăng nhận xét