< form 요소> : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획 , 회원가입, 주문서 등
ㅡ 자식태그 label , input ,button , select , textarea 등이 있다.
* form의 속성인 method 의 값
ㅡ get (입력값이 url 뒤에 붙여서 표시됨, 검색같은거)
ㅡ post (요청 본문을 서버에 전송, 입력정보 안보임)
* label 과 input 은 세트이다. ( id명 동일하게 )
id로 연결 하는 방법과
<form action="result.html" method="get">
<label for="foodname">음식이름:</label>
<input type="text" name="food" id="foodname" />
<button type="submit">제출</button>
label의 자식에 input을 적는 방법 있음.
<label
>색깔:
<input type="text" name="color" />
</label>
<button type="submit">제출</button>
</form>
* fieldset 부모(하나로 묶음 박스) > legend 첫번째 자식 (범례) - disable속성 가능
<fieldset >
<legend>범례1</legend>
<form action="result.html" method="get">
<label for="foodname">음식이름:</label>
<input type="text" name="food" id="foodname" disabled />
</fieldset>
<fieldset disabled>
<legend>범례2</legend>
<form action="result.html" method="get">
<label for="foodname">음식이름:</label>
<input type="text" name="food" id="foodname" />
</fieldset>
<form action="result.html" method="get">
<label for="foodname">음식이름:</label>
<input type="text" name="food" id="foodname" />
<button type="submit">제출</button>
* input 의 속성 ( 자식요소 가질 수 없음)
ㅡ minlength 최소글자수 , maxlenghth 최대글자
ㅡ type, name(데이터전달명), placeholder(힌트), autocomplete="on" (자동완성 ,"off" 끄기), required(필수입력)
ㅡ disabled (비활성화- 자바스크립트 값에서 많이 씀, 전송안됨)
ㅡ readonly (읽기전용, value로 값 미리지정 가능,전송됨)
ㅡ score (점수, min="0" max="10" step="2" 2씩올라감)
ㅡ input 의 type 속성값 예제 ( text, password, email, date ,range, submit, reset, button 등)
<form action="" method="get">
<label for="text_id">text : </label>
<input type="text" name="text" id="text_id" />
<div>
<label>
password :
<input type="password" name="password" minlength="8" maxlength="10" />
</label>
</div>
<div>
<label>
email :
<input type="email" name="email" />
</label>
</div>
<div>
<label>
NUMMBER :
<input type="number" name="number" />
</label>
</div>
<div>
<label>
RANGE :
<input type="range" name="score" min="0" max="10" step"2" />
</label>
</div>
<div>
<label>
DATE :
<input type="date" name="date" />
</label>
</div>
<button type="submit">제출</button>
<input type="submit" value="제출하기" />
<input type="button" /> 형태만 만들어주고 제출안됨
<input type="reset" />
</form>
ㅡ input 의 type 속성값 예제2 ( checkbox 다중선택, cheked 자동체크, radio 하나선택(name같으면 하나만됨) 등)
ㅡ input 의 type 속성값 예제3 ( list > datalist 가능한 선택지- option을 여러개 둔다)
<form action="" method="get">
<label for="like">좋아하는 영화: </label>
<input type="text" id="like" name="movie" list="movie-list" />
<datalist id="movie-list">
<option>토이스토리1</option>
<option>토이스토리2</option>
<option>토이스토리3</option>
</datalist>
<input type="submit" />
</form>
* <button> 버튼요소: 자식요소 가질 수 있음
ㅡ type속성의 종류 : submit 제출 , reset 초기화 , button 클릭했을때 아무것도 없고 자바스크립트로 연결 가능
* <select> 고르기 > <option> 자식
<form action="" method="get">
<label for="color">색상 선택: </label>
<select name="color" id="color" required>
<option value="">골라주세요</option>
<optgroup label="top">
<option value="red">빨강</option>
<option value="blue">파랑</option>
<option value="pink" selected>핑크</option>
</optgroup>
<optgroup label="botoom">
<option value="green">초록</option>
<option value="black">검정</option>
</optgroup>
</select>
<input type="submit" />
</form>
* <textarea> 댓글, 게시글
<label for="comment">댓글 :</label>
<textarea name="comment" id="comment" rows="행"></textarea>
<input type="submit" />
