form tag
<form> 요소는 정보를 제출하기 위하여 어디서부터 어디까지가 양식인지 지정하는 역할을 한다.
<form action="/signup" method="post">
<div class="form-example">
<label for="name">이름: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">이메일: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="제출하기">
</div>
</form>input tag
<input> 요소로 데이터를 입력 받을 수 있다. type 속성을 통하여 다양한 방법으로 데이터를 받을 수 있다.
text
input 태그의 기본값으로 한줄의 텍스트를 입력 받는다.
<input type="text" id="name">text- 일반적인 텍스트를 받기위해 사용password- 비밀번호를 받기위해 사용email- email 데이터를 받기위해 사용 (이메일 유효성 검증)tel- 전화번호를 받기위해 사용 (모바일 접근시 키패드가 다름)
checkbox
여러개의 체크박스 항목 중 2개 이상 선택할 수 있음. 그리고 체크박스 선택시 선택된 체크박스의 value 값이 서버로 전송된다.
<ul>
<li>
<label for="apple">사과</label>
<input id="apple" type="checkbox" value="apple">
</li>
<li>
<label for="orange">오렌지</label>
<input id="orange" type="checkbox" value="orange">
</li>
<li>
<label for="banana">바나나</label>
<input id="banana" type="checkbox" value="banana">
</li>
</ul>radio
여러개의 라디오 항목 중 1개를 선택할 수 있다. 그리고 라디오 항목 선택시 선택된 항목의 value 값이 서버로 전송된다.
여러개 중 하나를 선택하게 하려면 그 여러 항목의 <radio name=""> name 속성 값을 같은 값으로 그룹핑 해줘야 함.
<ul>
<li>
<label for="strawberry">딸기</label>
<input id="strawberry" name="fruit" type="radio" value="strawberry">
</li>
<li>
<label for="grape">포도</label>
<input id="grape" name="fruit" type="radio" value="grape">
</li>
<li>
<label for="peach">복숭아</label>
<input id="peach" name="fruit" type="radio" value="peach">
</li>
</ul>이 외에 number, range, 날짜/시간, hidden, button 등이 있으나 외울 필요는 없고 쓰면서 익히고 구글링하는 식으로 사용하면 된다.
Form 데이터 태그 속성
required입력값이 필수라는 것을 명시할 수 있다.
readonly필드를 읽기전용으로 필드로 만들 수 있다.
disabled비활성화 시킬 수 있으며 해당 필드는 서버로 전송되지 않는다.
autofocus초기에 해당 필드에 커서를 위치 시킬 수 있다.
placeholder입력 필드가 비어있을 때 해당 입력값의 설명 또는 가이드 문구를 삽입할 수 있다.
fieldset
양식의 여러 컨트롤과 레이블()을 묶을 때 사용한다.
legend
요소는 부모 <fieldset> 콘텐츠의 설명을 나타낸다.
기록하는 습관을 기르고 있습니다.