<form> : 유저에게 정보 입력 장치 마련, 정보 제출 위한 대화형 컨트롤 표현
<Input> : 유저에게 정보를 입력받는 영역. (텍스트, 날짜, 시간 등 매우 다양.)
<button> : 버튼 생성.
사용 ex) <form action="" name="text" method="GET"> <input type="text" name="test"> <button type="submit">제출</button> </form>
위의 예제를 실행하면 텍스트 입력창 표시. 여기에 (내용)을 입력하고 '제출'버튼 클릭 시, action 속성 값이 없어 페이지 이동은 없지만 input의 name 태그로 인하여 주소창에 변화가 생깁니다.
주소창 : form.html?=test=(내용)
<Label> : 사용자 인터페이스 항목 설명
<form action="" name="text" method="GET">
<div>
<label for="foodname">음식 이름 :</label>
<input type="text" name="food" id="foodname">
</div>
<div>
<label>색깔 :
<input type="text" name="color">
</label>
</div>
<button type="submit">제출</button>
</form>
참고로 label태그 안에 input태그를 중첩시키면
label이 바로 input을 가리키므로 id값을 지정할 필요가 없습니다.
단, 그룹핑 시 다른 항목도 동일한 형태로 통일시켜야 가독성이 좋아집니다.
<fieldset> : 여러 input과 label을 묶을 때. form 태그 안에 사용.
<legend> : 범례. 부모 <fieldset> 콘텐츠의 설명 표시.
<!-- <fieldset>, <legend> 이용 -->
<form action="" name="text" method="GET">
<fieldset>
<legend>범례1</legend>
<div>
<label for="foodname">음식 이름 :</label>
<input type="text" name="food" id="foodname" disabled> <!-- 입력 불가 -->
</div>
<div>
<label for="color">색깔 :</label>
<input type="text" name="color">
</div>
</fieldset>
<fieldset>
<legend>범례2</legend>
<div>
<label for="foodname">음식 이름 :</label>
<input type="text" name="food" id="foodname">
</div>
<div>
<label for="color">색깔 :</label>
<input type="text" name="color">
</div>
</fieldset>
<button type="submit">제출</button>
</form>
<input> 의 type속성
(속성)
<!-- 사용 예제 -->
<form action="" method="get">
<div>
<label>NUMBER :
<input type="number" name="number">
</label>
</div>
<div>
<label>RANGE :
<input type="range" name="range">
</label>
</div>
<div>
<label>DATE :
<input type="date" name="date">
</label>
</div>
<div>
<label>MONTH :
<input type="month" name="month">
</label>
</div>
<div>
<label>TIME :
<input type="time" name="time">
</label>
</div>
<div>
<label>CHECKBOX :
<input type="checkbox" name="check1">
<input type="checkbox" name="check2">
<input type="checkbox" name="check3">
<input type="checkbox" name="check4">
</label>
</div>
<div>
<label>RADIO :
<input type="radio" name="radiobuttons" value="r1">
<input type="radio" name="radiobuttons" value="r2" checked>
<input type="radio" name="radiobuttons" value="r3" checked>
<input type="radio" name="radiobuttons" value="r4">
</label>
</div>
<input type="submit" value="제출하기!!!">
<input type="button" value="빈 버튼">
<input type="reset" value="초기화">
<br>
<button type="submit">제출</button>
</form>