Posted by: chutiwan | กรกฎาคม 11, 2010
ข้อสอบการสร้างฟอร์ม
แบบทดสอบก่อนเรียน หลังเรียนเรื่องการสร้างฟอร์ม (Form)
1. การสร้างเว็บเพจที่มีการแลกเปลี่ยนข้อมูลระหว่างผู้สร้างและผู้ใช้เว็บเพจได้นั้น ต้องมีการกำหนดอะไรในการรับส่งข้อมูล
ก. การใช้เฟรม ( Frame )
ข. แบบฟอร์ม ( Form )
ค. การสร้าง List
ง. การสร้าง Background
2. คำสั่ง <Input type=”text”> เป็นการกำหนดช่องรับข้อมูลประเภทใด
ก. Password
ข. Hidden
ค. File
ง. Text
3. ถ้าต้องการปรับขนาดของช่องรับข้อมูลในเว็บเพจต้องกำหนดด้วยแอตทริบิวต์ใด
ก. Size
ข. Value
ค. Input
ง. Type
4. ข้อใดถูกต้องในการสร้างช่องรับข้อมูลประเภท Password
ก. <Input type=”text”>
ข. <Input type=”submit”>
ค.<Input type=”password”>
ง.<Input type=”reset”>
5. ถ้าต้องการกำหนดให้ช่องรับรหัสผ่านขึ้นบรรทัดใหม่ ต้องใช้แท็กใดต่อจากช่องรับข้อมูล
ประเภท Text
ก. <P>
ข. <B>
ค. <BR>
ง. <center>
6. คำสั่งแอตทริบิวต์ใดเป็นการนำรูปภาพมาใช้แทนปุ่ม Submit
ก. SRC
ข. IMAGE
ค. VALUE
ง. NAME
7. ข้อใดถูกต้องในการสร้างปุ่มสำหรับลบข้อมูล
ก. <Input type=”image “src=”button.gif”>
ข. <Input type=”button “value=”<back”>
ค. <Input type=”button “ value=”del”>
ง. <Input type=”submit “><input type=”reset”>
8. ช่องรับข้อมูลประเภท checkbox ถ้าต้องการให้ปรากฏเครื่องหมายถูกหน้าช่องโดยที่ผู้ใช้ไม่ต้องคลิกเลือก เราต้องเพิ่มแอตทริบิวต์ใด
ก. checkbox
ข. checked
ค. textarea
ง.gender
9. ถ้าต้องการปรับขนาดของช่องรับข้อมูลประเภท text area ต้องใช้คำสั่งแอตทริบิวต์ใด
ก. cols
ข. rows
ค.cols และ rows
ง. wrap
10. การแบ่งแบบฟอร์มออกเป็นส่วน ๆ ซึ่งจะมีผลทำให้เกิดกรอบสี่เหลี่ยมรอบช่องรับข้อมูล เกิดจากการใช้แท็กใด
ก. fieldset
ข. size
ค. option
ง. multiple
เขียนใน ไม่มีหมวดหมู่
บทที่ 16 HTML Forms
HTML Forms คือการสร้างฟอร์มใน html โดยฟอร์มที่ได้จะถูกใช้ในการส่งข้อมูลไปยังเซิฟเวอร์ แท็กที่ใช้ในการสร้างฟอร์มคือ แท็ก <form>
ฟอร์มประกอบด้วยแท็ก input เช่น กรอบข้อความ (text fields), กล่องแบบเลือก (checkboxes),ปุ่มต่าง ๆ เป็นต้น โดยเราสามารถใส่รายการ, กรอบข้อความ(textarea), ฟิล์ดเซท (fieldset), เลเจนด์(legend) และแท็ก label ซึ่งเราจะใช้แท็ก input
ใช้ในการเก็บข้อมูลจากผู้ใช้งาน โดย แท็ก input สามารถสร้างได้หลายแบบ ขึ้นอยู่กับแอตทริบิวต์ type ดังนั้นแท็ก input สามารถเป็นกรอบข้อความ, กล่องตัวเลือก, กล่องรหัสผ่าน, ปุ่มส่งข้อมูล และ อื่น ๆ ซึ่งแท็ก input ที่ใช้บ่อย ๆ จะอธิบายต่อไป
1. กรอบข้อความ (Text fields)
แท็ก input และแอตทริบิวต์ type="text" จะกำหนดการป้อนข้อความ 1 บรรทัด
ตัวอย่าง
ผลลัพธ์ที่ได้คือ
***แท็ก form จะไม่แสดงในเว็บเบราว์เซอร์ และขนาดของกรอบข้อความเริ่มต้นจะมีขนาด 20 ตัวอักษร
2. กรอบรหัสผ่าน (Password fields)
แท็ก input และแอตทริบิวต์ type="password" จะกำหนดการป้อนรหัสผ่าน
ตัวอย่าง
ผลลัพธืที่ได้คือ
***ตัวอักษรในกรอบรหัสผ่านจะแสดงเป็นดาวหรือจุด
3. กล่องเลือกทางเดียว (Radio Buttons)
แท็ก input และแอตทริบิวต์ type="radio" จะกำหนดกล่องเลือกแบบทางเดียว ซึ่งจะกำหนดให้ผู้ใช้งานสามารถได้เพียงตัวเลือกเดียวจากชุดของตัวเลือกทั้งหมด
ตัวอย่าง
ผลลัพธ์คือ
***จะเห็นว่าแอตทริบิวต์ name เป็นชื่อเดียวกัน เป็นการกำหนดให้กล่องเลือกแบบทางเดียวทั้งสองอันเป็นกล่องชุดเดียวกัน ดังนั้น ถ้ากำหนดแอตทริบิวต์ name แตกต่างกัน จะทำให้สามารถเลือกได้ทั้งสองอัน
4. กล่องเลือกแบบหลายทาง (Check boxes)
แท็ก input และแอตทริบิวต์ type="checkbox" จะกำหนดกล่องเลือกแบบหลายทาง
ซึ่งผู้ใช้งานสามารถเลือกตัวเลือกได้มากกว่าหนึ่งตัวเลือกจากตัวเลือกทั้งหมด
ตัวอย่าง
ผลลัพธ์ที่ได้คือ
5. ปุ่มส่งข้อมูล (Submit Button)
แท็ก input และแอตทริบิวต์ type="submit" จะกำหนดปุ่นสำหรับส่งข้อมูลไปยังเซิฟเวอร์
โดยข้อมูลจะส่งไปยังไฟล์ที่กำหนดในแอตทริบิวต์ action และไฟล์ที่ทำการรับข้อมูลจากฟอร์มนี้ จะทำบางสิ่งบางอย่างกับข้อมูลที่รับเข้าไป โดยมีวิธีการส่ง 2 แบบด้วยกัน (ผ่านแอตทริบิวต์ method)
>>get - จะส่งข้อมูลเป็นข้อความต่อท้ายชื่อไฟล์ ซึ่งจะเห็นใน url ของเว็บเบราว์เซอร์
>>post - จะส่งข้อมูลแบบซ่อนผ่านทางเบราว์เซอร์ซึ่งมีความปลอดภัยมากกว่า
ผลลัพธ์ที่ได้คือ
Tag ที่เกี่ยวข้อง
| <form> | กำหนดฟอร์มเพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ |
| <input/> | กำหนดการป้อนข้อมูล |
| <textarea> | กำหนดการป้อนข้อความแบบหลายบรรทัด |
| <label> | กำหนดป้ายชื่อแท็ก input |
| <fieldset> | กำหนดขอบเขตของการป้อนข้อมูล |
| <legend> | กำหนดป้ายชื่อสำหรับขอบเขตของการป้อนข้อมูล(fieldset) |
| <select> | กำหนดรายการที่ให้เลือก(แบบ Drop-down) |
| <optgroup> | กำหนดกลุ่มของตัวเลือก(options) ที่เกี่ยวข้องในรายการที่ให้เลือก |
| <option> | กำหนดตัวเลือกสำหรับรายการที่ให้เลือก |
| <button> | กำหนดปุ่มกด |
นอกจากสร้างฟอร์ม POST ด้วย HTML แล้วเรายังสามารถใช้ Javascript ในการ POST ค่าจะฟอร์มไปที่ ฝั่ง Server ได้ Post Form ด้วย javascript เพื่อส่งข้อมูลให้ FastAPI