บทเรียนออนไลน์
รับทำเว็บไซต์
ร้านค้าออนไลน์
สมาชิก
ออนไลน์
HTML - Listbox และ Drop Down |
|
Written by admin
Friday, 27 August 2010 22:20
|
|
ตัวอย่าง โค้ดโปรแกรมภาษา HTML การใส่ tag html แบบให้เลือก และรูปแบบตััวเลือก ข้อแตกต่างระหว่าง Listbox และ Drop Down คือ size=”?” ถ้า size=”1” หรือไม่มีเขียนบอกไว้ จะหมายถึง Drop Down ซึ่งจะแสดงขนาดเท่ากับ 1 แถวเท่านั้น แต่ถ้า size > 1 เช่น size=”2” หรือ size=”3” จะหมายถึง Listbox ซึ่งจะแสดงขนาดข้อมูลให้เลือกซึ่งมีความกว้างตามขนาดของ size เช่น size=”2” จะแสดงความยาวของข้อมูลเท่ากับจำนวน size ที่กำหนดมา
ในกรณีที่ size > 1 เมื่อเขียน multiple ไว้ด้วย จะหมายถึง สามารถเลือกได้หลาย ๆ ตัวเลือกโดยการกดปุ่ม shift ค้างไว้แล้วเลือกตัวเลือกตามต้องการ หากไม่มี multiple จะมีความหมายว่า สามารถเลือกได้ตัวเลือกเดียวเท่านั้น
ดังตัวอย่างข้างล่างนี้ สามารถทดสอบตาม Coding ข้างล่าง แล้วลองเปลี่ยนค่าดู จะเห็นความแตกต่างได้ชัดเจนขึ้น
Code: <table> <tr valign="top"> <td>ลิสต์บ็อกซ์แบบเลือกได้รายการเดียว<br> <select name="list1" size="4"> <option value="val1">ตัวเลือกที่ 1</option> <option value="val2">ตัวเลือกที่ 2</option> <option value="val3">ตัวเลือกที่ 3</option> <option value="val4">ตัวเลือกที่ 4</option> <option value="val5">ตัวเลือกที่ 5</option> </select> </td> <td>ลิสต์บ็อกซ์แบบเลือกได้หลายรายการ<br> <select name="list2" size="4" multiple> <option value="val1">ตัวเลือกที่ 1</option> <option value="val2">ตัวเลือกที่ 2</option> <option value="val3">ตัวเลือกที่ 3</option> <option value="val4">ตัวเลือกที่ 4</option> <option value="val5">ตัวเลือกที่ 5</option> </select> </td> <td>ลิสต์บ็อกซ์แบบ drop-down<br> <select name="list3" size="1"> <option value="val1">ตัวเลือกที่ 1</option> <option value="val2">ตัวเลือกที่ 2</option> <option value="val3">ตัวเลือกที่ 3</option> <option value="val4">ตัวเลือกที่ 4</option> <option value="val5">ตัวเลือกที่ 5</option> </select> </td> </tr> </table>
|
บทเรียน HTML HTML - Listbox และ Drop Down