1.Form
- 사용자가 입력한 데이터를 수집하기 위해 사용
- input, textarea, button, select, checkbox, radio button 등의 입력 양식 태그를 포함
(1)Attribute
action=“URL”:입력데이터(form data)가 전송될 url 지정method=“get/post”: 입력데이터(form data) 전달 방식 지정
(2)GET/POST
: http 프로토콜을 이용해 사용자 입력 데이터를 서버에 전달하는 방식(=HTTP request method)
1)GET
- 전송 url에 입력 데이터를 쿼리스트링으로 보내는 방식
-> 쿼리스트링: 사용자가 입력 데이터를 전달하는 방법, '?' 이후 쿼리스트링 시작 - 전송 url 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고, key=value 형태의 데이터 추가(x=a)
1개 이상의 전송 데이터는 '&'으로 구분 (x=a&y=b) - url에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 정보의 길이가 제한(최대 255자)
- REST API에서 GET메소드는 모든 또는 특정 리소스의 조회를 요청
- 퍼머링크(식별가능한 고유 체계)로 사용 가능
- 데이터를 받아오기만 할 때, 웹페이지에 접속해서 필요한 데이터를 불러올 때 사용
- ex) 북마킹
2)POST
- Request header body에 담아 전송
- url에 전달한 전송 데이터 모두 노출되지 않지만 GET에 비해 속도 느림
- GET에 비해 보안상 약간 우위(사실상 동일)
- 전송할 수 있는 데이터 길이 제한X
- 퍼머링크로 사용X
- 서버쪽에 어떤 작업을 명령할때 사용(데이터의 기록, 삭제, 수정 등)
- REST API에서 POST 메소드는 특정 리소스의 생성을 요청 -> 데이터를 서버로 제출하여 추가 또는 수정하기 위해 사용
- Body에 담는 내용이 핵심
<!DOCTYPE html>
<html>
<body>
<form action= " " method= "get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value=" "><br>
<input type="submit" value="submit">
</from>
</body>
</html>-> submit button을 클릭하면 input 태그에 입력된 데이터가 form 태그의 method 어트리뷰트에 지정된 "get" 방식으로 action 어트리뷰트에 지정된 서버측의 처리 로직에 전달된다.
-> action attribute: submit 버튼을 눌렀을때 이동할 웹페이지를 나타냄
2. Input
: input태그는 사용자로부터 데이터를 입력받기 위해 사용(form태그 중 가장 중요함)
- input 태그는 type 어트리뷰트에 의해 구분
- form태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form태그 내에 존재 안해도 됨
- 서버에 전송되는 데이터는 name 어트리뷰를 키로, value 어트리뷰트를 값으로 하여 key=value의 형태로 전송
(1)type attribute
1)button - 버튼 생성
2)checkbox - checkbox 생성
3)color - 색상 선택 생성
4)date - date control(년월일) 생성
<input type="date" name="birthday">
5)datetime - d ate&time control(년월일 시분초) 생성
- html spec에서 drop됨
6)datetime-local - 지역 date&time control(년월일 시분초) 생성
7)email - 이메일 form 생성
- submit 시 자동 검증한다
<input type="email" name="useremail">
8)file - 파일 선택 form 생성
9)hidden - 감춰진 입력 form 생성
<input type="hidden" name="country" value="korea">
10)image - 이미지로 된 submit button 생성
<input type="image" src=" " alt="submit" width=" " height=" ">
11)month - 월 선택 form 생성
12)number - 숫자 입력 form 생성
<input type="number" name="quantity" min=" " max=" " step=" " value=" ">
13)password - password 입력 form 생성
<input type="password" name="pwd">
14)radio - radio button 생성
15)range - 범위 선택 form 생성
16)reset - 초기화 버튼 생성
<input type="reset">
17)serch - 검색어 입력 form 생성
<input type="serch" name="googleserch">
18)submit - 제출 버튼 생성
<input type="submit" value="submit">
19)tel - 전화번호 입력 form 생성
<input type="text" name="mytel">
20)text - 텍스트 입력 form 생성
<input type="text" name="myname">
21)time - 시간 선택 form 생성
<input type="time" name="mytime">
22)url - url 입력 form 생성
<input type="url" name"myurl">`
23)week - 주 선택 입력 form 생성
<input type="week" name="week_year">
3.Select
: 여러개의 리스트에서 여러개의 아이템 선택할 때 사용
- 서버에 전송되는 데이터는 select 요소의 attribute를 키(변수의 이름)로, option 요소의 value attribute를 값(변수에 할당되는 값)으로 하여 key=value 형태로 전송됨
(1)attribute
1)select - select form 생성
2)option - option 생성
-> select: 기본값 설정
disabled: 사용자의 선택을 막아버리는 속성(비활성화)
required: 선택지에서 반드시 선택해야 함(선택지에서 반드시 선택해야 함(선택안하면 선택하라는 메세지 뜸)
단, required와 disabled 속성을 같이 사용하면 required 속성이 무시됨
3)Multiple - 복수 선택
-> size: 보여지는 아이템 갯수
-> 복수 선택은 multipel 보다는 checkbox를 쓰는게 더 편리함
4)Outgroup - option을 그룹화 함(Drop-down list)
-> label은 그룹화를 표시해놓은 문자열
4.Textarea
: 여러줄의 글자를 입력할 때 사용(보통 짧은 방명록이나 댓글 입력할 때 사용)
-> rows: 태그의 높이 지정/ cols: 태그의 너비 지정
5.Button
: 클릭할 수 있는 버튼 생성
<input type="button">과 비슷하지만 input 태그는 빈태그인 반면 button 태그는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.- type attribute는 반드시 지정하는 것이 바람직함
- attribute만을 받아들이는 input 태그와 달리 콘텐츠로 문자열은 물론 html 요소를 받을 수 있다는 장점이 있음
단, IE의 경우 submit되는 값이 다를 수 있다. -> 오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직함
(1)Attribute
1)Button
-> input 태그는 시작태그, 끝태그 없음. 하나의 태그가 하나의 요소
2)Submit
<button type="submit" value="submit">Submit</button>
3)Reset
<button type="reset" value="reset">Reset</button>
6.fieldset/ legend
(1)filedset태그
: 관련된 입력 양식들을 그룹화할 때 사용
(2)legend태그
: fieldset태그 내에서 사용, 그룹화된 filedset의 제목을 달아준다고 생각하면 됨
참고
