HTML ปิด การใช้งาน แอตทริบิวต์
ความหมายและการใช้งาน
แอตทริบิวต์
disabledนี้เป็นแอตทริบิวต์บูลีน
เมื่อมีอยู่ แสดงว่าองค์ประกอบนั้นควรถูกปิดใช้งาน
องค์ประกอบที่ถูกปิดใช้งานใช้ไม่ได้
สามารถตั้ง ค่า
disabledแอตทริบิวต์เพื่อป้องกันไม่ให้ผู้ใช้ใช้องค์ประกอบจนกว่าจะตรงตามเงื่อนไขอื่นๆ (เช่น การเลือกช่องทำเครื่องหมาย ฯลฯ) จากนั้น JavaScript สามารถลบค่าที่ปิดใช้งานและทำให้องค์ประกอบใช้งานได้อีกครั้ง
นำไปใช้กับ
สามารถใช้ แอตทริบิวต์
disabledกับองค์ประกอบต่อไปนี้:
| องค์ประกอบ | คุณลักษณะ |
|---|---|
| <button> | พิการ |
| <fieldset> | พิการ |
| <input> | พิการ |
| <optgroup> | พิการ |
| <ตัวเลือก> | พิการ |
| <select> | พิการ |
| <textarea> | พิการ |
ตัวอย่าง
ตัวอย่างปุ่ม
ปุ่มปิดการใช้งาน:
<button type="button" disabled>Click Me!</button>
ตัวอย่าง Fieldset
ปิดการใช้งานกลุ่มขององค์ประกอบแบบฟอร์มที่เกี่ยวข้อง:
<fieldset disabled>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
ตัวอย่างอินพุต
แบบฟอร์ม HTML ที่มีช่องป้อนข้อมูลที่ปิดใช้งาน:
<form
action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"
disabled><br>
<input type="submit" value="Submit">
</form>
ตัวอย่าง Optgroup
กลุ่มตัวเลือกที่ปิดใช้งาน:
<select>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
ตัวอย่างตัวเลือก
รายการดรอปดาวน์ที่มีตัวเลือกหนึ่งตัวเลือกที่ปิดใช้งาน:
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
เลือกตัวอย่าง
รายการดรอปดาวน์ที่ปิดใช้งาน:
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
ตัวอย่างพื้นที่ข้อความ
พื้นที่ข้อความที่ปิดใช้งาน:
<textarea disabled>
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
รองรับเบราว์เซอร์
แอตทริบิวต์disabledมีการสนับสนุนเบราว์เซอร์ต่อไปนี้สำหรับแต่ละองค์ประกอบ:
| Element | |||||
|---|---|---|---|---|---|
| button | Yes | Yes | Yes | Yes | Yes |
| fieldset | Yes | Not supported | Yes | 7.0 | Yes |
| input | 1.0 | 6.0 | 1.0 | 1.0 | 1.0 |
| optgroup | 1.0 | 8.0 | Yes | Yes | Yes |
| option | 1.0 | 8.0 | 1.0 | Yes | Yes |
| select | Yes | Yes | Yes | Yes | Yes |
| textarea | Yes | Yes | Yes | Yes | Yes |