แอตทริบิวต์รูปแบบ HTML

❮ ก่อนหน้า แอตทริบิวต์HTML ทั้งหมด ถัดไป ❯

ความหมายและการใช้งาน

แอตทริบิวต์formระบุรูปแบบที่เป็นขององค์ประกอบ

ค่าของแอตทริบิวต์นี้ต้องเท่ากับidแอตทริบิวต์ของ<form> องค์ประกอบในเอกสารเดียวกัน

นำไปใช้กับ

สามารถใช้ แอตทริบิวต์formกับองค์ประกอบต่อไปนี้:

องค์ประกอบ	คุณลักษณะ
<button>	รูปร่าง
<fieldset>	รูปร่าง
<input>	รูปร่าง
<label>	รูปร่าง
<เมตร>	รูปร่าง
<วัตถุ>	รูปร่าง
<เอาท์พุท>	รูปร่าง
<select>	รูปร่าง
<textarea>	รูปร่าง

ตัวอย่าง

ตัวอย่างปุ่ม

ปุ่มที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

ตัวอย่าง Fieldset

<fieldset> องค์ประกอบที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" method="get" id="form1">
What is your favorite color? <input type="text" name="fav_color"><br>
<input type="submit">
</form>

<fieldset form="form1">
Name: <input type="text" name="username"><br>
Email: <input type="text" name="usermail"><br>
</fieldset>

ตัวอย่างอินพุต

ช่องใส่ที่อยู่นอกแบบฟอร์ม HTML (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

ตัวอย่างฉลาก

<label> องค์ประกอบที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" id="form1">
<input type="radio" id="html" name="fav_language" value="HTML"><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>

<label for="html">HTML</label>

ตัวอย่างมิเตอร์

<meter> องค์ประกอบที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter>

ตัวอย่างวัตถุ

<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object>

ตัวอย่างผลลัพธ์

<output> องค์ประกอบที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

เลือกตัวอย่าง

รายการดรอปดาวน์ที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" id="carform">
Firstname:<input type="text" name="fname">
<input type="submit">
</form>

<select name="carlist" form="carform">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

ตัวอย่างพื้นที่ข้อความ

พื้นที่ข้อความที่อยู่นอกแบบฟอร์ม (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):

<form action="/action_page.php" id="usrform">
Name: <input type="text" name="usrname">
<input type="submit">
</form>

<textarea name="comment" form="usrform">Enter text here...</textarea>

รองรับเบราว์เซอร์

แอตทริบิวต์formมีการสนับสนุนเบราว์เซอร์ต่อไปนี้สำหรับแต่ละองค์ประกอบ:

Element
button	10.0	Not supported	4.0	5.1	9.5
fieldset	Not supported	Not supported	Not supported	Not supported	Not supported
input	9.0	Not supported	4.0	5.1	10.6
label	Yes	Yes	Yes	Yes	Yes
meter	Not supported	Not supported	Not supported	Not supported	Not supported
object	Not supported	Not supported	Not supported	Not supported	Not supported
output	Yes	Not supported	Yes	Yes	Yes
select	Yes	Not supported	Yes	Yes	Yes
textarea	Yes	Not supported	Yes	Yes	Yes