9장. 사용자와의 커뮤니케이션을 위한 폼 태그

[ 목차 ]

1. form

2. input

3. select

4. textarea

5. button

6. fieldset/legend

 

1. form

1) 사용자가 입력한 데이터를 수집하기 위해 사용

2) input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그 포함

3) 어트리뷰트

  1] action : 입력 데이터가 전송될 URL 지정

  2] method : 입력 데이터의 전달 방식 지정, get/post

get
1) 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식
2) 전송 URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가
3) 1개 이상의 전송 데이터는 '&'로 구분
4) URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제
5) 전송할 수 있는 데이터의 한계 존재(255자)
6) REST API에서 get 메소드는 모든 또는 특정 리소스의 조희를 요청

post
1) Request Body에 담아 보내는 방식
2) URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느림
3) REST API에서 POST 메소든는 특정 리소스의 생성을 요청

 

2. input

1) form 태그 중에서 가장 중요하며, 사용자로부터 데이터를 입력받기 위해 사용

2) type 어트리뷰트에 의해 구분되며, form 태그 내에 존재해야 입력 데이터를 전송 가능

3) 서버에 전송되는 데이터는 name어트리뷰트를 키, value어트리뷰트를 값으로 해 key=value 형태로 전송

1) button : 버튼 생성
2) checkbox : 체크박스 생성,  checked로 디폴트 값 설정 가능
3) color : 컬러 선택 생성
4) datetime :년월일시분초 생성
5) datetime-local : 지역 년월일시분초 생성
6) email : 이메일 입력
7) file : 파일 선택
8) hidden : 감추어진 입력 생성
9) image : 이미지 생성 
10) month : 월 생성
11) number : 숫자입력 생성
12) password : 입력이 *로 가려지는 입력 생성
13) radio : n개의 문항 중 한 개를 선택(복수x), checked로 디폴트 값 설정 가능
14) range : 범위선택 생성, min 최소값, max 최대값, value 기본값, step 이동값 지정 가능
15) reset : 초기화 생성
16) search : 검색어 입력 생성
17) submit : 제출 생성
18) tel : 전화번호 입력 생성
19) text : 텍스트 입력 생성
20) time : 시간 선택 생성
21) url : url 입력 생성
22) week : 주 선택 입력 생성

 

3. select

1) 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용

1) select : 목록을 확장시켜 선택하는 select form 생성, selected로 디폴트 값 설정 가능
2) option : 옵션 생성
3) optgroup : 옵션 그룹화

 

4. textarea

1) 여러 줄의 글자를 입력할 때 사용

 

5. button

1) 클릭할 수 있는 버튼을 생성

2) <input type='"button">과 유사하나 빈 태그가 아니며 텍스트, 이미지 등의 콘텐츠 사용가능

 

6. fieldset/legend

1) 관련된 입력 양식들을 그룹화할 때 사용

2) legend 태그는 fieldeset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의