Thẻ <input> trong HTML là một trong những thành phần cơ bản và quan trọng nhất trong các biểu mẫu web. Nó cho phép người dùng nhập dữ liệu vào trang web. Thẻ <input> có rất nhiều thuộc tính và kiểu khác nhau, làm cho nó rất linh hoạt và có thể được sử dụng trong nhiều tình huống khác nhau.
1. Cấu trúc cơ bản của thẻ <input>
Thẻ <input> là một thẻ tự đóng, nghĩa là nó không có thẻ đóng như <div> hay <p>. Cấu trúc cơ bản của thẻ <input> như sau:
<input type="text" name="username" value="John Doe">Trong ví dụ trên:
type xác định loại dữ liệu mà người dùng sẽ nhập.
name là tên của trường nhập liệu, thường được sử dụng để gửi dữ liệu khi biểu mẫu được gửi đi.
value chỉ định giá trị mặc định của trường nhập liệu.
2. Các loại thuộc tính của thẻ <input>
Thẻ <input> hỗ trợ nhiều loại thuộc tính khác nhau. Dưới đây là một số loại thuộc tính phổ biến:
type: Xác định kiểu dữ liệu của trường nhập liệu. Một số giá trị phổ biến bao gồm:
text: Trường nhập liệu đơn giản cho văn bản.
password: Trường nhập liệu cho mật khẩu, văn bản nhập vào sẽ được ẩn.
email: Trường nhập liệu cho địa chỉ email.
number: Trường nhập liệu cho số.
date: Trường nhập liệu cho ngày tháng.
checkbox: Trường nhập liệu cho các tùy chọn chọn hoặc không chọn.
radio: Trường nhập liệu cho các tùy chọn duy nhất trong nhóm.
submit: Nút để gửi biểu mẫu.
button: Nút tùy chỉnh.
file: Trường nhập liệu cho việc tải lên tệp.
name: Tên của trường nhập liệu, quan trọng để nhận diện dữ liệu khi gửi biểu mẫu.
value: Giá trị mặc định của trường nhập liệu. Khi người dùng nhập vào hoặc chọn một giá trị khác, giá trị này sẽ được thay đổi.
placeholder: Văn bản hiển thị trong trường nhập liệu khi nó còn trống, giúp hướng dẫn người dùng nhập dữ liệu.
required: Thuộc tính này xác định rằng người dùng phải nhập dữ liệu vào trường đó trước khi gửi biểu mẫu.
maxlength: Xác định số ký tự tối đa mà người dùng có thể nhập vào trường.
pattern: Xác định biểu thức chính quy mà dữ liệu nhập vào phải khớp với nó.
disabled: Chỉ định rằng trường nhập liệu không thể tương tác hoặc chỉnh sửa.
3. Ví dụ minh họa
Dưới đây là một ví dụ thực tế sử dụng nhiều loại thuộc tính của thẻ <input>:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<button type="submit">Submit</button>
</form>Trong ví dụ trên:
Các trường nhập liệu username, password, và email yêu cầu người dùng nhập thông tin trước khi gửi biểu mẫu.
Trường birthdate cho phép người dùng chọn một ngày.
Checkbox newsletter cho phép người dùng chọn tham gia nhận bản tin.
4. Tóm tắt
Thẻ <input> trong HTML là một thành phần rất linh hoạt và mạnh mẽ trong việc thu thập dữ liệu từ người dùng. Việc hiểu rõ các thuộc tính và kiểu dữ liệu của thẻ <input> sẽ giúp bạn tạo ra các biểu mẫu hiệu quả và dễ sử dụng trên trang web của mình. Với các thuộc tính như type, name, value, và placeholder, bạn có thể tùy chỉnh cách thức người dùng nhập liệu và đảm bảo dữ liệu thu thập được chính xác và đầy đủ.
Kết nối với web designer Lê Thành Nam
