Khi làm website bằng HTML, đặc biệt là sau này bạn học lên các ngôn ngữ phía máy chủ như PHP hay Python thì việc sử dụng form nhập liệu rất phổ biến như tạo form đăng nhập, form đăng dữ liệu lên website,…nếu nên
Ở dạng HTML, để tạo biểu mẫu, chúng ta sẽ sử dụng cặp thẻ
, thẻ này sẽ chứa một số thuộc tính quan trọng và nội dung bên trong cặp thẻ đó là thẻ để khai báo các trường nhập liệu. Trước hết hãy xem qua một mẫu đăng nhập bằng HTML bên dưới đây
Xem Bút qEGdOQ của Thạch Phạm [@thachpham92] trên CodePen
Các thuộc tính trong thẻ
action
. Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng nhấn nút gửi dữ liệumethod
. Phương thức gửi dữ liệuname
. Tên của biểu mẫu
Hiện tại nếu bạn đang học HTML thì không cần quan tâm đến ba thuộc tính vì nó thuộc thẩm quyền xử lý các ngôn ngữ phía máy chủ, nhưng bạn chỉ cần nhớ khi tạo biểu mẫu thì hãy nhớ khai báo các thuộc tính đó là được.
Các thuộc tính trong thẻ
Thẻ này sẽ đại diện cho các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau. Tuy nhiên, kiểu dữ liệu của mỗi thẻ sẽ khác nhau dựa trên thuộc tính type
bên trong nó vì hiện tại HTML đang hỗ trợ cho 23 kiểu dữ liệu, tương ứng với 23 giá trị của thuộc tính type
Danh sách các giá trị của thuộc tính type
- cái nút
- hộp kiểm
- màu sắc
- ngày
- ngày giờ
- datetime-local
- tập tin
- ẩn giấu
- hình ảnh
- tháng
- con số
- mật khẩu mở khóa
- Đài
- phạm vi
- cài lại
- Tìm kiếm
- Gửi đi
- điện thoại
- chữ
- thời gian
- url
- tuần
Thay vì giải thích thì bạn nên tự tay thử từng loại để biết chức năng của nó là gì nhé, chỉ cần thay giá trị của thuộc tính type
tương ứng với danh sách trên thôi. Tuy nhiên, bạn sẽ sử dụng nhiều nhất là kiểu 1 [trường nhập dữ liệu ở dạng chữ và số],
2 [trường nhập mật khẩu, nó sẽ tự mã hóa mật khẩu nhập bằng ký tự *],
3 [trường tạo nút gửi
Xem thêm về các thuộc tính của thẻ
Chỉ vậy thôi, bây giờ bạn chỉ cần nhớ về cách tạo biểu mẫu trong HTML là được, còn khi nào quên thì có thể lên mạng tham khảo tại trang W3Schools nhé
Phụ thuộc vào sự hỗ trợ của trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến
Phụ thuộc vào sự hỗ trợ của trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến. use for input data start to input format text [one lines]
Ví dụ 21
User name:
User password:
Các kí tự trong trường password được ẩn đi [nó được mã hóa hiển thị thành hình sao hoặc các chấm tròn].
Điện thoại
Kiểu Nhập. url
Mật khẩu người dùng.
Phụ thuộc vào sự hỗ trợ của trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến
Một số điện thoại thông minh nhận kiểu đầu vào url và bổ sung thêm “. com” vào bàn phím để phù hợp với địa chỉ đầu vào url