HTML
폼과 폼요소
폼
- 폼은 사용자가 값을 입력할 수 있는 입력요소(입력필드, 체크박스, 라디오버튼, 콤보박스 등)를 제공하는 것이다.
- 모든 입력요소들은 <form> 태그 안에 정의되어야 한다.
폼요소
- 폼요소는 사용자가 값을 입력하거나, 선택하거나, 체크할 수 있는 것들이다.
- 대표적인 폼요소 태그
- <input>, <select>, <textarea>, <button>
- 입력폼 예시
<form>
<label>이름</label>
<input type="text" />
<label>아이디</label>
<input type="text" />
<label비밀번호</label>
<input type="password" />
<label>나이</label>
<input type="number" />
<label>생일</label>
<input type="date" />
<label>프로필사진</label>
<input type="file" />
<label>학력</label>
<select>
<option> 고등학교졸업</option>
<option> 초대졸</option>
<option> 4년제 졸</option>
</select>
<label>자기 소개</label>
<textarea></textarea>
</form>
- <form> 태그의 주요 속성
- action
- form입력값을 전달받을 서버측의 웹애플리케이션 이름
- 이름은 폴더경로를 포함하는 jsp파일의 이름이다.
- method
- form입력값을 서버로 전달하는 방식(GET, POST 중 하나)을 정의하는 속성
- GET : form 입력값을 url뒤에 붙여서 보낸다. 설정하지 않으면 기본값이 GET이다.
- POST : form 입력값을 요청메세지의 body에 담아서 서버로 보낸다.
- 첨부파일을 서버로 보낼 때
- 많은 입력값(종류가 많거나 크기가 크거나)를 서버로 보낼 때
- 서버로 보내는 입력값을 url에 노출시키고 싶지 않을 때
- 서버로 전달되는 데이터에 대한 사이즈 제한이 없다.
- enctype
- form입력값을 서버로 보낼 때 어떤 방식으로 변환해서 보낼 것인지를 정의하는 속성
- application/x-www-form-urlencoded
입력필드이름=입력값&입력필드이름=입력값&입력필드이름=입력값
- 서버로 전달할 폼입력값을 변환하는 가장 일반적인 방식이다.
- 단, 폼입력값에 첨부파일이 있는 경우에는 사용할 수 없다. 첨부파일(프로필사진, 이력서, 동영상 등)을 전달할 수 없다.
- multipart/form-data
- 폼입력값에 첨부파일이 있는 경우 사용되는 폼입력값 변환방식이다.
- 첨부파일이 있는 폼은 반드시 로 설정해야 한다.
- 서버로 전달되는 값의 형식
------------------------------------임의의16진수 숫자
Content-Disposition: form-data; name="username"
홍길동
------------------------------------임의의16진수 숫자
Content-Disposition: form-data; name="userid"
hong
------------------------------------임의의16진수 숫자
Content-Disposition: form-data; name="photo"; filename="a.jpg"
Content-Type: image/jpg
------------------------------------임의의16진수 숫자
id와 class 속성
- id와 class는 모든 태그들이 가지는 공통 속성이다.
- id 속성
- 특정 엘리먼트(태그)를 식별하기 위한 용도로 사용된다.
- 웹문서 전체에서 똑같은 id 속성값을 가진 태그는 없어야 한다.
- id의 속성의 값은 고유해야 한다.
- id 속성의 값은 숫자로 시작할 수 없다.
<h3>학생 테이블</h3>
<table id="student-table"> ... </table>
<h3>교수 테이블</h3>
<table id="professor-table"> ... </table>
<h3>교직원 테이블</h3>
<table id="employee-table"> ... </table>
<form id="register-form">
<label>이름</label> <input type="text" id="user-name" />
<label>비밀번호</label> <input type="password" id="user-password" />
</form>
<div id="image-gallary">
<img src="/resources/images/product1.png" alt="1번상품이미지" id="img-thumb-1" />
<img src="/resources/images/product1.png" alt="1번상품이미지" id="img-thumb-2" />
<img src="/resources/images/product1.png" alt="1번상품이미지" id="img-thumb-3" />
<img src="/resources/images/product1.png" alt="1번상품이미지" id="img-thumb-4" />
</div>
- id 속성의 용도
- 특정 아이디값을 가진 태그(엘리먼트)에만 스타일을 지정할 때
- 특정 아이디값을 가진 태그를 선택해서 javascript로 조작해야 할 때
- class 속성
- 같은 클래스값을 가진 태그는 같은 스타일이 적용되게 하기위한 용도로 사용된다.
- html 파일내에 같은 클래스값을 가진 태그들이 여러 개 있을 수 있다.
<div id="wrapper">
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
</div>
- class속성은 여러 개의 속성값을 가지는 것이 가능하다.
<div id="container" class="nav navbar navbar-default">
<button class="btn btn-primary btn-sm">등록</button>
