① form Tag
로그인이나 회원가입 폼과 같이 웹 페이지에서의 입력 양식을 의미.
Form Tag의 속성
- action : 폼 데이터가 전송되는 백엔드 url
- method : 폼 전송 방식 (GET / POST)
<form action="http://jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Bret"><br>
<input type="submit" value="Submit">
</form>
- GET 방식?
URL 끝에 데이터를 첨부해서 전송하는 방식.
ex) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
전송 URL 바로 뒤에 '?'를 통해서 데이터의 시작을 알려주고, key-value 형태의 데이터를 추가.
1개 이상의 전송 데이터는 '&'로 구분.
항상 노출이 되므로 보안에 중요한 데이터는 사용할 수 없으며, URL은 최대 255자까지 가능하다.
- POST 방식?
패킷의 본문 안에 데이터를 넣어서 전송하는 방식.
ex) http://jsonplaceholder.typicode.com/posts
URL에 전송 데이터가 노출되지 않아 보안상 GET 방식보다 안전하지만 속도가 느림.
② input Tag
form 태그는 화면에 보이지 않는 추상적인 태그인 반면에,
input 태그는 실제로 사용자가 양식을 입력하기 위해 사용되는 태그.
닫는 태그가 존재하지 않음.
input 태그의 속성
- type
- value : 입력 태그의 초기값을 말하며 사용자가 변경 가능.
- name : 서버로 전달되는 이름.
input 태그의 type 속성
- button : 버튼 생성
- checkbox : checkbox 생성
- color : 컬러 선택 생성
- date : date control (년월일) 생성
- datetime : date & time control (년월일시분초) 생성. HTML spec에서 drop되었다.
- datetime-local : 지역 date & time control (년월일시분초) 생성
- email : 이메일 입력 form 생성. subumit 시 자동 검증한다.
- file : 파일 선택 form 생성
- hidden : 감추어진 입력 form 생성
- image : 이미지로 된 submit button 생성
- month : 월 선택 form 생성
- number : 숫자 입력 form 생성
- password : password 입력 form 생성
- radio : radio button 생성
- range : 범위 선택 form 생성
- reset : 초기화 button 생성
- search : 검색어 입력 form 생성
- submit : 제출 button 생성
- tel전화번호 입력 form 생성
- text : 텍스트 입력 form 생성
- time : 시간 선택 form 생성
- url : url 입력 form 생성
- week : 주 선택 입력 form 생성
③ select Tag
드롭다운 리스트를 만드는 태그.
서버에 전송되는 데이터는
1. select 요소의 name 속성을 키로,
2. option 요소의 value 속성을 값으로,
즉, key = value의 형태로 전송.
- select tag : select form 생성
- option : option 생성
- optgroup : option을 그룹화 // 중첩 목록과 비슷한 개념인 듯!
<select name="train">
<optgroup label="서울역">
<option value="ktx">KTX</option>
<option value="itx">ITX 새마을</option>
<option value="mugung">무궁화호</option>
</optgroup>
<optgroup label="군산역" disabled> // disabled이므로 선택 불가능.
<option value="mugung">무궁화호</option>
</optgroup>
</select>④ textarea Tag
여러 줄의 글자를 입력할 때 사용.
텍스트 창의 너비와 높이는 cols, rows 속성으로 지정하나
css의 width, height 값으로 지정하는 것도 가능.
css에서 width, height 값을 설정하면 cols, rows 속성을 무시됨.
⑤ button Tag
button 태그는 클릭할 수 있는 버튼을 생성.
<input type="button">과 유사하지만 차이점이 있음.
<input> 태그는 종료 태그 없이 type 속성을 이용해 버튼에 글자나 이미지를 넣지만,
<button> 태그는 시작태그와 종료 태그 사이에 글자나 이미지를 넣음.
또한 양식을 전송할 때 <input type="submit"> 태그를 사용하면 별도의 자바스크립트를 사용할 필요 없이 자동으로 전송되지만, <button type="submit"> 요소로 양식을 전송하려면 추가적인 자바스크립트가 필요함.
<button>태그 사용시 유의사항
- 항상
<button>태그의 type 속성을 명시해주어야 함. <form>태그 안에서 버튼을 만들 땐, 반드시<input>태그를 사용하여 버튼을 만들어야 함.
button 태그의 type 속성
- button
- reset
- submit
⑥ fieldset / legend Tag
쇼핑몰의 주문폼에서 주문자 정보와 배송 정보가 나뉘어져 있듯이,
fieldset 태그는 폼 안에 여러 구역을 나눠 그룹화하여 표시할 때 사용되는 태그.
legend 태그는 fieldset 태그 내에서 사용되어야하며, 그룹화된 fieldset의 제목을 정의.
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>🎁 참조 및 출처
