ในบทเรียนจะอธิบายเกี่ยวกับ Element Form ที่ใช้งานต่างกัน HTML <form> สามารถมีองค์ประกอบแบบฟอร์มต่อไปนี้ตั้งแต่หนึ่งรายการขึ้นไป:
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
<input> Element
องค์ประกอบแบบฟอร์มที่ใช้มากที่สุดอย่างหนึ่งคือ <input> องค์ประกอบนี้สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ Attribute type
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="ส่ง">
</form>
</body>
</html><label> Element
<label> ใช้กำหนดป้ายกำกับสำหรับองค์ประกอบหลายรูปแบบ <label> มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงฉลากเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบอินพุต
<label> ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือกหรือช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะ <label> สลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย
Attribute for ของ Tag <label> ควรเท่ากับ Attribute id ของ Element <input> เพื่อผูกเข้าด้วยกัน
<select> Element
<select> ใช้กำหนดรายการแบบ Drop-down List:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>select Element</h2>
<br>
<p>select Element ใช้กำหนดรายการ Drop-down List</p>
<br>
<form action="action_page.php">
<label for="cars">เลือกยี่ห้อรถ:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="ส่ง">
</form>
</body>
</html><option> กำหนดตัวเลือกที่สามารถเลือกได้ตามค่าเริ่มต้น รายการแรกในรายการ Drop-down List จะถูกเลือกหากต้องการกำหนดตัวเลือกที่เลือกไว้ล่วงหน้า ให้เพิ่ม Attribute selected ให้กับตัวเลือก:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>คุณสามารถเลือกตัวเลือกล่วงหน้าด้วย Attribute ที่เลือก</p>
<form action="action_page.php">
<label for="cars">เลือกยี่ห้อรถ:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="ส่ง">
</form>
</body>
</html>ค่าที่มองเห็นได้
ใช้ Attribute size เพื่อระบุจำนวนของค่าที่มองเห็นได้:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>ตัวเลือกค่าที่มองเห็นได้</h2>
<p>ใช้ size Attribute เพื่อระบุจำนวนของค่าที่มองเห็นได้</p>
<form action="action_page.php">
<label for="cars">เลือกยี่ห้อรถ:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit" value="ส่ง">
</form>
</body>
</html>การอนุญาตให้เลือกหลายรายการ:
ใช้ Attribute multiple เพื่ออนุญาตให้ผู้ใช้เลือกมากกว่าหนึ่งค่า:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>การอนุญาตให้เลือกหลายรายการ</h2>
<p>ใช้ multiple Attribute เพื่ออนุญาตให้ผู้ใช้เลือกมากกว่าหนึ่งค่า</p>
<form action="action_page.php">
<label for="cars">เลือกยี่ห้อรถ:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit" value="ส่ง">
</form>
<p>กดปุ่ม Ctrl (Windows) / Command (Mac) ค้างไว้เพื่อทำการเลือกหลายตัวเลือก</p>
</body>
</html><textarea> Element
<textarea> ใช้กำหนดช่องใส่หลายบรรทัด (พื้นที่ข้อความ):
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>พื้นที่ข้อความ</h2>
<p>textarea Element ใช้กำหนดฟิลด์อินพุตแบบหลายบรรทัด</p>
<form action="action_page.php">
<textarea name="message" rows="10" cols="30">น้องแมวกำลังวิ่งเล่นในสวน</textarea>
<br><br>
<input type="submit" value="ส่ง">
</form>
</body>
</html>อธิบายเพิ่มเติมจากตัวอย่าง
Attribute rows ระบุจำนวนบรรทัดที่มองเห็นได้ในพื้นที่ข้อความ
Attribute cols ระบุความกว้างที่มองเห็นได้ของพื้นที่ข้อความ
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
คุณยังสามารถกำหนดขนาดของพื้นที่ข้อความได้โดยใช้ CSS:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>การเปลี่ยนขนาดของ textarea</h2>
<p>ใช้ CSS เพื่อเปลี่ยนขนาดของ textarea</p>
<form action="action_page.php">
<textarea name="message" style="width:200px; height:600px;">น้องแมวกำลังวิ่งเล่นในสวน</textarea>
<br>
<input type="submit" value="ส่ง">
</form>
</body>
</html>
<button> Element
<button> ใช้กำหนดปุ่มที่คลิกได้:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>button Element</h2>
<button type="button" onclick="alert('ยินดีต้อนรับ!')">คลิก!</button>
</body>
</html>นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
หมายเหตุ: ระบุ Attribute type สำหรับองค์ประกอบปุ่มเสมอ
เบราว์เซอร์ที่แตกต่างกันอาจใช้ type เริ่มต้นที่แตกต่างกัน
<fieldset> and <legend> Elements
<fieldset> ใช้เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องในแบบฟอร์ม
<legend> ใช้กำหนดคำบรรยายสำหรับ <fieldset> องค์ประกอบ
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>การจัดกลุ่มข้อมูลในแบบฟอร์มด้วย Fieldset</h2>
<p>fieldset ใช้เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องในฟอร์ม และองค์ประกอบคำอธิบายจะกำหนดคำบรรยายสำหรับองค์ประกอบ fieldset</p>
<form action="action_page.php">
<fieldset>
<legend>ข้อมูลผู้ใช้งาน:</legend>
<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="ส่ง">
</fieldset>
</form>
</body>
</html>นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
การจัดกลุ่มข้อมูลในแบบฟอร์มด้วย Fieldset
fieldset ใช้เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องในฟอร์ม และองค์ประกอบคำอธิบายจะกำหนดคำบรรยายสำหรับองค์ประกอบ fieldset
<datalist> Element
<datalist> ใช้ระบุรายการของตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ <input> ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าเมื่อพวกเขาป้อนข้อมูล Attribute list ของ <input> องค์ประกอบต้องอ้างถึง Attribute id ของ <datalist>
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>datalist Element</h2>
<p>datalist Element ระบุรายการตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ input Element</p>
<form action="action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="ส่ง">
</form>
<p><b>หมายเหตุ:</b>ไม่รองรับ Tag datalist ใน Safari เวอร์ชันก่อนหน้า 12.1</p>
</body>
</html><output> Element
<output> แสดงถึงผลลัพธ์ของการคำนวณ (เช่นเดียวกับที่ดำเนินการโดยสคริปต์)
ตัวอย่าง
ทำการคำนวณและแสดงผลใน <output>
<!DOCTYPE html>
<html>
<body>
<h2>output Element</h2>
<p>องค์ประกอบเอาต์พุตแสดงถึงผลลัพธ์ของการคำนวณ</p>
<form action="action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit" value="ส่ง">
</form>
<p><strong>หมายเหตุ::</strong>องค์ประกอบเอาต์พุตไม่รองรับ Edge เวอร์ชันก่อนหน้า 13.</p>
</body>
</html>องค์ประกอบของฟอร์ม HTML
| Tag | คำอธิบาย |
|---|---|
| <form> | กำหนดรูปแบบ HTML สำหรับการป้อนข้อมูลของผู้ใช้ |
| <input> | กำหนดการควบคุม Input สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ Attribute Type |
| <textarea> | กำหนดการควบคุมอินพุตแบบหลายบรรทัด (Text Area) |
| <label> | กำหนด Label สำหรับแท็ก <input> |
| <fieldset> | จัดกลุ่มองค์ประกอบที่เกี่ยวข้องในแบบฟอร์ม |
| <legend> | กำหนดคำอธิบายสำหรับแท็ก <fieldset> |
| <select> | กำหนดรายการ Drop-down List |
| <optgroup> | กำหนดกลุ่มของตัวเลือกที่เกี่ยวข้องในรายการ Drop-down List |
| <option> | กำหนดตัวเลือกรายการของ Drop-down List |
| <button> | กำหนดปุ่มที่สามารถคลิกได้ |
| <datalist> | ระบุรายการตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับการควบคุม Input |
| <output> | กำหนดผลลัพธ์ของการคิดคำนวณ |