Các thẻ hỗ trợ nhập liệu & danh sách chọn trong HTML
Ngoài các thẻ <input>, HTML còn cung cấp những thẻ khác giúp người dùng nhập dữ liệu một cách thuận tiện hơn.
-
<textarea>: Dùng để nhập văn bản dài, như bình luận hoặc mô tả. -
<select>và<option>: Dùng để tạo danh sách chọn, giúp lựa chọn một hoặc nhiều giá trị. -
<optgroup>: Nhóm các tùy chọn trong danh sách chọn, giúp tổ chức dữ liệu tốt hơn.
Bài học này sẽ giúp bạn hiểu cách sử dụng những thẻ này và áp dụng vào việc xây dựng biểu mẫu nhập liệu hiệu quả hơn.
1. Các thẻ hỗ trợ nhập liệu & danh sách chọn
Thẻ <textarea> – Nhập văn bản dài
Thẻ <textarea> cho phép người dùng nhập nội dung dài hơn, thường được dùng cho bình luận, ghi chú hoặc mô tả.
Ví dụ:
<label for="message">Nhập tin nhắn:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Nhập nội dung..."></textarea>
Các thuộc tính quan trọng:
-
rows: Số hàng hiển thị. -
cols: Số cột hiển thị (có thể thay bằng CSSwidth). -
placeholder: Văn bản gợi ý cho người dùng.
Thẻ <select> và <option> – Tạo danh sách chọn
Thẻ <select> tạo danh sách chọn, trong đó mỗi mục được xác định bằng <option>.
Ví dụ:
<label for="country">Chọn quốc gia:</label>
<select id="country" name="country">
<option value="vn">Việt Nam</option>
<option value="us">Hoa Kỳ</option>
<option value="uk">Anh</option>
<option value="jp">Nhật Bản</option>
</select>
Các thuộc tính quan trọng:
-
value: Giá trị được gửi đi khi chọn. -
selected: Mặc định chọn mục này.
Nhóm tùy chọn với <optgroup>
Thẻ <optgroup> giúp nhóm các tùy chọn trong <select> để dễ đọc hơn.
Ví dụ:
<label for="city">Chọn thành phố:</label>
<select id="city" name="city">
<optgroup label="Việt Nam">
<option value="hanoi">Hà Nội</option>
<option value="hcm">TP. Hồ Chí Minh</option>
</optgroup>
<optgroup label="Mỹ">
<option value="ny">New York</option>
<option value="la">Los Angeles</option>
</optgroup>
</select>
Lợi ích:
- Giúp danh sách dài dễ đọc hơn.
- Nhóm các mục liên quan lại với nhau.
2. Thực hành: Tạo biểu mẫu có danh sách chọn và nhập văn bản
Chúng ta sẽ tạo một biểu mẫu bao gồm:
- Nhập tên.
- Chọn quốc gia từ danh sách
<select>. - Nhập nội dung trong
<textarea>. - 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 nhập liệu</title>
</head>
<body>
<h2>Biểu mẫu thông tin</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="country">Quốc gia:</label>
<select id="country" name="country">
<option value="vn">Việt Nam</option>
<option value="us">Hoa Kỳ</option>
<option value="uk">Anh</option>
<option value="jp">Nhật Bản</option>
</select>
<br><br>
<label for="message">Nhập nội dung:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Nhập nội dung..."></textarea>
<br><br>
<button type="submit">Gửi</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 <textarea> để nhập văn bản dài và <select> để tạo danh sách chọn. Đây là những công cụ quan trọng giúp cải thiện trải nghiệm người dùng khi điền vào biểu mẫu.
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