Trình menu thả xuống đơn giản với thẻ option

Ta sử dụng mã sau:<br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><form><br /><select name="menu"      onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>      <option value=0 selected> Tiêu đề do bạn ghi! </option><br /><br />   <option value=" Đường link mà bạn muốn dẫn tới"> Text link</option><br /></select><br /></form></div><br />Nó hiển thị như sau: <br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1"><option selected="" value="0"> Tiêu đề do bạn ghi! </option><option value="http://www.hoahocnc.com"> Text link </option> </select></form></div><br />Chú thích:<br />- Size="1" : Chỉ có 1 lựa chọn đầu tiên được hiển thị.<br />- Size="n": Cho hiển thị n lựa chọn đầu tiên.<br />- Câu lệnh: <b><option value=0 <span style="color: blue;">selected</span>> Tiêu đề do bạn ghi! </option></b><br />+ Giá trị: <b><i>value=0</i></b> tức không có giá trị nào biểu thị đoạn text "<b>Tiêu đề do bạn ghi!</b> ", nói cách khác, đoạn text trên khi nhấn vào nó sẽ không hiện "link".<br />+ Thẻ: <b>selected </b>biểu thị, đoạn text trên được chọn để hiển thị.<br />- Câu lệnh: <span style="color: blue;"><option value=" Đường link mà bạn muốn dẫn tới"> Text link</option></span><br />Biểu thị khi nhấn vào đoạn "<b>text link</b>" link sẽ được hiển thị. <span style="background-color: #f5fefd;"><br /></span>Ví dụ 1: Chỉ cho 1 đường link.<br /><br />Ta sử dụng mã sau:<br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><form><br /><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><br /><br /><option value=0 selected>Nhấn vào trang chủ! </option><br /><br /><option value="<span style="color: blue;">http://www.hoahocnc.com/</span>">Trang chủ</option> </select><br /></form></div><div style="background: rgb(245, 254, 253); border: 1px solid rgb(56, 200, 252); padding: 14px; width: 620.344px;"><br /></div>Nó sẽ hiển thị như sau: <br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1"><option selected="" value="0">Nhấn vào trang chủ! </option> <option value="http://www.hoahocnc.com/">Trang chủ</option> </select></form></div><br />Khi bạn chọn " Home12" , url <span style="background-color: #f5fefd;">"www.hoahocnc.com" sẽ được hiển thị trên tap mới.</span><br />==<br />Ví dụ 2: Cho nhiều đường link<br />Việc đưa ra nhiều đường link, chỉ việc nhân số code sau lên:<br /> <span style="background-color: #f5fefd;"><option value=" <b>Đường link mà bạn muốn dẫn tới"</b>> <span style="color: blue;"><b>Text link</b></span></option></span><br /><div><br /></div>Ở ví dụ dưới: Câu lệnh: <span style="color: blue;"><option value=0 selected <b>disabled </b> >Nhấn vào trang chủ! </option></span><br /><div>Thuộc tính: Disabled đã ẩn đoạn text "<span style="color: blue;">Nhấn vào trang chủ!</span><span style="color: blue;"> "</span> không cho bạn click vào.</div><div><br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><form><br /><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><br /><br /><option value=0 selected disabled  >Nhấn vào trang chủ! </option><br /><br /><span style="color: blue;"><option value="http://www.hoahocnc.com/">Trang chủ</option> </span><br /><span style="color: blue;"><option value="http://www.hoahocnc.com/">Trang chủ1</option></span><br /><span style="color: blue;"><option value="http://www.hoahocnc.com/">Trang chủ2</option></span><br /><span style="color: blue;"><option value="http://www.hoahocnc.com/">Trang chủ3</option></span><br /></select><br /></form></div><br />Và đây là kết quả <br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1"> <option disabled="" selected="" value="0">Nhấn vào trang chủ! </option> <option value="http://www.hoahocnc.com/">Trang chủ</option> <option value="http://www.hoahocnc.com/">Trang chủ1</option><option value="http://www.hoahocnc.com/">Trang chủ2</option><option value="http://www.hoahocnc.com/">Trang chủ3</option></select></form></div></div>

Trình menu thả xuống đơn giản với thẻ option

Ta sử dụng mã sau: <form> <select name="menu"      onchange="window.open(this.options[this.selectedIndex].value,...

Đọc thêm »

Thẻ option và select trong html, thẻ optgroup.

<style>.chemistry01 {border:#38C8FC 1px solid; padding: 14px; background:#F5FEFD; width:95%;} </style> <br /><h2>Thẻ option và select trong html và cách sử dụng, một số bài tập và ví dụ</h2><div><a name='more'></a><h3>Định nghĩa và sử dụng</h3></div><div><ul><li>Tag <b><option></b> định nghĩa một tùy chọn trong danh sách chọn lựa (danh sách thả xuống).</li><li>Tag <b><option></b> bên trong thành phần <b>select</b>, định nghĩa giá trị tùy chọn trong danh sách.</li><li>Tag <b><select> </b>và <b><option></b> được thường được đặt trong <b><form></b> cho người dùng lựa chọn danh sách.</li></ul><div><h3>Cú pháp và thuộc tính</h3></div></div><div>Cách sử dụng: <b><span style="color: blue;"><option thuoctinh="giá trị"></option></span></b></div><div><b><span style="color: blue;"><br /></span></b></div><div><b><span style="color: red;">Thuộc tính tùy chọn</span></b></div><div><b><br /></b></div><div class="csstablesimple"><table> <tbody><tr> <td>Thuộc tính </td> <td>Giá trị </td> <td>Ví dụ </td> <td>Mô tả </td> </tr><tr> <td>disabled </td> <td>disabled </td> <td>disabled="disabled" </td><td>Xác định danh sách thả xuống không hiển thị. </td> </tr><tr> <td>label </td> <td>Text </td> <td>label="optLabel" </td><td>Xác định nhãn cho tùy chọn. </td> </tr><tr> <td><b>selected </b></td> <td>selected </td> <td>selected="selected" </td><td>Xác định một tùy chọn được chọn mặc định. </td> </tr><tr> <td><b>value </b></td><td>Text </td> <td>value="optValue" </td> <td>Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit). </td> </tr></tbody></table></div>==================csss=========== <br /><b><span style="color: red;">Thuộc tính tổng quát </span></b><br /><br /><div class="csstablesimple"><table> <tbody><tr> <td>Thuộc tính </td> <td>Giá trị </td> <td>Ví dụ </td><td>Mô tả </td> </tr><tr> <td><b>class </b></td> <td>Tên class </td> <td>class="section" </td><td>Tên class </td> </tr><tr> <td>dir </td> <td>rtl ltr </td> <td>dir="rtl" </td><td>Xác định hướng văn bản cho các nội dung trong một thành phần. </td> </tr><tr> <td><b>id </b></td> <td>Tên id </td> <td>id="layout" </td> <td>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 </td> </tr><tr> <td>lang </td> <td>Mã ngôn ngữ </td> <td>lang="vi" </td><td>Xác định mã ngôn ngữ cho nội dung trong một thành phần. </td> </tr><tr> <td><b>style </b></td> <td>Kiểu định dạng </td> <td>style="color: red" </td><td>Xác định một định dạng cho một thành phần. </td> </tr><tr> <td>title </td> <td>Text </td> <td>title="Đây là title" </td><td>Xác định thêm thông tin cho thành phần. </td> </tr><tr> <td>xml:lang </td> <td>Mã ngôn ngữ </td> <td>lang="vi" </td><td>Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. </td> </tr></tbody></table></div><br />==================csss=========== <br /><br /><span style="color: red;"><b>Thuộc tính sự kiện</b></span><br />Không được hỗ trợ trong DTD Strict <br /><br /><div class="csstablesimple"><table> <tbody><tr> <td>Thuộc tính </td> <td>Giá trị </td> <td>Ví dụ </td><td>Mô tả </td> </tr><tr> <td>onclick </td> <td>Code script </td> <td>onclick="code" </td><td>Script chạy khi click chuột. </td> </tr><tr> <td>ondblclick </td> <td>Code script </td> <td>ondblclick="code" </td><td>Script chạy khi double click chuột. </td> </tr><tr> <td>onmousedown </td> <td>Code script </td> <td>onmousedown="code" </td> <td>Script chạy khi button chuột được nhấn. </td> </tr><tr> <td>onmousemove </td> <td>Code script </td> <td>onmousemove="code" </td><td>Script chạy khi di chuyển con trỏ chuột. </td> </tr><tr> <td>onmouseout </td> <td>Code script </td> <td>onmouseout="code" </td><td>Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần. </td> </tr><tr> <td>onmouseover </td> <td>Code script </td> <td>onmouseover="code" </td><td>Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần. </td> </tr><tr> <td>onmouseup </td> <td>Code script </td> <td>onmouseup="code" </td><td>Script chạy khi button chuột được thả ra. </td> </tr><tr> <td>onkeydown </td> <td>Code script </td> <td>onkeydown="code" </td><td>Script chạy khi nút trên bàn phím được nhấn. </td> </tr><tr> <td>onkeypress </td> <td>Code script </td> <td>onkeypress="code" </td><td>Script chạy khi nút trên bàn phím được nhấn và thả ra. </td> </tr><tr> <td>onkeyup </td> <td>Code script </td> <td>onkeyup="code" </td><td>Script chạy khi nút trên bàn phím được thả ra. </td> </tr></tbody></table></div><br />========<br /><h3>Tag <option>  và tag <select></h3><div>Tag <option> được viết bên trong tag <select>.</div><h4>Ví dụ 1: Html viết:</h4><div class="chemistry01"><b><select></b><br /><option>Danh sách 01</option><br /><option>Danh sách 02</option><br /><option>Danh sách 03</option><br /><option>Danh sách 03</option><br /><b></select></b></div><br />Trình duyệt hiển thị <br /><div class="chemistry01"><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></div><h3>Select - option với thuộc tính name</h3>Đâ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ẻ <a href="http://www.mangluoitoancau.com/2013/11/cac-input-thuong-dung-trong-html.html" rel="nofollow" target="_blank">input</a>, 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:<br /><h4>Ví dụ 1</h4><div class="chemistry01"><select name="TenDanhSach"><br /><option>Danh sách 01</option><br /><option>Danh sách 02</option><br /><option>Danh sách 03</option><br /><option>Danh sách 04</option><br /></select></div><br />Nó hiển thị như sau:<br /><div class="chemistry01"><select><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></div><h4>Ví dụ 2</h4><div class="chemistry01"><select <span style="color: blue;">name</span>="gianha"><br />   <option value="0">Chọn giá nhà bạn muốn mua</option><br />   <option value="34">Từ 300 triệu đến 400 triệu</option><br />   <option value="46">Từ 401 triệu đến 600 triệu</option><br />   <option value="68">Từ 601 triệu đến 800 triệu</option><br />   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option><br /></select></div><br />Nó hiển thị như sau <br /><div class="chemistry01"><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></div><h3>Select - option với thuộc tính disabled</h3><div class="chemistry01"><span style="background-color: #ecf9f9;"><select </span><span class="blue" style="background-color: #ecf9f9; color: #1a5eba;">disabled="disabled"</span><span style="background-color: #ecf9f9;">></span><br /><span style="background-color: #ecf9f9;"><option>Danh sách 01</option></span><br /><span style="background-color: #ecf9f9;"><option>Danh sách 02</option></span><br /><span style="background-color: #ecf9f9;"><option>Danh sách 03</option></span><br /><span style="background-color: #ecf9f9;"><option>Danh sách 04</option></span><br /><span style="background-color: #ecf9f9;"></select></span></div><br />Xác định danh sách thả xuống không hiển thị.<br /><br /><div class="chemistry01"><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></div><h3>Select - option với thuộc tính multiple </h3><div class="chemistry01"><select <span style="color: blue;">multiple</span>="<span style="color: blue;">multiple</span>"><br /><option>Danh sách 01</option><br /><option>Danh sách 02</option><br /><option>Danh sách 03</option><br /><option>Danh sách 04</option><br /></select></div><br />Hiển thị nhiều tùy chọn. <br /><div class="chemistry01"><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></div><h3>Select - option với thuộc tính size </h3><div>Với size, bạn sẽ quy định xem có bao nhiêu lựa chọn được hiển thị ra ngoài. </div><h4>Ví dụ 1</h4><div>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ụ:</div><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><select name="gianha" <b>size="4"</b>><br />   <option value="0">Chọn giá nhà bạn muốn mua</option><br />   <option value="34">Từ 300 triệu đến 400 triệu</option><br />   <option value="46">Từ 401 triệu đến 600 triệu</option><br />   <option value="68">Từ 601 triệu đến 800 triệu</option><br />   <option value="812">Từ 801 triệu đến 1.2 tỷ</option><br />   <option value="812">Từ 1.2 tỷ đến 1.5 tỷ</option><br />   <option value="812">Từ 1.5 tỷ triệu đến 2 tỷ</option><br />   <option value="812">Từ 2 tỷ triệu đến 3 tỷ</option><br />   <option value="812">Từ 3 tỷ triệu đến 5 tỷ</option><br /></select></div><div><br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><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></div><h4>Ví dụ 2</h4></div><div class="chemistry01"><select <span style="color: blue;">size="3"</span>><br /><option>Danh sách 01</option><br /><option>Danh sách 02</option><br /><option>Danh sách 03</option><br /><option>Danh sách 04</option><br /></select></div><br />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. <br /><div class="chemistry01"><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></div><h3>Option với thuộc tính disabled </h3><div>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ụ:</div><h4>Ví dụ 1: Thuộc tính disabled dùng chay</h4><div class="chemistry01"><select><br /><option <span style="color: blue;">disabled="disabled"</span>>Danh sách 01</option><br /><option>Danh sách 02</option><br /><option>Danh sách 03</option><br /><option>Danh sách 04</option><br /></select></div><br />Xác định danh sách thả xuống không hiển thị - Danh sách 01 không được hiển thị<br /><div class="chemistry01"><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></div><h4>Ví dụ 2: disabled với thuộc tính khác</h4><div>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:</div><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><select <span style="color: blue;">name</span>="gianha"><br />   <option value="0">Chọn giá nhà bạn muốn mua</option><br />   <option <b>disabled</b> value="34">Từ 300 triệu đến 400 triệu</option><br />   <option value="46">Từ 401 triệu đến 600 triệu</option><br />   <option value="68">Từ 601 triệu đến 800 triệu</option><br />   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option><br /></select></div><br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><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></div><br /><h3>Option với thuộc tính label </h3><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><select><br /><option <span style="color: blue;">label="label01"</span>>Danh sách 01</option><br /><option <span style="color: blue;">label="label02"</span>>Danh sách 02</option><br /><option<span style="color: blue;"> label="label03</span>">Danh sách 03</option><br /><option <span style="color: blue;">label="label04</span>">Danh sách 04</option><br /></select></div><br />Xác định nhãn cho tùy chon.<br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><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></div><h3>Option với thuộc tính selected</h3><div><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><select><br /><option>Danh sách 01</option><br /><option <span style="color: blue;">selected="selected"</span>>Danh sách 02</option><br /><option>Danh sách 03</option><br /><option>Danh sách 04</option><br /></select></div></div><div><br />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ên</div><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><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></div><h3>Option với thuộc tính value</h3><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><select><br /><option <span style="color: blue;">value="value01"</span>>Danh sách 01</option><br /><option <span style="color: blue;">value="value02</span>">Danh sách 02</option><br /><option <span style="color: blue;">value="value03"</span>>Danh sách 03</option><br /><option <span style="color: blue;">value="value04</span>">Danh sách 04</option><br /></select></div><br />Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit). <br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><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></div><h3>Nhóm các lựa chọn liên quan bằng optgroup</h3>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ẻ <b>optgroup</b>.<br /><br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><select name="gianha"><br /><<b>optgroup</b> label="Dưới 500 triệu"><br /><option value="499">499 triệu - 60m2</option><br /><option value="350">350 triệu - 40m2</option><br /><option value="250">250 triệu - 25m2</option><br /></<b>optgroup</b>><br /><br /><<b>optgroup </b>label="Trên 500 triệu"><br /><option value="700">700 triệu - 85m2</option><br /><option value="900">350 triệu - 100m2</option><br /><option value="1200">1.2 tỷ - 150m2</option><br /></<b>optgroup</b>><br /></select></div><br />Kết quả như sau: Nhấn vào hộp để thấy <br /><div style="background: #F5FEFD; border: #38C8FC 1px solid; padding: 14px; width: 95%;"><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></div><br />

Thẻ option và select trong html, thẻ optgroup.

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 ...

Đọc thêm »