HTML :
แบบฟอร์ม (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"
ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ
1. Input
input มีหลายประเภท ได้แก่ 1) Text Fields
<form>
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<form>
- size="number" ความกว้างของช่องกรอกข้อมูล - maxlengt="number" จำนวนตัวอักษรสูงสุดที่กรอกได้ - disabled lock ไม่ให้ช่องกรอกข้อมูลใช้งานได้ - readonly ให้ช่องกรอกข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้ Example
<input type="text" name="txt_user" value="default value" size="20" maxlength="30"/>
Output
2) Checkbox
<form>
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<form>
- checked = ให้ checkbox นั้นถูกเลือก (tick / ที่ checkbox) Example
<input type="checkbox" name="selection1" value="Yes" checked="checked" /> Selection 1
Output
3) Radio
<form>
- checked = ให้ option นั้นถูกเลือก Example
<input type="radio" name="sex" value="M" checked="checked" />
Output
4) Password
<form>
Example
<input type="password" name="txt_passw" value="1234" size="10" maxlength="30" />
Output
5) File upload
<form>
Example
<input type="file" name="filename" size="30" />
Output
6) Hidden
<form>
Example
<input type="hidden" name="id" value="1234" />
Output
7) Button
<form>
Example
<input type="button" name="cancel" value="Cancel" />
Output
8) Submit
<form>
Example
<input type="button" name="save" value="Save" />
Output
9) Reset
<form>
Example
<input type="reset" name="Clear" />
Output
2. Select
<form>
- size = จำนวนตัวเลือกที่ให้มองเห็น - multiple = ให้ผู้ใช้งานเลือกหลายตัวเลือกได้ โดยกดปุ่ม Ctrl Example
<select name="list">
Output
option 1 option 2 option 3 option 4 option 5
Example
<select name="list" size="3">
Output
option 1 option 2 option 3 option 4 option 5
Example
<select name="list" size="5" multiple>
Output
option 1 option 2 option 3 option 4 option 5
3. Textarea
<form>
- wrap การกำหนดการตัดคำหรือขึ้นบรรทัดใหม่ให้ข้อความที่ยาวต่อเนื่องกันมากๆ ใน textarea มีค่าได้ 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>
Output
Example : wrap=off ที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...
<textarea name="text" rows="8" cols="30" wrap="off">
Output
warp="physical" หรือ soft ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea และจุดใดที่ผู้ใช้เคาะ Enter ก็จะขึ้นบรรทัดใหม่ให้ตามที่พิมพ์
Example : wrap=physical ที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...
<textarea name="text" rows="8" cols="30" wrap="physical">
Output
warp="virtual" หรือ hard ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea แต่เป็นการปัดหลอกๆ ในหน้ากรอกข้อความ เวลารับค่าจะเป็นบรรทัดเดียว
Example : wrap=virtual ที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...
<textarea name="text" rows="8" cols="30" wrap="virtual">
Output
Fieldset
การจัดกลุ่มฟิลด์ป้อนข้อมูลใน Form ที่มีความสัมพันธ์กัน จะทำให้ Form มีความเป็นระเบียบสวยงาม และผู้ใช้งานสามารถเข้าใจและป้อนข้อมูลได้สะดวกมากขึ้น
<form>
หลังจากที่เีรียนรู้ element ของแบบฟอร์ม แบบต่างๆ ไปแล้ว เราลองนำมาประกอบกันเป็น แบบสอบถามเกี่ยวกับเว็บไซต์ดูค่ะ 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 
