HTML Form Elements

ในบทเรียนจะอธิบายเกี่ยวกับ element form ที่ใช้งานต่างกัน HTML <form> สามารถมีองค์ประกอบแบบฟอร์มต่อไปนี้ตั้งแต่หนึ่งรายการขึ้นไป:

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


<input> Element

องค์ประกอบแบบฟอร์มที่ใช้มากที่สุดอย่างหนึ่งคือ<input> องค์ประกอบนี้สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ 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>

The input Element





<label> Element

<label>ใช้กำหนดป้ายกำกับสำหรับองค์ประกอบหลายรูปแบบ <label>มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงฉลากเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบอินพุต

<label>ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือกหรือช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะ <label> สลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย

แอตทริบิวต์ for ของ <label> แท็กควรเท่ากับidแอตทริบิวต์ขององค์ประกอบ <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>

select Element


select element ใช้กำหนดรายการแ drop-down list:


<option>กำหนดตัวเลือกที่สามารถเลือกได้ตามค่าเริ่มต้น รายการแรกในรายการdrop-down listจะถูกเลือกหากต้องการกำหนดตัวเลือกที่เลือกไว้ล่วงหน้า ให้เพิ่ม selected แอตทริบิวต์ให้กับตัวเลือก:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2>Pre-selected Option</h2>

<p>คุณสามารถเลือกตัวเลือกล่วงหน้าด้วยแอตทริบิวต์ที่เลือก:</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>

Pre-selected Option


คุณสามารถเลือกตัวเลือกล่วงหน้าด้วยแอตทริบิวต์ที่เลือก:


ค่าที่มองเห็นได้

ใช้ size attribute เพื่อระบุจำนวนของค่าที่มองเห็นได้:

ตัวอย่าง

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

ตัวเลือกค่าที่มองเห็นได้


ใช้ size attribute เพื่อระบุจำนวนของค่าที่มองเห็นได้




การอนุญาตให้เลือกหลายรายการ:

ใช้ multiple แอตทริบิวต์เพื่ออนุญาตให้ผู้ใช้เลือกมากกว่าหนึ่งค่า:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2>การอนุญาตให้เลือกหลายรายการ</h2>

<p>ใช้ multiple แอตทริบิวต์เพื่ออนุญาตให้ผู้ใช้เลือกมากกว่าหนึ่งค่า</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>

การอนุญาตให้เลือกหลายรายการ


ใช้ multiple แอตทริบิวต์เพื่ออนุญาตให้ผู้ใช้เลือกมากกว่าหนึ่งค่า





กดปุ่ม Ctrl (windows) / Command (Mac) ค้างไว้เพื่อทำการเลือกหลายตัวเลือก


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

พื้นที่ข้อความ


textarea elementใช้กำหนดฟิลด์อินพุตแบบหลายบรรทัด




อธิบายเพิ่มเติมจากตัวอย่าง

แอตทริบิวต์ rows ระบุจำนวนบรรทัดที่มองเห็นได้ในพื้นที่ข้อความ

แอตทริบิวต์ 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>

การเปลี่ยนขนาดของTextarea


ใช้ CSS เพื่อเปลี่ยนขนาดของ textarea:




button Element

<button>ใช้กำหนดปุ่มที่คลิกได้:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2> button Element</h2>

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

</body>
</html>

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

button Element


หมายเหตุ:ระบุ 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> ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าเมื่อพวกเขาป้อนข้อมูลแอตทริบิวต์listของ<input>องค์ประกอบต้องอ้างถึง 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>ไม่รองรับแท็ก datalist ใน Safari เวอร์ชันก่อนหน้า 12.1</p>

</body>
</html>

datalist Element


datalist element ระบุรายการตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ input element.



หมายเหตุ:ไม่รองรับแท็ก datalist ใน Safari เวอร์ชันก่อนหน้า 12.1


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

output Element


องค์ประกอบเอาต์พุตแสดงถึงผลลัพธ์ของการคำนวณ


0 100 + =


หมายเหตุ::องค์ประกอบเอาต์พุตไม่รองรับ Edge เวอร์ชันก่อนหน้า 13.


องค์ประกอบของฟอร์ม HTML

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