แบบฟอร์ม HTML
แบบฟอร์ม HTML ใช้เพื่อรวบรวมอินพุตของผู้ใช้ อินพุตของผู้ใช้มักถูกส่งไปยังเซิร์ฟเวอร์เพื่อทำการประมวลผล
ตัวอย่าง
<แบบฟอร์ม> องค์ประกอบ
องค์ประกอบ HTML <form>ใช้เพื่อสร้างแบบฟอร์ม HTML สำหรับการป้อนข้อมูลของผู้ใช้:
<form>
.
form elements
.
</form>
อิ ลิ<form>เมนต์เป็นคอนเทนเนอร์สำหรับอิลิเมนต์อินพุตประเภทต่างๆ เช่น: ฟิลด์ข้อความ, ช่องทำเครื่องหมาย, ปุ่มตัวเลือก, ปุ่มส่ง ฯลฯ
องค์ประกอบแบบฟอร์มที่แตกต่างกันทั้งหมดจะครอบคลุมอยู่ในบทนี้: องค์ประกอบ แบบ ฟอร์ม HTML
<input> องค์ประกอบ
องค์ประกอบ HTML <input>เป็นองค์ประกอบแบบฟอร์มที่ใช้มากที่สุด
<input>องค์ประกอบสามารถแสดงได้หลายวิธี ขึ้นอยู่กับtype
แอตทริบิวต์
นี่คือตัวอย่างบางส่วน:
| พิมพ์ | คำอธิบาย |
|---|---|
| <input type="text"> | แสดงช่องป้อนข้อความบรรทัดเดียว |
| <input type="radio"> | แสดงปุ่มตัวเลือก (สำหรับเลือกหนึ่งในหลายตัวเลือก) |
| <input type="checkbox"> | แสดงกล่องกาเครื่องหมาย (สำหรับการเลือกศูนย์หรือมากกว่าจากหลายตัวเลือก) |
| <input type="submit"> | แสดงปุ่มส่ง (สำหรับส่งแบบฟอร์ม) |
| <input type="button"> | แสดงปุ่มที่คลิกได้ |
ประเภทอินพุตที่แตกต่างกันทั้งหมดจะครอบคลุมอยู่ในบทนี้: ประเภท อินพุต HTML
ช่องข้อความ
กำหนด ช่อง<input type="text">ป้อนข้อมูลบรรทัดเดียวสำหรับการป้อนข้อความ
ตัวอย่าง
แบบฟอร์มที่มีช่องใส่ข้อความ:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
หมายเหตุ:แบบฟอร์มเองไม่สามารถมองเห็นได้ โปรดทราบด้วยว่าความกว้างเริ่มต้นของฟิลด์อินพุตคือ 20 อักขระ
<label> องค์ประกอบ
สังเกตการใช้<label>องค์ประกอบในตัวอย่างด้านบน
แท็ ก<label>กำหนดป้ายกำกับสำหรับองค์ประกอบแบบฟอร์มจำนวนมาก
องค์ประกอบ<label>นี้มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงป้ายกำกับเมื่อผู้ใช้โฟกัสที่องค์ประกอบอินพุต
องค์ประกอบ<label>นี้ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกในพื้นที่เล็กๆ น้อยๆ (เช่น ปุ่มตัวเลือกหรือช่องทำเครื่องหมาย) - เนื่องจากเมื่อผู้ใช้คลิกข้อความภายใน<label>องค์ประกอบ จะสลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย
แอตทริบิวต์forของ<label>แท็กควรเท่ากับidแอตทริบิวต์ของ<input>
องค์ประกอบเพื่อผูกเข้าด้วยกัน
ปุ่มตัวเลือก
<input type="radio">กำหนดปุ่มตัวเลือก
ปุ่มตัวเลือกให้ผู้ใช้เลือกหนึ่งในตัวเลือกที่จำกัด
ตัวอย่าง
แบบฟอร์มที่มีปุ่มตัวเลือก:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
เลือกภาษาเว็บที่คุณชื่นชอบ:
ช่องทำเครื่องหมาย
<input type="checkbox">กำหนดช่องทำเครื่องหมาย
ช่องทำเครื่องหมายให้ผู้ใช้เลือกตัวเลือก ZERO หรือ MORE จากตัวเลือกจำนวนจำกัด
ตัวอย่าง
แบบฟอร์มที่มีช่องทำเครื่องหมาย:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
ปุ่มส่ง
กำหนด ปุ่ม<input type="submit">สำหรับการส่งข้อมูลแบบฟอร์มไปยังตัวจัดการแบบฟอร์ม
ตัวจัดการแบบฟอร์มมักจะเป็นไฟล์บนเซิร์ฟเวอร์ที่มีสคริปต์สำหรับการประมวลผลข้อมูลที่ป้อนเข้า
ตัวจัดการแบบฟอร์มถูกระบุในaction
แอตทริบิวต์ ของแบบฟอร์ม
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่ง:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
แอตทริบิวต์ชื่อสำหรับ <input>
สังเกตว่าแต่ละช่องใส่จะต้องมีnameแอตทริบิวต์ที่จะส่ง
หากnameละเว้นแอตทริบิวต์ ค่าของช่องใส่จะไม่ถูกส่งเลย
ตัวอย่าง
ตัวอย่างนี้จะไม่ส่งค่าของช่องป้อนข้อมูล "ชื่อ":
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>