HTML5 입력 양식 태그와 문서 구조화
HTTP 프로토콜
-
HTTP 프로토콜
- 문자(텍스트) 기반의 프로토콜
- 80 포트(default)
- 클라이언트 & 서버 모델
- 클라이언트가 먼저 시작, 서버가 응답
- 서버 측에서 접속에 대한 상태를 유지하지 않는다(독립적) : stateless
-
HTTP Request
- 라인 단위(엔터로 구분)
- 요청 라인(Request Line)
- 1줄
- CRUD
- GET : 읽기
- POST : 생성
- PUT : 수정
- DELETE : 삭제
- POST /servlet/SimpleServlet HTTP/1.1
- HTTP method, URL, Protocol/Version
- 요청 헤더(Request Header)
- n줄
- 키:값
- \n문자로 header와 body 구분
- content type
- Content-Type: application/x-www-form-urlencoded
- form-urlencoded(default)
- 이걸로 정보의 표현 방법이 결정됨
이름 = 값& 이름 = 값&형태
- 요청 본체(Request Body)
- GET Body 없음
- POST, PUT Body 있음
-
HTTP Response
- 상태 라인(Status Line)
- HTTP/1,1 200 OK
- Protocol/Version 상태코드 설명
- 200 OK, 201 생성, 300 리다이렉트, 400번대 유저의 잘못, 404 Not Found(url 잘못 적음), 500 Internal Server Error(개발자 잘못)
- 응답 헤더
- n줄
- 실제로 전달되는 정보
- 응답 처리 날짜, 인코딩 방식, 요청 서버 정보 등과 같은 추가 정보
- \n문자로 헤더와 바디 구분
- 응답 본체
- 응답에 필요한 내용. 일반적으로 HTML 문서
- 상태 라인(Status Line)
입력 양식 태그
-
입력 양식
-
<form> 태그의 attribute → 서버 연동 정보
- method 속성 : 입력 양식에 입력한 데이터를 전달하는 방식
- 웹 브라우저 : GET(default), POST
- JS : GET, POST, PUT, DELETE ..
- action 속성 : 데이터를 전달하는 장소
- 요청 url
- 현재 url(default)
- encoding 속성 : 수집한 정보를 전달할 때 어떻게 표현할 것인가
- url 인코딩
- json 인코딩
- multipart 인코딩
- method 속성 : 입력 양식에 입력한 데이터를 전달하는 방식
-
client -(정보)→ Server
-
-
입력 양식 개요
- <form method=”get”> → url 부분
- <form method=”post”> → body 부분
-
입력 양식 종류
type=” ”에 따라 속성, 모양이 달라짐
-
label 태그
- <label> <input> 같이 존재
- label 태그의 for 속성 → input 태그의 id 속성
- for 속성? label 태그를 클릭했을 때 input 태그에 포커스가 감
-
라디오 버튼
<input type="radio" name="그룹명" value="값">- name이 동일하면 같은 그룹이 된다. 그 중에서 하나를 선택한다는 의미
-
select
-
하나(radio) 또는 여러 개(checkbox)를 선택할 때 사용
-
<select name="이름" [multiple]> -
multiple에 따라 하나 또는 여러개
-
단일 선택(default)
formtest=값1 & test=값2 & test=값3json{test:[값1, 값2, 값2]
} → 배열
서버배열 or 리스트
-
-
fieldset
- <legend>입력 양식 이름</legend>
-
<textarea>
- 여러 줄을 입력받는 요소
- 엔터, 탭, 스페이스가 그대로 출력됨
-
placeholder = “ “
- 가이드 문자열
- 사용자가 입력하기 전에 보여주는 문자열
-
required 프로퍼티
- 필수 항목을 나타냄
-
disabled 프로퍼티
- 입력을 못 하게 막음
-
checked 프로퍼티
- 라디오, 체크박스
- 초기에 체크되어 있게 할 때 쓰는 프로퍼티
HTML5 문서 구조화
-
공간 분할 태그
- 블록 형식(줄바꿈)
- width(조정 가능) 전체 행(default)
- 기본 부모 태그의 100퍼센트
- div 태그
- h1~h6 태그
- p 태그
- 목록 태그
- 테이블 태그
- 인라인 형식(줄바꿈X)
- width 컨텐츠의 크기 (조정 불가능)
- span 태그
- a 태그
- input 태그
- 글자 형식 태그
- 입력 양식 태그
- width 컨텐츠의 크기 (조정 불가능)
- inline-block
- 줄바꿈 X, width & height 조정 가능
- img 태그
- 블록 형식(줄바꿈)
-
시맨틱 태그
-
태그가 어떤 의미를 가진다
-
내용에만 관심을 가진다
- <header>
- <nav>
- <aside>
- <section>
- <article>
- <footer>
→ 어떤 것에 더 가중치를 줄지 처리할 수 있도록, CSS 작업을 더 쉽게 하기 위해 그냥 <div></div>를 쓰기 보다 위 태그들로 분리
-
실습
<body>
<form>
<!-- 사용자가 입력하는 입력 양식 -->
<input type="text" name="text" value="text" /><br />
<input type="password" name="password” value="password"><br />
<input type="file" name="file" value="file" /><br />
<input type="checkbox" name="checkbox" value="checkbox" /><br />
<input type="radio" name="radio" value="radio" /><br />
<!-- 보이지 않는 입력 양식 -->
<input type="hidden" name="hidden" value="hidden" /><br />
<!-- 버튼 -->
<input type="button" value="button" /><br /> -> value에는 텍스트밖에 못 넣음
<button>체크</button><br /> -> 이미지 버튼을 만들 때 사용, default가 submit
<button type="button">체크</button><br /> -> 일반 버튼으로 운영하고 싶으면 type을 주기
<input type="reset" value="reset" /><br />
<input type="submit" value="submit" /><br />
<input type="image" src="https://placehold.co/100x100" />
</form>
</body> 
- checkbox, radio 버튼은 선택 안 하면 값이 전달되지 않음(url에 안 들어감)
- text, password 등은 비어있는 값으로 넘어감
- 해당 이름에 데이터가 있냐 없냐 먼저 검사가 필요함
<body>
<form>
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username" /></td>
</tr>
<tr>
<td>성별</td>
<td>
<input id="man" type="radio" name="gender" value="m" />
<label for="man">남자</label>
<input
id="woman"
type="radio"
name="gender"
value="w"
checked="checked" -> 초기 값 설정
/>
<label for="woman">여자</label>
</td>
</tr>
</table>
<input type="submit" value="가입" />
</form>
</body>
- 이름에 '홍길동' 입력 후, 가입 버튼 누르면 바뀌는 url
http://.../form_basic.html?username=홍길동&gender=w - radio 버튼은 name 속성을 같게 입력해야 여러 항목 중 하나만 선택됨
<body>
<select name="test" multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
- shift 클릭 시, 연속된 값 중복 선택 가능
- (Mac 기준) command 누르고 선택 시, 연속되지 않은 값들도 중복 선택 가능
- 드래그 가능
<body>
<select>
<optgroup label="HTML5">
<option>Multimedia Tag</option>
<option>Connectivity</option>
<option>Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
</body>
<body>
<form>
<fieldset style="display: inline-block">
<legend>로그인</legend>
<table>
<tr>
<td><label for="username">사용자 ID</label></td>
<td>
<input
id="username"
type="text"
placeholder="아이디를 입력하세요"
/>
</td>
</tr>
<tr>
<td><label for="password">비밀번호</label></td>
<td>
<input
id="password"
type="password"
placeholder="비밀번호를 입력하세요"
/>
</td>
</tr>
</table>
<input type="submit" value="확인" />
<input type="reset" value="다시쓰기" />
</fieldset>
</form>
</body>display: inline-block;을 적용하면 필요한 크기만큼만 차지하고, 다른 요소들과 가로로 정렬 가능
- 사용했을 때
- 그냥
<fieldset>만 써줬을 때
type="password"로 해주면 비밀번호 입력하는 것처럼 가려져서 나옴
<li type="square"> ~ </li>
<!-- list를 기본 원이 아니라 사각형 목록으로 하고 싶을 때 type을 square로 설정해 주기 -->
<a href="login.html">현재 사이트의 특정 파일로 링크</a>
<!-- 같은 폴더에 있는 파일로 이동(상대경로) -->
<a href="https://naver.com" target="_blank">다른 사이트로 링크(새 창)</a>
<!-- 현재 창이 아닌 새 창으로 열고 싶을 때 target="_blank" 써주기 -->
<a href="#">현재 페이지의 맨 위로 이동</a>
<a href="#square-list">현재 페이지의 특정 위치로 이동</a>
<!-- 이동할 대상 요소에 `id`를 추가하고, `<a>` 태그에서 `href="#id명"`을 사용 -->
사용자를 고려한 디자인과 UX에 관심있는 개발자