Form.

งานนำเสนอเรื่อง: "Form."— ใบสำเนางานนำเสนอ:

1 Form

2 แบบฟอร์ม (Form) แบบฟอร์มที่พบเห็นตามเว็บไซต์ต่างๆ เช่น แบบสอบถาม, ใบสั่งซื้อของ, การลงทะเบียนเป็นสมาชิก, สมุดเยี่ยม (Guestbook), แสดงความคิดเห็น (Comment) เป็นต้น โดยปกติแล้วการบันทึกค่าข้อมูลในแบบฟอร์มจะใช้ Server Script เช่น PHP, ASP เข้ามาช่วยจัดการ ซึ่งถึงแม้เราจะไม่ได้ศึกษาถึงขั้นนั้น แต่เมื่อเรานำเอา Script สำเร็จรูปต่างๆ ที่มีแบบฟอร์มมาใช้งาน ถ้าเราเห็น code Element ของแบบฟอร์มเราก็จะไม่งง ว่ามันคืออะไร และเมื่อเราเรียนรู้เรื่อง CSS แล้ว เราสามารถที่จะตกแต่งแบบฟอร์มให้สวยงามมากขึ้นได้

3 คำสั่งในการสร้างฟอร์ม
<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 ประเภท คือ <input>...</input> <select>...</select> <textarea>

4 การสร้างฟอร์มประเภท INPUT
Text Field <form> <input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number“ maxlength="number"> </form> ตัวอย่าง Form_01.html <input type="text" name="txt_user" value=“Vee" size="20" maxlength="30"/>

5 การสร้างฟอร์มประเภท INPUT
2) Checkbox <form> <input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked="checked"> </form> ตัวอย่าง Form_02.html <input type="checkbox" name=“Male" value=“ชาย" /> เพศชาย

6 การสร้างฟอร์มประเภท INPUT
3) Radio <form> <input type="radio" name="ชื่อ radio" value="ค่าข้อมูล"checked="checked" /> </form> ตัวอย่าง Form_03.html <input type="radio" name="sex" value="M" checked="checked" />Male <input type="radio" name="sex" value="F" /> Female

7 การสร้างฟอร์มประเภท INPUT
4) Password <form> <input type="password" name="ชื่อ input password" value="ค่าข้อมูล" size="number" maxlength="number" /> </form> ตัวอย่าง Form_04.html <input type="password" name="txt_passw" value="1234" size="10" maxlength="30" />

8 การสร้างฟอร์มประเภท INPUT
6) Hidden <form> <input type="hidden" name="ชื่อ input hidden" value="ค่าข้อมูล" /> </form> ตัวอย่าง Form_06.html <input type="hidden" name="id" value="1234" />

9 การสร้างฟอร์มประเภท INPUT
7) Button <form> <input type="button" name="ชื่อ button" value="ค่าข้อมูล" />  </form> ตัวอย่าง Form_07.html <input type="button" name="cancel" value="Cancel" /> 

10 การสร้างฟอร์มประเภท INPUT
8) Submit <form> <input type="Submit " name="ชื่อ button" value="ค่าข้อมูล" /> </form> ตัวอย่าง Form_08.html <input type=" Submit " name="save" value="Save" />

11 การสร้างฟอร์มประเภท INPUT
9) Reset <form> <input type="button" name="ชื่อ button" /> </form> ตัวอย่าง Form_09.html <input type="reset" name="Clear" />

12 การสร้างฟอร์มประเภท Select
<form> <select name="ชื่อ select" size="5"> <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 = จำนวนตัวเลือกที่ให้มองเห็น

13 การสร้างฟอร์มประเภท Select
ตัวอย่าง <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>

14 การสร้างฟอร์มประเภท 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>

15 การสร้างฟอร์มประเภท Textarea
<form> <textarea name="ชื่อ textarea" rows="number" cols="number" > ข้อความใน textareas </textarea> </form>