Menu
- twitter
- facebook
- google
- linkedin
- dribbble
- pinterest
Menu Search
Trang chủ các thẻ trong html option html select html Thẻ option và select trong html, thẻ optgroup.
các thẻ trong html, option html, select html 04:28 A
+ A
- Print Email
Thẻ option và select trong html và cách sử dụng, một số bài tập và ví dụ
Định nghĩa và sử dụng
- Tag <option> định nghĩa một tùy chọn trong danh sách chọn lựa (danh sách thả xuống).
- Tag <option> bên trong thành phần select, định nghĩa giá trị tùy chọn trong danh sách.
- Tag <select> và <option> được thường được đặt trong <form> cho người dùng lựa chọn danh sách.
Cú pháp và thuộc tính
Cách sử dụng:
<option thuoctinh="giá trị"></option>Thuộc tính tùy chọn | Thuộc tính | Giá trị | Ví dụ | Mô tả |
| disabled | disabled | disabled="disabled" | Xác định danh sách thả xuống không hiển thị. |
| label | Text | label="optLabel" | Xác định nhãn cho tùy chọn. |
| selected | selected | selected="selected" | Xác định một tùy chọn được chọn mặc định. |
| value | Text | value="optValue" | Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit). |
==================csss===========
Thuộc tính tổng quát | Thuộc tính | Giá trị | Ví dụ | Mô tả |
| class | Tên class | class="section" | Tên class |
| dir | rtl ltr | dir="rtl" | Xác định hướng văn bản cho các nội dung trong một thành phần. |
| id | Tên id | id="layout" | Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML |
| lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần. |
| style | Kiểu định dạng | style="color: red" | Xác định một định dạng cho một thành phần. |
| title | Text | title="Đây là title" | Xác định thêm thông tin cho thành phần. |
| xml:lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. |
==================csss===========
Thuộc tính sự kiệnKhông được hỗ trợ trong DTD Strict
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
| onclick | Code script | onclick="code" | Script chạy khi click chuột. |
| ondblclick | Code script | ondblclick="code" | Script chạy khi double click chuột. |
| onmousedown | Code script | onmousedown="code" | Script chạy khi button chuột được nhấn. |
| onmousemove | Code script | onmousemove="code" | Script chạy khi di chuyển con trỏ chuột. |
| onmouseout | Code script | onmouseout="code" | Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần. |
| onmouseover | Code script | onmouseover="code" | Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần. |
| onmouseup | Code script | onmouseup="code" | Script chạy khi button chuột được thả ra. |
| onkeydown | Code script | onkeydown="code" | Script chạy khi nút trên bàn phím được nhấn. |
| onkeypress | Code script | onkeypress="code" | Script chạy khi nút trên bàn phím được nhấn và thả ra. |
| onkeyup | Code script | onkeyup="code" | Script chạy khi nút trên bàn phím được thả ra. |
========
Tag <option> và tag <select>
Tag <option> được viết bên trong tag <select>.
Ví dụ 1: Html viết:
<select><option>Danh sách 01</option><option>Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 03</option></select>Trình duyệt hiển thị Danh sách 01Danh sách 02Danh sách 03Danh sách 03
Select - option với thuộc tính name
Đây là thành phần không thể thiếu của các thẻ nằm trong form, trong đó phải kể đến các thẻ input, textarea. Thẻ select cũng vậy, thuộc tính name cho phép JavaScript và các ngôn ngữ lập trình web như PHP lấy được dữ liệu mà người dùng nhập sau khi họ nhấn nút submit. Code mẫu:
Ví dụ 1
<select name="TenDanhSach"><option>Danh sách 01</option><option>Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 04</option></select>Nó hiển thị như sau:Danh sách 01Danh sách 02Danh sách 03Danh sách 04
Ví dụ 2
<select
name="gianha"> <option value="0">Chọn giá nhà bạn muốn mua</option> <option value="34">Từ 300 triệu đến 400 triệu</option> <option value="46">Từ 401 triệu đến 600 triệu</option> <option value="68">Từ 601 triệu đến 800 triệu</option> <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option></select>Nó hiển thị như sau Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng
Select - option với thuộc tính disabled
<select disabled="disabled"><option>Danh sách 01</option><option>Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 04</option></select>Xác định danh sách thả xuống không hiển thị.Danh sách 01Danh sách 02Danh sách 03Danh sách 04
Select - option với thuộc tính multiple
<select
multiple="
multiple"><option>Danh sách 01</option><option>Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 04</option></select>Hiển thị nhiều tùy chọn. Danh sách 01Danh sách 02Danh sách 03Danh sách 04
Select - option với thuộc tính size
Với size, bạn sẽ quy định xem có bao nhiêu lựa chọn được hiển thị ra ngoài.
Ví dụ 1
Như ở trên có 4 giá nhà, và hiển thị ra ngoài ngay cái nhìn đầu tiên chỉ là 1 (khi đã nhấn vào rồi thì sẽ hiện hết). Giờ nếu bạn có 9 lựa chọn và muốn hiển thị ra ngoài 4 lựa chọn. Ví dụ:<select name="gianha" size="4"> <option value="0">Chọn giá nhà bạn muốn mua</option> <option value="34">Từ 300 triệu đến 400 triệu</option> <option value="46">Từ 401 triệu đến 600 triệu</option> <option value="68">Từ 601 triệu đến 800 triệu</option> <option value="812">Từ 801 triệu đến 1.2 tỷ</option> <option value="812">Từ 1.2 tỷ đến 1.5 tỷ</option> <option value="812">Từ 1.5 tỷ triệu đến 2 tỷ</option> <option value="812">Từ 2 tỷ triệu đến 3 tỷ</option> <option value="812">Từ 3 tỷ triệu đến 5 tỷ</option></select> Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ Từ 1.2 tỷ đến 1.5 tỷ Từ 1.5 tỷ triệu đến 2 tỷ Từ 2 tỷ triệu đến 3 tỷ Từ 3 tỷ triệu đến 5 tỷ
Ví dụ 2
<select
size="3"><option>Danh sách 01</option><option>Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 04</option></select>Xác định số tùy chọn có thể thấy trong danh sách lựa chọn ở đây là 3 trong 4 danh sách. Danh sách 01Danh sách 02Danh sách 03Danh sách 04
Option với thuộc tính disabled
Dùng để làm cả danh sách thả xuống hoặc một lựa chọn nào đó không khả dụng, ví dụ:
Ví dụ 1: Thuộc tính disabled dùng chay
<select><option
disabled="disabled">Danh sách 01</option><option>Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 04</option></select>Xác định danh sách thả xuống không hiển thị - Danh sách 01 không được hiển thịDanh sách 01Danh sách 02Danh sách 03Danh sách 04
Ví dụ 2: disabled với thuộc tính khác
Giả dụ các nhà có giá từ 300 - 400 triệu đã hết, bạn sẽ ngăn không cho người dùng chọn giá đó, các nhà có giá khác vẫn select được:<select
name="gianha"> <option value="0">Chọn giá nhà bạn muốn mua</option> <option disabled value="34">Từ 300 triệu đến 400 triệu</option> <option value="46">Từ 401 triệu đến 600 triệu</option> <option value="68">Từ 601 triệu đến 800 triệu</option> <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option></select> Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng
Option với thuộc tính label
<select><option
label="label01">Danh sách 01</option><option
label="label02">Danh sách 02</option><option
label="label03">Danh sách 03</option><option
label="label04">Danh sách 04</option></select>Xác định nhãn cho tùy chon.Danh sách 01Danh sách 02Danh sách 03Danh sách 04
Option với thuộc tính selected
<select><option>Danh sách 01</option><option
selected="selected">Danh sách 02</option><option>Danh sách 03</option><option>Danh sách 04</option></select>Xác định một tùy chọn được chọn mặc định. Ở đây "Danh sách 2" được chọn hiển thị mặc định đầu tiênDanh sách 01Danh sách 02Danh sách 03Danh sách 04
Option với thuộc tính value
<select><option
value="value01">Danh sách 01</option><option
value="value02">Danh sách 02</option><option
value="value03">Danh sách 03</option><option
value="value04">Danh sách 04</option></select>Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit). Danh sách 01Danh sách 02Danh sách 03Danh sách 04
Nhóm các lựa chọn liên quan bằng optgroup
Nếu bạn có một danh sách khá dài các chọn lựa, bạn có thể muốn nhóm các chọn lựa lại với nhau để người dùng dễ dàng quan sát và thao tác. Ta dùng thẻ optgroup.<select name="gianha"><optgroup label="Dưới 500 triệu"><option value="499">499 triệu - 60m2</option><option value="350">350 triệu - 40m2</option><option value="250">250 triệu - 25m2</option></optgroup><optgroup label="Trên 500 triệu"><option value="700">700 triệu - 85m2</option><option value="900">350 triệu - 100m2</option><option value="1200">1.2 tỷ - 150m2</option></optgroup></select>Kết quả như sau: Nhấn vào hộp để thấy 499 triệu - 60m2350 triệu - 40m2250 triệu - 25m2 700 triệu - 85m2350 triệu - 100m21.2 tỷ - 150m2 Người đăng:
Unknown Google Account Video Purchases Hà Noi, Hoàn Kiếm, Hà Nội, Việt Nam
Share to: Next
Bài đăng Mới hơn
Previous
Bài đăng Cũ hơn
aprieztmkrdezign 218168578325095
Unknownlúc 21:16 22 tháng 8, 2016Đơn vị chuyên nhận order đặt mua hàng phụ kiện thời trangCông ty chuyên nhận order đặt mua hàng thời trang ở Quảng ChâuCông ty chuyên nhận order đặt mua hàng quần áo ở Quảng Châu
Trả lờiXóaTrả lờiTrả lời
Thêm nhận xétTải thêm... Đăng ký: Đăng Nhận xét (Atom)
Giới thiệu về tôi
Unknown Xem hồ sơ hoàn chỉnh của tôi
Lưu trữ Blog
- ▼ 2015 (52)
- ▼ tháng 10 (9)
- Gần hoàn thiện đã có tất cả các trường hợp
- Câu lệnh có sử dụng button
- Hoàn thành
- tet
- Trình menu thả xuống đơn giản với thẻ option
- Thẻ option và select trong html, thẻ optgroup.
- Sử dụng hàm if trong excel để viết cấu hình electr...
- Chương 2: Nghiên cứu về hệ nguyên tử nhiều Electro...
- Thế nào là chất thuận từ và chất nghịch từ?
Top
Unknown