form
<body>
<form action="경로~~" method="post">
<input>
</form>
</body>- form tag 안에 input tag를 넣어 입력 개체를 만들 수 있다
- form action: 작성한 내용이 어떤 서버 경로로 전달될 지 입력
- form method: 작성한 내용이 어떤 방식으로 서버에 전달될 지 입력
input type
<body>
<form>
<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
<input type="checkbox">
<input type="submit">
<!-- <button type="submit">전송</button> -->
<select>
<option>option 1</option>
<option>option 2</option>
</select>
<textarea rows="10"></textarea>
</form>
</body>- input type 지정에 따라 용도에 맞는 input box가 자동 생성된다
- (참고) type="submit" 은 전송 버튼인데, 버튼의 type="submit" 으로도 구현 가능하다 - select 는 dropdown list로 option tab들이 선택지로 보여진다
- textarea는 더 큰 서술형 input box로 default로 보여지는 row 숫자를 지정할 수 있다
- (참고) 더 많은 type과 속성이 있으므로, 필요할 때마다 찾아서 사용하면 된다
input 속성
<body>
<form>
<input placeholder="hint text" value="id0000" name="age">
</form>
</body>- placeholder > input box의 hint text
- value > input box에 미리 입력된 값
- name > 서버 기능 개발에 필요한 input의 이름을 설정
input selector 활용
input[type=text] {
padding: 10px;
}- input tag 중 특정 type만 스타일을 적용하고 싶을 때, html 속성을 css에서 정의하여 지정할 수 있다
Label tag
<body>
<form>
<input id="Sub" type="checkbox">
<label for="Sub">Subscribe</label>
</form>
</body>- check-box input에 상응하는 Text를 추가해줄 때, span tag 대신 label tag를 사용할 수 있다
- Label tag의 특징은 label for의 값과 input check-box 의 id가 같으면 브라우저에서 'Subscribe' 라는 text를 클릭해도 check-box activate/deactivate 해줄 수 있다
eunji yang