แบบฟอร์ม (Form)
แบบฟอร์มที่พบเห็นตามเว็บไซต์ต่างๆ เช่น แบบสอบถาม, ใบสั่งซื้อของ, การลงทะเบียนเป็นสมาชิก, สมุดเยี่ยม (Guestbook), แสดงความคิดเห็น (Comment) เป็นต้นโดยปกติแล้วการบันทึกค่าข้อมูลในแบบฟอร์มจะใช้ Server Script เช่น PHP, ASP เข้ามาช่วยจัดการ ซึ่งถึงแม้เราจะไม่ได้ศึกษาถึงขั้นนั้น แต่เมื่อเรานำเอา Script สำเร็จรูปต่างๆ ที่มีแบบฟอร์มมาใช้งาน ถ้าเราเห็น code Element ของแบบฟอร์มเราก็จะไม่งง ว่ามันคืออะไร และเมื่อเราเรียนรู้เรื่อง CSS แล้ว เราสามารถที่จะตกแต่งแบบฟอร์มให้สวยงามมากขึ้นได้
โครงสร้าง Element สำหรับสร้างแบบฟอร์ม
<form name="form_name" method="get | post" action="url" target="window name">....</form>
- name="ชื่อของ Form"
- method="get | post" เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ
get เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร
post เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server
- action="URL" คือตำแหน่งหรือ URL ของ Script ที่วางไว้ที่ Server
- target="_blank | _self | _parent" หน้าต่างที่จะให้ผลของ Script แสดงผล
- method="get | post" เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ
get เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร
post เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server
- action="URL" คือตำแหน่งหรือ URL ของ Script ที่วางไว้ที่ Server
- target="_blank | _self | _parent" หน้าต่างที่จะให้ผลของ Script แสดงผล
ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ
1. <input>...</input>
2. <select>...</select>
3. <textarea>
1. <input>...</input>
2. <select>...</select>
3. <textarea>
1. Input
input มีหลายประเภท ได้แก่1) Text Fields
<form>
<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled readonly />
</form>
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled readonly />
</form>
<form>
<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled="disabled" readonly="readonly" />
</form>
- size="number" ความกว้างของช่องกรอกข้อมูล<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled="disabled" readonly="readonly" />
</form>
- maxlengt="number" จำนวนตัวอักษรสูงสุดที่กรอกได้
- disabled lock ไม่ให้ช่องกรอกข้อมูลใช้งานได้
- readonly ให้ช่องกรอกข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้
Example
<input type="text" name="txt_user" value="default value" size="20" maxlength="30"/>
<input type="text" name="txt_user" value="default value" size="40" maxlength="30" disabled="disabled" />
<input type="text" name="txt_user" value="readonly" size="20" maxlength="30" readonly="readonly" />
Output<input type="text" name="txt_user" value="default value" size="40" maxlength="30" disabled="disabled" />
<input type="text" name="txt_user" value="readonly" size="20" maxlength="30" readonly="readonly" />
<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked>
</form>
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked>
</form>
<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked="checked" />
</form>
- checked = ให้ checkbox นั้นถูกเลือก (tick / ที่ checkbox) <input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked="checked" />
</form>
Example
<input type="checkbox" name="selection1" value="Yes" checked="checked" /> Selection 1
<input type="checkbox" name="selection2" value="Yes" /> Selection 2
<input type="checkbox" name="selection3" value="Yes" /> Selection 3
Output<input type="checkbox" name="selection2" value="Yes" /> Selection 2
<input type="checkbox" name="selection3" value="Yes" /> Selection 3
Selection 1 Selection 2 Selection 3
3) Radio
<form>
<input type="radio" name="ชื่อ radio" value="ค่าข้อมูล"checked="checked" />
</form>
- checked = ให้ option นั้นถูกเลือก<input type="radio" name="ชื่อ radio" value="ค่าข้อมูล"checked="checked" />
</form>
Example
<input type="radio" name="sex" value="M" checked="checked" />
<input type="radio" name="sex" value="F" /> Female
Output<input type="radio" name="sex" value="F" /> Female
Female
4) Password
<form>
<input type="password" name="ชื่อ input password" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>
Example<input type="password" name="ชื่อ input password" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>
<input type="password" name="txt_passw" value="1234" size="10" maxlength="30" />
Output
<form>
<input type="file" name="ชื่อ input file" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>
Example<input type="file" name="ชื่อ input file" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>
<input type="file" name="filename" size="30" />
Output
<form>
<input type="hidden" name="ชื่อ input hidden" value="ค่าข้อมูล" />
</form>
Example<input type="hidden" name="ชื่อ input hidden" value="ค่าข้อมูล" />
</form>
<input type="hidden" name="id" value="1234" />
Output
<form>
<input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>
Example<input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>
<input type="button" name="cancel" value="Cancel" />
Output
<form>
<input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>
Example<input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>
<input type="button" name="save" value="Save" />
Output
<form>
<input type="button" name="ชื่อ button" />
</form>
Example<input type="button" name="ชื่อ button" />
</form>
<input type="reset" name="Clear" />
Output2. Select
<form>
<select name="ชื่อ select" size="5" multiple>
<option value="1" selected="selected">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
</form>
- size = จำนวนตัวเลือกที่ให้มองเห็น<select name="ชื่อ select" size="5" multiple>
<option value="1" selected="selected">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
</form>
- multiple = ให้ผู้ใช้งานเลือกหลายตัวเลือกได้ โดยกดปุ่ม Ctrl
Example
<select name="list">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3"selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
Output<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3"selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
<select name="list" size="3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
Output<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
<select name="list" size="5" multiple>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
Output<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
3. Textarea
<form>
<textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off">
ข้อความใน textareas
</textarea>
</form>
- wrap การกำหนดการตัดคำหรือขึ้นบรรทัดใหม่ให้ข้อความที่ยาวต่อเนื่องกันมากๆ ใน textarea <textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off">
ข้อความใน textareas
</textarea>
</form>
มีค่าได้ 3 แบบ คือ
1. off (เป็นค่า default) ไม่มีการตัดคำหรือขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และขึ้นบรรทัดใหม่เมื่อผู้กรอกเคาะ Enter เท่านั้น
2. physical หรือ soft ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea และจุดใดที่ผู้ใช้เคาะ Enter ก็จะขึ้นบรรทัดใหม่ให้ตามที่พิมพ์
3. virtual หรือ hard ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea แต่เป็นการปัดหลอกๆ ในหน้ากรอกข้อความ เวลารับค่าจะเป็นบรรทัดเดียว
Example
<textarea name="comment" rows="8" cols="60"> \\|// (@ @) ----------------------oOO---(_)---OOo------------------- เมื่อเราพิมพ์ข้อความใน TEXT AREAR มันจะแสดงผล เหมือนกับที่เราพิมพ์มันจริงๆ ไม่ว่า เราจะเว้นวรรคอย่างไร 1 2 3 4 HELLO WORLD -------------------------------------------------------- |__|__| || || ooO Ooo </textarea>
wrap="off" (เป็นค่า default) ไม่มีการตัดคำหรือขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และขึ้นบรรทัดใหม่เมื่อผู้กรอกเคาะ Enter เท่านั้น
Example : wrap=offที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...
<textarea name="text" rows="8" cols="30" wrap="off">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>
OutputHTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>
warp="physical" หรือ soft ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea และจุดใดที่ผู้ใช้เคาะ Enter ก็จะขึ้นบรรทัดใหม่ให้ตามที่พิมพ์
Example : wrap=physicalที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...
<textarea name="text" rows="8" cols="30" wrap="physical">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>
OutputHTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>
warp="virtual" หรือ hard ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea แต่เป็นการปัดหลอกๆ ในหน้ากรอกข้อความ เวลารับค่าจะเป็นบรรทัดเดียว
Example : wrap=virtualที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...
<textarea name="text" rows="8" cols="30" wrap="virtual">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>
OutputHTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>
Fieldset
การจัดกลุ่มฟิลด์ป้อนข้อมูลใน Form ที่มีความสัมพันธ์กัน จะทำให้ Form มีความเป็นระเบียบสวยงาม และผู้ใช้งานสามารถเข้าใจและป้อนข้อมูลได้สะดวกมากขึ้น
<form>
<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
</form>
หลังจากที่เีรียนรู้ element ของแบบฟอร์ม แบบต่างๆ ไปแล้ว เราลองนำมาประกอบกันเป็น แบบสอบถามเกี่ยวกับเว็บไซต์ดูค่ะ<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
</form>
Example
<form action="savedata.php" method="post" name="F1">
<fieldset>
<legend>Personal data</legend>
Name :
<input type="text" name="txt_name" size="20" maxlength="30" /> <br />
Sex :
<input type="radio" name="sex" value="M" /> Male
<input type="radio" name="sex" value="F" /> Female <br />
Age :
<select name="lst_age">
<option value="" >-</option>
<option value="1" >1-10</option>
<option value="2">11-20</option>
<option value="3">21-30</option>
<option value="4">31-40</option>
<option value="5">>40</option>
</select>
</fieldset>
<fieldset>
<legend>Your interesting</legend>
Section :
<input type="checkbox" name="chk1" value="Yes" /> HTML
<input type="checkbox" name="chk2" value="Yes" /> CSS
<input type="checkbox" name="chk3" value="Yes" /> JAVASCRIPT
<br />
Score for this website :
<input type="text" name="txt_score" size="20" maxlength="30" /><br />
Comment : <br />
<textarea wrap="virtual" name="txt_comment" rows="6" cols="20">
</textarea>
</fieldset>
<p align="center">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</form>
Output<fieldset>
<legend>Personal data</legend>
Name :
<input type="text" name="txt_name" size="20" maxlength="30" /> <br />
Sex :
<input type="radio" name="sex" value="M" /> Male
<input type="radio" name="sex" value="F" /> Female <br />
Age :
<select name="lst_age">
<option value="" >-</option>
<option value="1" >1-10</option>
<option value="2">11-20</option>
<option value="3">21-30</option>
<option value="4">31-40</option>
<option value="5">>40</option>
</select>
</fieldset>
<fieldset>
<legend>Your interesting</legend>
Section :
<input type="checkbox" name="chk1" value="Yes" /> HTML
<input type="checkbox" name="chk2" value="Yes" /> CSS
<input type="checkbox" name="chk3" value="Yes" /> JAVASCRIPT
<br />
Score for this website :
<input type="text" name="txt_score" size="20" maxlength="30" /><br />
Comment : <br />
<textarea wrap="virtual" name="txt_comment" rows="6" cols="20">
</textarea>
</fieldset>
<p align="center">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</form>