[attribute] HTML - form 속성 - 해당 요소가 속하는 폼요소 지정 (= form속성 = 폼속성) ※ 폼 밖에 위치 시, 폼소속 지정

1. form 예제 - <button> 경우
2. form 정의
3. form 구문
4. form 예제 - <fieldset> 경우
5. form 예제 - <input> 경우
6. form 예제 - <label> 경우
7. form 예제 - <meter> 경우
8. form 예제 - <object> 경우
9. form 예제 - <output> 경우
10. form 예제 - <select> 경우
11. form 예제 - <textarea> 경우

form 예제 - <button> 경우

 

<form action="/action_page.php" method="get" id="hz">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br><br>

  <label for="nick">별명:</label>

  <input type="text" id="nick" name="nick">

</form>

<button type="submit" form="hz" value="확인">확인</button>

 

결과보기

form 정의

 

해당 요소가 속하는 form 요소 지정.

 

---

 

1.

form 속성의 값은 같은 문서 안 <form> 요소의 id와 일치해야 함.

 

2. form 속성 사용 가능 태그 종류

<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>

 

3.

주요 최신 브라우저 모두 지원. 

단, <meter>, <object>, <output> 요소는 아직 지원 브라우저 없음.

 

form 구문

 

• <button form="form_id">
• <fieldset form="form_id">
• <input form="form_id">
• <label form="form_id">
• <meter form="form_id">
• <object form="form_id">
• <output form="form_id">
• <select form="form_id">
• <textarea form="form_id">

 

---

[속성값]

 

form_id

해당 요소가 속하는 폼 요소의 id 속성값

 

form 예제 - <fieldset> 경우

 

<form action="/action_page.php" method="get" id="hz">

  <label for="lang">좋아하는 코딩언어?</label>

  <input type="text" id="lang" name="lang">

  <input type="submit">

</form>

<fieldset form="hz">

  <legend>이름/별명:</legend>

  <label for="name">이름:</label>

  <input type="text" id="name" name="name" form="hz"><br><br>

  <label for="nick">별명:</label>

  <input type="text" id="nick" name="nick" form="hz">

</fieldset>

 

결과보기

form 예제 - <input> 경우

 

<form action="/action_page.php" id="hz">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br><br>

  <input type="submit" value="확인">

</form>

<label for="nick">별명:</label>

<input type="text" id="nick" name="nick" form="hz">

 

결과보기

form 예제 - <label> 경우

 

<form action="/action_page.php" id="hz">

  <input type="radio" id="html" name="lang" value="HTML"><br>

  <input type="radio" id="css" name="lang" value="CSS">

  <label for="css">CSS</label><br>

  <input type="radio" id="javascript" name="lang" value="JavaScript">

  <label for="javascript">JavaScript</label><br><br>

  <input type="submit" value="확인">

</form>

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

 

결과보기

form 예제 - <meter> 경우

 

<form action="/action_page.php" method="get" id="hz">

이름: <input type="text" name="name"><br>

<input type="submit" value="확인">

</form>

<p><label for="score">평점:</label>

<meter id="score" form="hz" name="score" min="0" low="40" high="90" max="100" value="95"></meter></p>

form 예제 - <object> 경우

 

<form action="/action_page.php" id="hz">

이름: <input type="text" name="name"><br>

<input type="submit" value="확인">

</form>

<object form="hz" data="homzzang.jpg" width="300" height="200"></object>

form 예제 - <output> 경우

 

<form action="/action_page.php" id="hz" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

+ <input type="number" id="b" name="b" value="25">

<br><br>

<input type="submit">

</form>

<output form="hz" id="x" name="x" for="a b"></output>

 

결과보기

form 예제 - <select> 경우

 

<form action="/action_page.php" id="hz">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name">

  <input type="submit" value="확인">

</form>

<label for="lang">언어 선택:</label>

<select id="lang" name="lang" form="hz">

  <option value="html">HTML</option>

  <option value="css">CSS</option>

  <option value="js">JS</option>

</select>

 

결과보기

form 예제 - <textarea> 경우

 

<form action="/action_page.php" id="hz">

  이름: <input type="text" name="name">

  <input type="확인">

</form>

<br>

<textarea rows="4" cols="50" name="comment" form="hz">

자기소개 입력</textarea>

결과보기