HTML Form Elements

องค์ประกอบที่ใช้ภายใน `<form>`

แท็ก <form> สามารถมีองค์ประกอบได้หลายแบบ เช่น

<input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup>

`<input>`

เป็นองค์ประกอบที่ใช้บ่อยที่สุดในแบบฟอร์ม ลักษณะการแสดงผลขึ้นอยู่กับค่าในแอตทริบิวต์ type

ตัวอย่าง:

				
					<label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" name="fname">

`<label>`

ใช้กำหนดข้อความกำกับช่องข้อมูล (<input>) ช่วยให้โปรแกรมอ่านหน้าจอ (screen reader) อ่านชื่อช่องได้ และทำให้ผู้ใช้คลิกที่ข้อความแทนการคลิกที่ช่องได้ง่ายขึ้น

แอตทริบิวต์ for ของ <label> ต้องตรงกับ id ของ <input> เพื่อเชื่อมกัน

`<select>`

ใช้สร้าง รายการแบบดรอปดาวน์ (Drop-down List)

				
					<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>

<option> ใช้กำหนดตัวเลือกในรายการ ตัวเลือกแรกจะถูกเลือกโดยอัตโนมัติ

หากต้องการกำหนดตัวเลือกเริ่มต้น ให้เพิ่มแอตทริบิวต์ selected

				
					<option value="fiat" selected>Fiat</option>

จำนวนที่มองเห็น:

ใช้แอตทริบิวต์ size

				
					<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>

เลือกหลายตัว:

ใช้แอตทริบิวต์ multiple

				
					<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>

`<textarea>`

ใช้สร้างช่องกรอกข้อความหลายบรรทัด

				
					<textarea name="message" rows="10" cols="30">น้องแมวกำลังวิ่งเล่นในสวน</textarea>

rows จำนวนบรรทัดที่มองเห็น
cols ความกว้างของช่องข้อความ

หรือกำหนดขนาดด้วย CSS ได้เช่นกัน:

				
					<textarea name="message" style="width:200px; height:600px;">น้องแมวกำลังวิ่งเล่นในสวน</textarea>

`<button>`

ใช้สร้างปุ่มที่สามารถคลิกได้ ทั้งนี้ควรกำหนดค่า type เสมอ เช่น “button”, “submit”, “reset” เพราะเบราว์เซอร์บางตัวอาจใช้ค่าเริ่มต้นต่างกัน

				
					<button type="button" onclick="alert('ยินดีต้อนรับ!')">คลิก!</button>

`<fieldset>`

ใช้สำหรับจัดกลุ่มข้อมูลที่เกี่ยวข้องกันในฟอร์ม

<fieldset> คือกรอบที่ครอบกลุ่มข้อมูล
<legend> คือหัวเรื่องของกลุ่มนั้น

				
					<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>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:

`<datalist>`

ใช้กำหนด รายการตัวเลือกอัตโนมัติ (auto-suggestions) สำหรับ <input>

list ของ <input> ต้องตรงกับ id ของ <datalist>

				
					<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

`<output>`

ใช้แสดง ผลลัพธ์จากการคำนวณ (เช่น จากสคริปต์ JavaScript)

				
					<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>

องค์ประกอบของ HTML Form Elements

แท็ก	คำอธิบาย
`<form>`	กำหนดแบบฟอร์มสำหรับรับข้อมูลจากผู้ใช้
`<input>`	สร้างช่องรับข้อมูล
`<textarea>`	ช่องกรอกข้อความหลายบรรทัด
`<label>`	ป้ายกำกับช่องข้อมูล
`<fieldset>`	จัดกลุ่มองค์ประกอบในฟอร์ม
`<legend>`	หัวข้อของ `<fieldset>`
`<select>`	สร้างรายการแบบดรอปดาวน์
`<optgroup>`	จัดกลุ่มตัวเลือกในดรอปดาวน์
`<option>`	ตัวเลือกในดรอปดาวน์
`<button>`	ปุ่มที่คลิกได้
`<datalist>`	รายการตัวเลือกที่ผู้ใช้เลือกได้และพิมพ์
`<output>`	แสดงผลลัพธ์ของการคำนวณ

HTML Form Elements

องค์ประกอบที่ใช้ภายใน <form>

<input>

<label>

<select>

จำนวนที่มองเห็น:

เลือกหลายตัว:

<textarea>

<button>

<fieldset>

<datalist>

<output>