1. Lựa chọn đa dạng và danh sách
Form HTML cung cấp nhiều khả năng để người dùng tương tác với trang web. Ngoài các trường văn bản và nút nhấn, form còn hỗ trợ các thành phần như lựa chọn đa dạng và danh sách, giúp tạo ra giao diện nhập liệu linh hoạt và tiện lợi hơn. Hôm nay mình sẽ giới thiệu các bạn về chúng.
Trong HTML, form cung cấp một vài cách để tạo các thành phần cho phép lựa chọn từ danh sách. Các thành phần thường gặp nhất cho mục đích này là <select> và <option>, cũng như checkbox và radio button.
Danh sách thả xuống: <select> và <option>
Thẻ <select> tạo danh sách thả xuống, còn <option> được sử dụng để thêm các tùy chọn vào danh sách này. Người dùng có thể chọn một hoặc nhiều tùy chọn từ danh sách.
Lựa chọn đơn: Mặc định <select> chỉ cho phép chọn một tùy chọn.
<label for="country">Chọn quốc gia:</label>
<select id="country" name="country">
<option value="ru">Nga</option>
<option value="us">Mỹ</option>
<option value="de">Đức</option>
</select>
<label for="country">Chọn quốc gia:</label>
<select id="country" name="country">
<option value="ru">Nga</option>
<option value="us">Mỹ</option>
<option value="de">Đức</option>
</select>
Lựa chọn đa dạng: Nếu thêm thuộc tính multiple, người dùng có thể chọn nhiều tùy chọn cùng lúc, giữ phím Ctrl (trên Windows) hoặc Cmd (trên Mac) khi nhấn chuột.
<label for="languages">Chọn ngôn ngữ:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Tiếng Nga</option>
<option value="en">Tiếng Anh</option>
<option value="de">Tiếng Đức</option>
</select>
<label for="languages">Chọn ngôn ngữ:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Tiếng Nga</option>
<option value="en">Tiếng Anh</option>
<option value="de">Tiếng Đức</option>
</select>
Trong trường hợp này, dữ liệu từ các phần tử được chọn sẽ được gửi lên server dưới dạng một mảng giá trị.
Check box: <input type="checkbox">
Checkbox là thành phần cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách. Mỗi checkbox được tạo bởi thẻ <input type="checkbox">.
<label><input type="checkbox" name="interests" value="sports"> Thể thao</label>
<label><input type="checkbox" name="interests" value="music"> Âm nhạc</label>
<label><input type="checkbox" name="interests" value="travel"> Du lịch</label>
<label><input type="checkbox" name="interests" value="sports"> Thể thao</label>
<label><input type="checkbox" name="interests" value="music"> Âm nhạc</label>
<label><input type="checkbox" name="interests" value="travel"> Du lịch</label>
Nếu tất cả các checkbox có thuộc tính name giống nhau, thì khi gửi form, dữ liệu từ mỗi checkbox được chọn sẽ được gửi dưới dạng mảng.
Radio Buttons: <input type="radio">
Radio buttons cho phép người dùng chọn một tùy chọn duy nhất trong một nhóm. Các radio buttons có giá trị thuộc tính name giống nhau sẽ được nhóm lại và người dùng chỉ có thể chọn một tùy chọn trong nhóm này.
<p>Chọn giới tính:</p>
<label><input type="radio" name="gender" value="male"> Nam</label>
<label><input type="radio" name="gender" value="female"> Nữ</label>
<p>Chọn giới tính:</p>
<label><input type="radio" name="gender" value="male"> Nam</label>
<label><input type="radio" name="gender" value="female"> Nữ</label>
Radio buttons rất tiện ích để lựa chọn một trong nhiều tùy chọn cố định, ví dụ như "Có" hay "Không", giới tính, nhóm tuổi, v.v.
GO TO FULL VERSION