แบบฟอร์มกรอกข้อมูล
แบบฟอร์ม (Form html)
<html>
<head><title></title>
<body>
ยินดีต้อนรับ<br>
<form method = "post" action="save.html"><br>
ชื่อ - สกุล<input type = "text" name="t1" size="20"><br>
User <input type="text" name="b2" size="20"><br>
Password <input type="password" name="t2" size="20"><br>
วันที่<select name="date1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="mont">
<option value="มกราคม">มกราคม</option>
<option value="กุมภาพันธ์">กุมภาพันธ์</option>
<select>
ปี พ.ศ.<input type="text" name="t3" size="5"><br>
สาขาวิชาเรียน<br>
<input type ="radio" name="v1" value="สาขาคอมพิวเตอร์ธุรกิจ" checked>
<input type ="radio" namkhkh
e="v1" value="สาขาการจัดการทั่วไป">
เวลาว่างคุณทำอะไร<br>
<input type="checkbox" name="c1" value="ดูหนังฟังเพลง">ดูหนังฟังเพลง
<input type="checkbox" name="c1" value="อ่านหนังสือ">อ่านหนังสือ<br>
รายละเอียดอื่นๆ <br><textarea type= name="text1" cols="30" rows="6"></textarea>
<input type ="submit" name ="submit" value="คลิก">
</form>
</body>
</html>
แบบฟอร์มที่พบเห็นตามเว็บไซต์ต่างๆ เช่น แบบสอบถาม, ใบสั่งซื้อของ, การลงทะเบียนเป็นสมาชิก, สมุดเยี่ยม (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 แสดงผล
ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ
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 รุ่นใหม่ จะเขียนแบบนี้
<form>
<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled="disabled" readonly="readonly" />
</form>
- size="number" ความกว้างของช่องกรอกข้อมูล
- 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
2) Checkbox
<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked>
</form>
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked="checked" />
</form>
- checked = ให้ checkbox นั้นถูกเลือก (tick / ที่ checkbox)
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
Selection 1 Selection 2 Selection 3
3) Radio
<form>
<input type="radio" name="ชื่อ radio" value="ค่าข้อมูล"checked="checked" />
</form>
- checked = ให้ option นั้นถูกเลือก
Example
<input type="radio" name="sex" value="M" checked="checked" />
<input type="radio" name="sex" value="F" /> Female
Output
Female
4) Password
<form>
<input type="password" name="ชื่อ input password" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>
Example
<input type="password" name="txt_passw" value="1234" size="10" maxlength="30" />
Output
5) File upload
<form>
<input type="file" name="ชื่อ input file" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>
Example
<input type="file" name="filename" size="30" />
Output
6) Hidden
<form>
<input type="hidden" name="ชื่อ input hidden" value="ค่าข้อมูล" />
</form>
Example
<input type="hidden" name="id" value="1234" />
Output
7) Button
<form>
<input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>
Example
<input type="button" name="cancel" value="Cancel" />
Output
8) Submit
<form>
<input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>
Example
<input type="button" name="save" value="Save" />
Output
9) Reset
<form>
<input type="button" name="ชื่อ button" />
</form>
Example
<input type="reset" name="Clear" />
Output
2. 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 = จำนวนตัวเลือกที่ให้มองเห็น
- 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
Example
<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
Example
<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
3. Textarea
<form>
<textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off">
ข้อความใน textareas
</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
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>
Output
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>
Output
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>
Output
Fieldset
การจัดกลุ่มฟิลด์ป้อนข้อมูลใน Form ที่มีความสัมพันธ์กัน จะทำให้ Form มีความเป็นระเบียบสวยงาม และผู้ใช้งานสามารถเข้าใจและป้อนข้อมูลได้สะดวกมากขึ้น
<form>
<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
</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
Personal dataName :
Sex : Male Female
Age :
Your interestingSection : HTML CSS JAVASCRIPT
Score for this website :
Comment :