목차
form 예제 - <button> 경우
form 정의
form 구문
form 예제 - <fieldset> 경우
form 예제 - <input> 경우
form 예제 - <label> 경우
form 예제 - <meter> 경우
form 예제 - <object> 경우
form 예제 - <output> 경우
form 예제 - <select> 경우
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>
결과보기
주소 복사
랜덤 이동