หน่วยที่ 7

การสร้างเฟรมและฟอร์ม

ผลการเรียนรู้

ปฏิบัติการสร้างเฟรมและฟอร์มเพื่อบันทึกข้อมูลบนเว็บเพจได้

จุดประสงค์

- อธิบายคำสั่งและวิธีการสร้างเฟรมได้

- เขียนเว็บเพจเพื่อสร้างเฟรมได้

- อธิบายคำสั่งและการสร้างฟอร์มเพื่อกรอกข้อมูลบนเว็บเพจได้

- ปฏิบัติการสร้างฟอร์มเพื่อกรอกข้อมูลบนเว็บเพจแบบต่าง ๆ ได้

การสร้างเฟรม

การสร้างเฟรม เป็นการแบ่งจอภาพออกเป็นส่วน ๆ สามารถนำพื้นที่ทั้งหมดของจอภาพ มาใช้งานได้อย่างเต็มที่ ทั้งนี้เพราะการใช้เฟรม จะมีการเรียกไฟล์ HTML ขึ้นมาพร้อม ๆ กันหลายไฟล์ทำให้ประหยัดเวลาในการค้นหาข้อมูล ดังนั้น

เฟรม คือ ส่วนของเว็บเพจที่ถูกแบ่งโดยในแต่ละเฟรมสามารถแสดงไฟล์ HTML หรือเว็บเพจที่แตกต่างกันได้ การแสดงข้อมูลในเฟรมนั้นถ้าข้อมูลที่อยู่ในเฟรมมีจำนวนมากแต่เฟรมมี ขนาดเล็ก ไม่สามารถมองเห็นได้ทั้งหมด บราวเซอร์จะสร้างแถบเลื่อนให้โดยอัตโนมัติ ทำให้ผู้ใช้สามารถเลื่อนดูข้อมูลที่เหลือได้

1. คำสั่งในการสร้างเฟรม

การแบ่งหน้าเว็บเพจออกเป็นเฟรมถ้าต้องการแสดงในแนวนอน จะใช้แอตทริบิวต์ ROWS ของ <FRAMESET> กำหนดและถ้าต้องการแบ่งในแนวตั้ง จะใช้แอตทริบิวต์ COLS ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก FRAMESET

แอตทริบิวต์ ROWS, COLS

รูปแบบ <frameset cols=อัตราส่วนการแบ่งพื้นที่ rows=อัตราส่วนการแบ่งพื้นที่>

การกำหนดให้แสดงข้อมูลในแต่ละเฟรม</frameset>

ตัวอย่าง <frameset cols=50,*><frame>................</frameset>

การแบ่งหน้าเว็บเพจออกเป็นเฟรม จำนวน 2 เฟรม สามารถทำได้ดังนี้

<html>

<head><title> การสร้างเฟรม 3</title>

</head>

<frame>....................

</frameset>

</html>

จากตัวอย่างแสดงว่า เฟรมที่ 1 มีพื้นที่ในการแสดง 50 พิกเซล ส่วนเฟรมที่ 2 จะแสดงเท่ากับพื้นที่ของหน้าจอที่เหลือจากเฟรมที่ 1

2. การแสดงเว็บเพจในเฟรม

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

รูปแบบการใช้งาน

ชื่อแท็ก FRAME

แอตทริบิวต์ SRC

รูปแบบ <frame src=ชื่อไฟล์เว็บเพจที่จะแสดง</frame>

ตัวอย่าง <frame src=exam1.html></frame>

การแสดงหน้าเว็บเพจในเฟรม สามารถทำได้ดังนี้

<html>

<head><title> การสร้างเฟรม</title>

</head>

</frameset >

</html>

3. การแบ่งพื้นที่ออกเป็นเฟรมทั้งแนวตั้งและแนวนอน

ตัวอย่างต่อไปนี้เป็นการแบ่งเฟรมออกเป็น 3 เฟรมทั้งแนวตั้ง (คอลัมน์) และแนวนอน (แถว) ทำได้ดังนี้

<html>

<head><title> การสร้างเฟรม</title></head>

</frameset >

</html>

จากตัวอย่างแสดงว่า เฟรมที่ 1 เป็นเฟรมแนวนอน (แถว) มีพื้นที่ในการแสดง 50 พิกเซล ส่วนเฟรมที่ 2 เป็นเฟรมแนวตั้ง (คอลัมน์) มีพื้นที่แสดงผล 25 พิกเซล และ เฟรมที่ 3 เป็นเฟรมแนวตั้งจะแสดงเท่ากับพื้นที่ของหน้าจอที่เหลือจากเฟรมที่ 2

4. การแบ่งพื้นที่ของเฟรมออกเป็นเฟรม

ตัวอย่างต่อไปนี้เป็นการแบ่งเฟรมออกเป็น 4 เฟรมทั้งแนวตั้ง(คอลัมน์) และแนวนอน (แถว) ทำได้ดังนี้

<html>

<head><title> การสร้างเฟรม</title></head>

</frameset >

</html>

5. การกำหนดคุณสมบัติของเฟรมไม่แสดงเส้นขอบ

การสร้างเฟรมปกติเฟรมจะแสดงเส้นขอบให้เห็นชัดเจนในแต่ละเฟรม แต่เพื่อความสวยงามเราสามารถกำหนดให้เส้นขอบเฟรมไม่แสดงได้ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ FRAMEBORDER

รูปแบบ <frameset frameborder=yes หรือ no </frameset>

ตัวอย่าง <frameset frameborder=no></frameset>

การสร้างเฟรมไม่แสดงเส้นขอบ สามารถทำได้ดังนี้

<html>

<head><title> การสร้างเฟรม</title></head>

</frameset >

</html>

6. การปรับขนาดขอบเฟรม

จากตัวอย่างที่ผ่านมาจะไม่แสดงเส้นขอบเฟรม แต่เราสามารถกำหนดขนาดขอบเฟรมให้มีขนาดใหญ่ขึ้นได้ด้วยแอตทริบิวต์ BORDER ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ BORDER

รูปแบบ <FRAMESET BORDER=ค่าพิกเซล</FRAMESET>

ตัวอย่าง <frameset border=8></frameset>

การสร้างเฟรม โดยแสดงเส้นขอบให้มีขนาดใหญ่ขึ้น สามารถทำได้ดังนี้

</frameset >

7. การเปลี่ยนสีขอบเฟรม

นอกจากการกำหนดขนาดของเส้นขอบได้ เรายังสามารถเปลี่ยนสีของเส้นขอบได้ด้วย แอตทริบิวต์ BORDERCOLOR ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ BORDERCOLOR

รูปแบบ <frameset bordercolor=ชื่อสีหรือค่าสี</frameset>

ตัวอย่าง <frameset bordercolor=black></frameset>

การสร้างเฟรม โดยแสดงเปลี่ยนสีของเส้นขอบ สามารถทำได้ดังนี้

</frameset >

8. การป้องกันไม่ให้ปรับขนาดของเฟรม

การป้องกันไม่ให้ปรับขนาดของเฟรม เพราะผู้สร้างเว็บต้องการให้เว็บที่ออกแบบไว้ มีหน้าตาเหมือนเดิมด้วยการเพิ่มคำว่า NORESIZE เข้าไปในแท็กเปิดของ <FRAME> ดังนี้

</frameset >

9. การควบคุมแถบเลื่อนไม่ให้ปรากฏ

การสร้างเว็บเพจเมื่อมีข้อมูลมาก ๆ แถบเลื่อนจะปรากฏขึ้นมาเองอัตโนมัติเพื่อให้ผู้ใช้สามารถเลื่อนดูข้อมูลได้ แต่ในบางครั้งเราอาจไม่ต้องการให้ปรากฏแถบเลื่อน สามารถกำหนดได้ด้วย แอตทริบิวต์ SCROLLING ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ SCROLLING

รูปแบบ <frame scrolling=yes หรือ no</frame>

ตัวอย่าง <frame scrolling=no></frame>

การควบคุมไม่ให้เว็บแสดงแถบเลื่อน สามารถทำได้ดังนี้

</frameset >

10. การตั้งชื่อเฟรม

การตั้งชื่อเฟรมเราสามารถตั้งชื่ออะไรก็ได้ ดังตัวอย่างต่อไปนี้

รูปแบบการใช้งาน

แอตทริบิวต์ NAME

รูปแบบ <frame name=ชื่อเฟรม</frame>

ตัวอย่าง <frame name=data1></frame>

การควบคุมไม่ให้เว็บแสดงแถบเลื่อน สามารถทำได้ดังนี้

</frameset >

11. การสั่งให้บราวเซอร์เปิดเว็บเพจในเฟรมที่ต้องการ

เราสามารถกำหนดให้บราวเซอร์เปิดเว็บเพจปลายทางในเฟรมอื่นได้ด้วยแอตทริบิวต์ TARGET ของแท็ก <A>

รูปแบบการใช้งาน

แอตทริบิวต์ TARGET

รูปแบบ <a target=ชื่อที่อ้างถึงตำแหน่งที่ต้องการ</A>

ตัวอย่าง <a target=data1></a>

การเปิดเว็บเพจในเฟรมที่ต้องการ สามารถทำได้ดังนี้

<a href= exam1.html target= data1>คลิกเพื่อทำแบบฝึกหัด</a>

การเปิดเว็บเพจปลายทางในหน้าต่างใหม่ สามารถทำได้ดังนี้

<a href= exam1.html target= _blank>คลิกเพื่อทำแบบฝึกหัด</a>

การสร้างฟอร์ม

แบบฟอร์ม คือ ส่วนที่ผู้พัฒนาเว็บเพจสร้างขึ้นมาเพื่อให้ผู้ใช้งานเว็บเพจกรอกข้อมูล เมื่อผู้สร้างต้องการข้อมูลนั้นไปใช้ประโยชน์ ซึ่งรูปแบบการรับข้อมูลจากผู้ใช้มีหลากหลายเช่นเดียวกับแบบฟอร์มในรูปแบบของกระดาษที่ใช้กันอยู่ในปัจจุบันนั่นเอง

1. การสร้างช่องรับข้อความ Text

ช่องรับข้อมูลแบบ text จะมีลักษณะเป็นช่องรับข้อมูลแบบบรรทัดเดียว โดยที่ผู้ใช้สามารถพิมพ์ตัวอักษรเข้าไปได้ไม่จำกัด

รูปแบบการใช้งาน

ชื่อแท็ก FORM

รูปแบบ <form>ช่องรับข้อมูลประเภทต่าง ๆ</form>

ตัวอย่าง <form><input.......................></form>

เมื่อกำหนดเขตของแบบฟอร์มแล้ว ก็สามารถสร้างช่องรับข้อมูลแบบที่ต้องการโดยใช้ INPUT ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก INPUT

แอตทริบิวต์ TYPE

รูปแบบ <input type=ชนิดของช่องรับข้อมูล>

ตัวอย่าง <input type=text>

การสร้างช่องรับข้อมูลแบบ Text สามารถทำได้ดังนี้

<body>

</body>

2. การปรับขนาดของช่องรับข้อมูล

ขนาดของช่องรับข้อมูล เราสามารถปรับขนาดให้ใหญ่หรือเล็กได้ ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ SIZE

รูปแบบ <input size=ขนาด>

ตัวอย่าง <input size=9>

การสร้างช่องรับข้อมูลแบบ Text และปรับขนาดช่องรับ สามารถทำได้ดังนี้

<body>

</body>

3. การกำหนดขนาดของข้อมูล

หลังจากที่เรากำหนดขนาดของช่องรับข้อมูลได้แล้ว เรายังสามารถกำหนดขนาดของข้อมูลได้ด้วย

รูปแบบการใช้งาน

แอตทริบิวต์ MAXLENGTH

รูปแบบ <input maxlength=ขนาด>

ตัวอย่าง <input maxlength=8>

การกำหนดขนาดของข้อมูล สามารถทำได้ดังนี้

<body>

</body>

4. การแสดงข้อความหน้าช่องรับข้อมูล

การแสดงข้อความหน้าช่องรับข้อมูลด้วยการใช้ <LABEL> ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก LABEL

รูปแบบ <label>ข้อความที่ต้องการแสดงหน้าช่องรับข้อมูล</label>

ตัวอย่าง <label>Username : <input ..............></label>

การแสดงข้อความหน้าช่องรับข้อมูล สามารถทำได้ดังนี้

<form>

<label>Username : <input type=text maxlength=8></lable>

</form>

5. การสร้างช่องรับข้อมูลประเภท Password

การสร้างช่องรับข้อมูลประเภท Password จะใช้รูปแบบเหมือนข้อมูลประเภท Text เพียงแต่เปลี่ยนคำว่า Text เป็น Password แทนก็ใช้ได้

<form>

<label>username : <input type=text axlength=8></lable><br>

password : <input type=passwrod>

</form>

6. การสร้างช่องรับข้อมูลประเภทปุ่ม

ข้อมูลที่ส่งเข้าไปทางปุ่มรับข้อมูล คือสัญลักษณ์อย่างใดอย่างหนึ่งจากผู้ใช้งานซึ่งได้แก่ สัญลักษณ์ที่ผู้ใช้ได้กรอกข้อมูลที่ต้องการเสร็จสิ้นแล้ว การสร้างปุ่มในฟอร์มสามารถสร้างได้ 4 ชนิด คือ

1. ปุ่ม Submit

2. ปุ่ม Image

3. ปุ่ม Reset

4. ปุ่ม Button

6.1 การสร้างปุ่ม Submit

ปุ่ม Submit มีไว้เพื่อส่งสัญญาณให้บราวเซอร์รับทราบว่าได้กรอกแบบฟอร์มเรียบร้อยแล้ว ซึ่งจะมีผลให้บราวเซอร์ส่งข้อมูลไปให้สคริปต์ที่ผู้สร้างแบบฟอร์มได้กำหนดไว้

<form>

........................

</form>

การเปลี่ยนชื่อที่ปรากฏของปุ่ม Submit โดยปกติปุ่ม Submit ที่สร้างจะมีชื่อ Submit Query แต่เพื่อช่วยให้คนใช้งานฟอร์มใช้งานได้ง่ายขึ้น ควรเปลี่ยนชื่อปุ่มดังกล่าวด้วยแอตทริบิวต์ VALUE ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ VALUE

รูปแบบ <input type=submit value=ชื่อที่ต้องการใช้แทน>

ตัวอย่าง <input type=submit value=คลิกเพื่อล็อกอิน>

การเปลี่ยนชื่อปุ่ม Submit สามารถทำได้ดังนี้

<form>

…………………………………..

</form>

6.2 การสร้างปุ่ม Image

ปุ่ม Image เป็นการนำภาพมาทำเป็นปุ่มเพื่อความสวยงามแทนการใช้ปุ่ม Submit ซึ่งเป็นรูปสี่เหลี่ยม ลักษณะการทำงานยังคงเหมือนปุ่ม Submit โดยการกำหนดค่าของแอตทริบิวต์ TYPE และเพิ่มแอตทริบิวต์ SRC

รูปแบบการใช้งาน

แอตทริบิวต์ SRC

รูปแบบ <input type=image src=ชื่อไฟล์รูปภาพ>

ตัวอย่าง <input type=image src=goin.gif>

การเปลี่ยนปุ่ม Submit แทนด้วยรูปภาพสามารถทำได้ดังนี้

<form>

............................................

</form>

6.3 การสร้างปุ่ม Reset

ปุ่ม Reset สร้างขึ้นมาเพื่อลบข้อมูลที่ได้ทำการกรอกเข้าไปในฟอร์มแล้ว แต่อาจมีข้อมูลผิดพลาด การลบทีละตัวอักษรอาจเสียเวลา ปุ่ม Reset จะอำนวยความสะดวกให้ลบได้เร็วขึ้น โดยกำหนดค่าให้แอตทริบิวต์ TYPE เป็น RESET ดังนี้

<form>

...........................................

</form>

6.4 การสร้างปุ่ม Button

ปุ่มนี้ไม่มีผลให้บราวเซอร์ทำงานใด ๆ เลย การสร้างปุ่มนี้ขึ้นมาเพื่อใช้งานอย่างใดอย่างหนึ่ง เช่น การสร้างปุ่มย้อนกลับ โดยอาศัยความสามารถของภาษาสคริปต์

รูปแบบการใช้งาน

รูปแบบ <input type=button value=ชื่อที่ปรากฏบนปุ่ม>

ตัวอย่าง <input type=button value=back>

การสร้างปุ่ม Button สามารถทำได้ดังนี้

<form>

คลิกเพื่อย้อนกลับ...

</form>

7. การสร้างช่องรับข้อมูลประเภท File

ช่องรับข้อมูลประเภทนี้จะประกอบด้วยช่องรับข้อมูลประเภท Text กับปุ่ม Browse… ปรากฏอยู่ร่วมกัน ข้อมูลประเภทนี้สามารถเลือกได้ 2 วิธี คือ การพิมพ์ชื่อไฟล์ลงไปในช่องโดยตรงหรืออาจเลือกไฟล์โดยการคลิกที่ปุ่ม Browse…

การสร้างช่องรับข้อมูลทำได้โดยการกำหนดให้แอตทริบิวต์ Type ของ <Input> มีค่าเป็น File ดังนี้

<form>

</form>

8. การสร้างช่องรับข้อมูลประเภท Radio

ปุ่ม Radio เป็นปุ่มที่เราได้กำหนดทางเลือกไว้ให้ผู้ใช้แล้วโดยผู้ใช้ต้องเลือกตัวใด ตัวหนึ่งจากที่เราได้เตรียมไว้ให้แล้วดังนี้

รูปแบบการใช้งาน

รูปแบบ <input type=radio name=ชื่อกลุ่ม>

ตัวอย่าง <input type=radio name=gender checked>

การสร้างปุ่ม Radio สามารถทำได้ดังนี้

<form>

เพศ : <input type=radio name=gemder clicked>ชาย

<input type=radio name=gemder>หญิง

</form>

9. การสร้างช่องรับข้อมูลประเภท Checkbox

Checkbox เหมาะสำหรับข้อมูลที่ผู้สร้างได้กำหนดตัวเลือกไว้ให้จำนวนหนึ่งแล้ว เพื่อให้ผู้ใช้เลือกตามตัวเลือก ซึ่งเลือกได้มากกว่า 1 ตัวเลือก การสร้างตัวเลือกของ Checkbox สร้างขึ้นมาด้วย <INPUT> ดังนี้

<form>

งานอดิเรก : <br>

<input type=checkbox> อ่านหนังสือ

<input type=checkbox> ฟังเพลง

<input type=checkbox> เล่นกีฬา

<input type=checkbox> ท่องอินเทอร์เน็ต

<input type=checkbox> งานฝีมือ

</form>

10. การสร้างช่องรับข้อมูลประเภท Text area

ช่องรับข้อมูลประเภท Text area มีประโยชน์เหมือนกับช่องรับข้อมูลประเภท Text เพียงแต่สามารถรับข้อมูลได้หลายบรรทัด ในขณะที่ช่องรับข้อมูลแบบ Text รับข้อมูลได้เพียงบรรทัดเดียว

รูปแบบการใช้งาน

ชื่อแท็ก TEXTAREA

รูปแบบ <textarea></textarea>

ตัวอย่าง <textarea></textarea>

การสร้างช่องรับข้อมูลแบบ Textarea สามารถทำได้ดังนี้

<form>

แสดงความคิดเห็นเพิ่มเติม: <textarea></textarea>

</form>

11. การปรับขนาดของช่องรับข้อมูล

เราสามารถปรับขนาดของช่องรับข้อมูลประเภท Textarea ได้โดยใช้แอตทริบิวต์ COLS และ ROWS ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ COLS, ROWS

รูปแบบ <textarea cols=จำนวนตัวอักษรต่อแถว rows=จำนวนแถว></textarea>

ตัวอย่าง <textarea cols=50 row=4></textarea>

การปรับขนาดของช่องรับข้อมูล สามารถทำได้ดังนี้

<form>

แสดงความคิดเห็นเพิ่มเติม:

</form>

การควบคุมไม่ให้ตัดคำขึ้นบรรทัดใหม่ ใช้แอตทริบิวต์ WRAP ดังนี้

<form>

แสดงความคิดเห็นเพิ่มเติม:

</form>

12. การสร้างช่องรับข้อมูลประเภท Drop down list

ช่องรับข้อมูลประเภท Drop down list จะมีลักษณะเป็นช่องสี่เหลี่ยมมีข้อมูลที่ผู้สร้างจัดทำไว้ และมีปุ่มลูกศรลงทางด้านขวาของช่อง มีไว้สำหรับให้ผู้ใช้เลือกข้อมูลที่ต้องการ การสร้างช่องรับข้อมูลแบบ Drop down list ทำได้ด้วยการใช้ <SELECT> ร่วมกับ <OPTION> โดย <OPTION> แต่ละแท็กจะแทนทางเลือกแต่ละตัว

รูปแบบการใช้งาน

ชื่อแท็ก SELECT

รูปแบบ <select><option>ตัวเลือกแรก<option>ตัวเลือกที่ 2<option>ตัวเลือกที่ 3... </select>

ตัวอย่าง <select><option>ประถมศึกษา<option>มัธยมศึกษา<option>ปริญญาตรี...</select>

การสร้างช่องรับข้อมูลแบบ Drop down list สามารถทำได้ดังนี้

<form>

วุฒิการศึกษา :

<option>ประถมศึกษา

<option>มัธยมศึกษา

<option>ปริญญาตรี

<option>ปริญญาโท

<option>สูงกว่าปริญญาโท

</select>

</form>

การสร้างช่องรับข้อมูลแบบ Drop down list ปกติแล้วข้อมูลตัวแรกจะถูกเลือกแสดงไว้ในช่องเสมอ หากต้องการแสดงตัวเลือกอื่นแทนตัวแรกเราสามารถกำหนดได้ โดยใช้ แอตทริบิวต์ SELECTED ดังนี้

<form>

วุฒิการศึกษา :

………………

<option selected>ปริญญาตรี

<option>ปริญญาโท

<option>สูงกว่าปริญญาโท

</select>

</form>

การแบ่งกลุ่มตัวเลือก

บางครั้งตัวเลือกอาจมีมากจนทำให้ผู้ใช้สับสนได้ ดังนั้นเราควรแบ่งกลุ่มตัวเลือกด้วย <OPTGROUP> ให้ง่ายต่อการหาตัวเลือกที่ต้องการ โดยเราจะใช้ <OPTGROUP> จัดกลุ่มตัวเลือกที่กำหนดด้วย <OPTION> ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก OPTGROUP

แอตทริบิวต์ LABEL

รูปแบบ <optgroup label=ชื่อกลุ่ม><option>ตัวเลือกแรก <option>ตัวเลือกที่ 2

<option>ตัวเลือกที่ 3...</optgroup>

ตัวอย่าง <optgroup label=ผลไม้เมืองร้อน><option>กล้วย<option>มังคุด<option>ลำไย...

</optgroup>

การสร้างช่องรับข้อมูลแบบ Drop down list และแบ่งกลุ่มตัวเลือก สามารถทำได้ดังนี้

<form>

ผลไม้ที่ชอบ :

<option>กล้วย

<option>มังคุด

</optgroup>

<option>แอปเปิ้ล

<option>กีวี

</optgroup>

</select>

</form>

13. การสร้างช่องรับข้อมูลประเภท List box

ลักษณะของ List box จะเป็นช่องมีหลายบรรทัดภายในช่องจะมีตัวเลือกที่เตรียมไว้ให้ผู้ใช้เลือกแล้วตัวเลือกละหนึ่งบรรทัด ถ้าตัวเลือกมีมากกว่าจำนวนบรรทัด จะปรากฏแถบเลื่อนให้ผู้ใช้เลื่อนดูตัวเลือกได้

รูปแบบการใช้งาน

แอตทริบิวต์ SIZE

รูปแบบ <select size=จำนวนแถว><option>ตัวเลือกแรก <option>ตัวเลือกที่ 2

<option>ตัวเลือกที่ 3... </select>

ตัวอย่าง <select size=3><option>กล้วย<option>มังคุด<option>ลำไย...</select>

การสร้างช่องรับข้อมูลแบบ List box สามารถทำได้ดังนี้

<form>

<option>กล้วย

<option>มังคุด

<option>แอปเปิ้ล

<option>กีวี

</select>

</form>

การเลือกตัวเลือกได้หลายตัวพร้อมกัน

การสร้างช่องรับข้อมูลแบบ List box สามารถเลือกตัวเลือกได้ทีละ 1 ตัวเท่านั้น แต่ถ้าต้องการให้ผู้ใช้สามารถเลือกได้หลายตัวเลือกพร้อมกัน ให้ใช้แอตทริบิวต์ MULTIPLE ดังนี้

<form>

<option>กล้วย

<option>มังคุด

<option>แอปเปิ้ล

<option>กีวี

</select>

</form>

14. การแบ่งส่วนของแบบฟอร์ม

เพื่อความสวยงามและดูเป็นสัดส่วนของแต่ละแบบฟอร์ม เราสามารถแบ่งแบบฟอร์มออกเป็นส่วน ๆ ได้ด้วย <FIELDSET> ซึ่งจะมีผลให้เกิดกรอบสี่เหลี่ยมรอบช่องรับข้อมูลที่อยู่ระหว่าง <FIELDSET>… </FIELDSET>

รูปแบบการใช้งาน

ชื่อแท็ก FIELDSET

รูปแบบ <fieldset>ข้อมูลในกรอบ</fieldset>

ตัวอย่าง <fieldset>username : <input type=text>.......... </fieldset>

การแบ่งฟอร์มออกเป็นส่วน ๆ สามารถทำได้ดังนี้

<form>

Username : <Input type=text><br>fieldset>

เพศ : <input type=radio name=gender Checked>ชาย

งานอดิเรกของคุณ:<br>

<input type=checkbox>อ่านหนังสือ

<input type=checkbox>ฟังเพลง

<input type=checkbox>จัดสวน

<input type=checkbox>ท่องอินเตอร์เน็ต<br>

แสดงความคิดเห็นเพิ่มเติม : <textarea cols=50 rows=4>

</textarea>

</fieldset>

</form>

15. การตั้งชื่อกรอบ

หลังจากที่ได้แบ่งส่วนของฟอร์มออกเป็นส่วน ๆ จะมีกรอบเกิดขึ้นเพื่อแบ่งส่วนของฟอร์มให้แยกจากกัน เมื่อส่วนของฟอร์มนั้นมากขึ้น เราสามารถตั้งชื่อกรอบได้ด้วยแท็ก <LEGEND> ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก LEGEND

รูปแบบ <legend>ชื่อกรอบ</legend>

ตัวอย่าง <legend>ชื่อข้อมูลสำหรับล็อกอิน</legend>

การตั้งชื่อกรอบ สามารถทำได้ดังนี้

<form>

<fieldset><legend>ข้อมูลสำหรับล็อกอิน</legend>

…………………………………………………………….

</fieldset>

<fieldset><legend>ข้อมูลส่วนตัว</legend>

…………………………………………………………….

</fieldset>

</form>