แบบฟอร์ม HTML ใช้เพื่อรวบรวมอินพุตของผู้ใช้ อินพุตของผู้ใช้มักถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="ส่ง">
</form>
<p>หากคุณคลิกปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ "/action_page.php"</p>
</body>
</html>HTML Forms
หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ “/action_page.php”
<form> Element
แท็ก <form> ใช้เพื่อสร้างรูปแบบ HTML สำหรับการป้อนข้อมูลของผู้ใช้:
<form>
.
form elements
.
</form><form> คือคอนเทนเนอร์สำหรับองค์ประกอบอินพุตประเภทต่างๆ เช่น: ช่องข้อความ ช่องทำเครื่องหมาย ปุ่มตัวเลือก ปุ่มส่ง ฯลฯ
<input> Element
<input>เป็นองค์ประกอบรูปแบบที่ใช้มากที่สุด สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ type แอตทริบิวต์
ตัวอย่างบางส่วน:
| พิมพ์ | คำอธิบาย |
|---|---|
| <input type=”text”> | แสดงฟิลด์ป้อนข้อความบรรทัดเดียว |
| <input type=”radio”> | แสดงปุ่มตัวเลือก (สำหรับเลือกหนึ่งในหลายตัวเลือก) |
| <input type=”checkbox”> | แสดงกล่องกาเครื่องหมาย (สำหรับการเลือกหลายตัวเลือก) |
| <input type=”submit”> | แสดงปุ่มส่ง (สำหรับส่งแบบฟอร์ม) |
| <input type=”button”> | แสดงปุ่มที่คลิกได้ |
Text Fields
<input type=”text”>ใช้สำหรับฟิลด์อินพุตการป้อนข้อความบรรทัดเดียว
ตัวอย่าง
แบบฟอร์มที่มีช่องใส่ข้อความ:
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">ชื่อจริง:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี">
</form>
<p>สังเกตได้ว่าตัวฟอร์มเองจะมองไม่เห็น เห็นเฉพาะช่องกรอกข้อความในฟอร์ม</p>
<p>ค่าเริ่มต้นของความกว้างของช่องกรอกข้อความคือ 20 ตัวอักษร</p>
</body>
</html>
Text input fields
สังเกตได้ว่าตัวฟอร์มเองจะมองไม่เห็น เห็นเฉพาะช่องกรอกข้อความในฟอร์ม
ค่าเริ่มต้นของความกว้างของช่องกรอกข้อความคือ 20 ตัวอักษร
<label> Element
<label> เป็นแท็กที่ใช้กำหนดป้ายกำกับสำหรับฟอร์มจำนวนมาก มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงฉลากเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบอินพุต
<label>ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือก/ช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะสลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย
แอตทริบิวต์ for ของแท็ก <label> ควรจะเท่ากับ idแอตทริบิวต์ขององค์ประกอบ <input> เพื่อผูกเข้าด้วยกัน
Radio Buttons (ปุ่มตัวเลือก)
ปุ่มตัวเลือกใช้สำหรับให้ผู้ใช้เลือกหนึ่งในจำนวนตัวเลือกที่จำกัดด้วยรูปแบบ <input type=”radio”>
ตัวอย่าง
แบบฟอร์มที่มีปุ่มตัวเลือก:
<!DOCTYPE html>
<html>
<body>
<h2>ปุ่มตัวเลือก</h2>
<p>เลือกภาษาเว็บที่คุณชื่นชอบ:</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>
</body>
</html>ปุ่มตัวเลือก
เลือกภาษาเว็บที่คุณชื่นชอบ:
Checkboxes(ช่องทำเครื่องหมาย)
ช่องทำเครื่องหมายช่วยให้ผู้ใช้เลือกตัวเลือกดดยการคลิกที่กล่องทำเครื่องหมายด้วยการกำหนดไทป์ <input type=”checkbox”>
ตัวอย่าง
แบบฟอร์มที่มีช่องทำเครื่องหมาย:
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>ใช้ <strong>input type="checkbox"</strong> ในการกำหนด checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="eat" name="eat" value="eat">
<label for="eat">ฉันชอบกิน</label><br>
<input type="checkbox" id="travel" name="travel" value="travel">
<label for="vehicle2"> ฉันชอบเที่ยว</label><br>
<input type="checkbox" id="sleep" name="sleep" value="slepp">
<label for="sleep"> ฉันชอบนอน</label><br><br>
<input type="submit" value="ส่ง">
</form>
</body>
</html>Checkboxes
ใช้ input type=”checkbox” ในการกำหนด checkbox:
ปุ่มส่ง
กำหนด<input type=”submit”>ปุ่มสำหรับการส่งข้อมูลแบบฟอร์มไปยังตัวจัดการแบบฟอร์ม
โดยทั่วไปตัวจัดการฟอร์มคือไฟล์บนเซิร์ฟเวอร์ที่มีสคริปต์สำหรับประมวลผลข้อมูลอินพุต
ตัวจัดการแบบฟอร์มระบุไว้ใน action แอตทริบิวต์ ของแบบฟอร์ม
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่ง:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<br>
<form action="/action_page.php">
<label for="fname">ชื่อจริง:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
<p>หากคุณคลิกปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ"/action_page.php".</p>
</body>
</html>
HTML Forms
หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ”/action_page.php”.
ชื่อแอตทริบิวต์สำหรับ <input>
สังเกตว่าช่องป้อนข้อมูลแต่ละช่องต้องมี name แอตทริบิวต์ที่จะส่ง
ถ้า name แอตทริบิวต์ถูกละไว้ ค่าของฟิลด์อินพุตก็จะไม่ถูกส่งเลย
ตัวอย่าง
ตัวอย่างนี้จะไม่ส่งค่าของฟิลด์อินพุต “ชื่อ”:
<!DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
<form action="/action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" value="เด่น"><br><br>
<input type="submit" value="ส่ง">
</form>
<p>หากคุณคลิกปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ "/action_page.php"</p>
<p>สังเกตว่าจะไม่ส่งค่าของฟิลด์ "ชื่อ" เนื่องจากองค์ประกอบอินพุตไม่มีแอตทริบิวต์ชื่อ</p>
</body>
</html>The name Attribute
หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ “/action_page.php”
สังเกตว่าจะไม่ส่งค่าของฟิลด์ “ชื่อ” เนื่องจากองค์ประกอบอินพุตไม่มีแอตทริบิวต์ชื่อ
