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

❮ ก่อนหน้า ถัดไป ❯

บทนี้อธิบายองค์ประกอบแบบฟอร์ม HTML ที่แตกต่างกันทั้งหมด

HTML <แบบฟอร์ม> องค์ประกอบ

องค์ประกอบ HTML <form>สามารถมีองค์ประกอบแบบฟอร์มต่อไปนี้อย่างน้อยหนึ่งรายการ:

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

<input> องค์ประกอบ

องค์ประกอบแบบฟอร์มที่ใช้มากที่สุดอย่างหนึ่งคือ<input>องค์ประกอบ

องค์ประกอบ<input>สามารถแสดงได้หลายวิธี ขึ้นอยู่กับtype แอตทริบิวต์

ตัวอย่าง

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

ค่าต่างๆ ของtype แอตทริบิวต์จะกล่าวถึงในบทถัดไป: ประเภท อินพุต HTML

<label> องค์ประกอบ

องค์ประกอบ<label>กำหนดป้ายกำกับสำหรับองค์ประกอบแบบฟอร์มหลายรายการ

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

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

แอตทริบิวต์forของ<label>แท็กควรเท่ากับidแอตทริบิวต์ของ<input> องค์ประกอบเพื่อผูกเข้าด้วยกัน

<select> องค์ประกอบ

องค์ประกอบ<select>กำหนดรายการแบบหล่นลง:

ตัวอย่าง

<label for="cars">Choose a car:</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>

องค์ประกอบ<option>กำหนดตัวเลือกที่สามารถเลือกได้

ตามค่าเริ่มต้น รายการแรกในรายการดรอปดาวน์จะถูกเลือก

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

ตัวอย่าง

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

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

ตัวอย่าง

<label for="cars">Choose a car:</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>

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

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

ตัวอย่าง

<label for="cars">Choose a car:</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>

<textarea> องค์ประกอบ

องค์ประกอบ<textarea>กำหนดช่องป้อนข้อมูลหลายบรรทัด (พื้นที่ข้อความ):

ตัวอย่าง

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

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

แอตทริบิวต์colsระบุความกว้างที่มองเห็นได้ของพื้นที่ข้อความ

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

คุณยังสามารถกำหนดขนาดของพื้นที่ข้อความโดยใช้ CSS:

ตัวอย่าง

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

<button> องค์ประกอบ

องค์ประกอบ<button>กำหนดปุ่มที่สามารถคลิกได้:

ตัวอย่าง

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

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

หมายเหตุ:ระบุtypeแอตทริบิวต์สำหรับองค์ประกอบปุ่มเสมอ เบราว์เซอร์ที่แตกต่างกันอาจใช้ประเภทเริ่มต้นที่แตกต่างกันสำหรับองค์ประกอบปุ่ม

<fieldset> และ <legend> Elements

องค์ประกอบ<fieldset>นี้ใช้เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องในแบบฟอร์ม

องค์ประกอบ<legend>กำหนดคำอธิบายสำหรับ<fieldset> องค์ประกอบ

ตัวอย่าง

<form action="/action_page.php">
<fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</fieldset>
</form>

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

<datalist> องค์ประกอบ

องค์ประกอบ<datalist>ระบุรายการของตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ<input>องค์ประกอบ

ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าเมื่อป้อนข้อมูล

แอตทริบิวต์listของ<input>องค์ประกอบ ต้องอ้างอิงถึง idแอตทริบิวต์ของ<datalist>องค์ประกอบ

ตัวอย่าง

<เอาท์พุท> องค์ประกอบ

องค์ประกอบ นี้<output>แสดงถึงผลลัพธ์ของการคำนวณ (เช่นเดียวกับที่ทำโดยสคริปต์)

ตัวอย่าง

ทำการคำนวณและแสดงผลใน<output>องค์ประกอบ:

แบบฝึกหัด HTML