HTML 양식 속성
정의 및 사용
속성 은 form요소가 속한 형식을 지정합니다.
이 속성의 값은
동일한 문서에 있는 요소 의 id속성 과 같아야 합니다.
<form>
에 적용
속성 은 form다음 요소에 사용할 수 있습니다.
| 집단 | 기인하다 |
|---|---|
| <버튼> | 형태 |
| <필드셋> | 형태 |
| <입력> | 형태 |
| <라벨> | 형태 |
| <미터> | 형태 |
| <객체> | 형태 |
| <출력> | 형태 |
| <선택> | 형태 |
| <텍스트 영역> | 형태 |
예
버튼 예
양식 외부에 있는 버튼(여전히 양식의 일부임):
<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> 요소(그러나 여전히 양식의 일부임):
<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>
개체 예
양식 외부에 있는 <object> 요소(그러나 여전히 양식의 일부):
<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>
출력 예
양식 외부에 있는 <출력> 요소(그러나 여전히 양식의 일부임):
<form action="/action_page.php" id="numform"
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">
<br><br>
<input type="submit">
</form>
<output form="numform" name="x" for="a b"></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 |