ในบทเรียนจะอธิบายเกี่ยวกับ 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
องค์ประกอบเอาต์พุตแสดงถึงผลลัพธ์ของการคำนวณ
หมายเหตุ::องค์ประกอบเอาต์พุตไม่รองรับ 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> | กำหนดผลลัพธ์ของการคิดคำนวณ |