:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 หน่วยที่ 6 การสร้างตาราง
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบก่อนเรียน
แบบฟอร์มป้อนข้อมูล
การสร้างฟอร์มชนิด Text Box
 การสร้างฟอร์มชนิด password
 การสร้างฟอร์มชนิด Check Box
 การสร้างฟอร์มชนิด Radio Button
 การสร้างฟอร์มชนิดแนบ File
 การสร้างฟอร์มชนิด Text Area
 การสร้างฟอร์มชนิด Selection Box
 การสร้างปุ่มชนิด reset และ submit
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 9 การสร้างฟอร์ม
การสร้างฟอร์มชนิดแนบ Selection Box


   การสร้าง Selection Box หรือ Drop Down List หรือ  List Box คือการรับข้อมูลจาก List  รายการที่มีให้เลือกโดยสามารถ
เลือกได้เพียงแค่หนึ่งรายการ จะใช้กรณีที่มีรายการให้เลือกมาก ๆ เช่น วันที่ เดือน ปี พ.ศ. เป็นต้น 

Tag
ชื่อแท็ก select
ตำแหน่งแท็ก อยู่ภายในแท็ก <form>...</form> 
รูปแบบการใช้แท็ก <select name="ชื่อช่องกรอกข้อมูล" size="value">
.....
</select>
แอตทริบิวต์ name  ชื่อช่องกรอกข้อมูล
size จำนวนตัวเลือกที่แสดง
ค่า value ตัวเลข 1,2,3


ตัวอย่างการใช้งาน
<body>
<form name="select">
<b>กรุณาเลือกเดือนเกิดของท่าน</b><br>
<selection name="month" size="1">

 

</selection>
</form>

</body>

การแสดงผล

กรุณาเลือกเดือนเกิดของท่าน

 

จากตัวอย่างจะเห็นได้ว่า จะยังไม่มีตัวเลือกจะต้องทำการกำหนดตัวเลือกให้กับ Selection ด้วยแท็ก Option

 

การกำหนดตัวเลือกให้กับ Selection ด้วย Option

ในการใช้งาน Selection จะต้องมีการกำหนดตัวเลือก ด้วย option และมีการกำหนดค่าของตัวเลือกด้วยดังต่อไปนี้

Tag
ชื่อแท็ก option
ตำแหน่งแท็ก อยู่ภายในแท็ก <select>...</select> 
รูปแบบการใช้แท็ก <select name="ชื่อช่องกรอกข้อมูล" size="value">
<option value="value">ข้อความ
</select>
แอตทริบิวต์ value  ค่าของประจำตัวเลือก
ค่า value ตัวเลข 1,2,3


ตัวอย่างการใช้งาน
<body>
<form name="select">
<b>กรุณาเลือกวันเกิดของท่าน</b><br>

<select name="month" size="1">

<option value="1">วันอาทิตย์<br>
<option value="2">วันจันทร์<br>
<option value="3">วันอังคาร<br>
<option value="4">วันพุธ<br>
<option value="5">วันพฤหัสบดี<br>
<option value="6">วันศุกร์<br>
<option value="7">วันเสาร์<br>

</select>
</form>

</body>


การแสดงผล

กรุณาเลือกวันเกิดของท่าน

 

เมื่อกำหนดตัวเลือกด้วย option ก็จะสามารถเลือกตัวเลือกได้ เราสามารถใส่ตัวเลือกได้ตามที่ต้องการ หรือตามหัวข้อที่เราออกแบบ

 



วีดีโอ