27. HTML - 폼 관련 태그

1. 폼 관련 태그

1. 폼이란?

1. 폼이란 백엔드나 다른 페이지에 요청을 보낼 수 있는 특수한 기능을 가진 태그. 요청을 보낼 때 폼안에 있는 데이터들도 전송할 수 있다.
2. 폼 태그가 주로 사용되는 곳은 회원가입 페이지, 로그인 페이지, 회원관련 페이지, 주문 페이지 등
3. 폼의 동작 방식(로그인)
   • 사용자가 아이디와 비밀번호를 입력
   • 사용자가 로그인 버튼을 클릭
   • 폼에 매핑되어 있는 주소로 아이디와 비밀번호를 가지고 요청을 보냄
   • 백엔드 프로그램에서 요청으로 온 아이디와 비밀번호를 가지고 데이터베이스에서 아이디와 비밀번호가 일치하는 검사를 진행
   • 일치하면 로그인되도록 처리 일치하지 않으면 아이디나 비밀번호가 틀렸다고 메시지를 띄워준다.
4. 폼이 요청을 보낼 때 가지고 가는 데이터들은 모두 form 태그안의 태그로 존재해야된다.

2. 폼을 만들어주는 form

1. form 태그는 폼을 만들어주는 기본 태그
2. form 태그 안에 여러가지 폼 관련 태그들을 사용. 폼 관련 태그들은 전송될 데이터를 담을 수 있다.
3. form 태그의 속성들
   • method : 사용자가 입력한 정보들을 전송할 방식 지정. get, post만 지정 가능.
     • get : url 주소에 사용자가 입력한 정보들이 모두 표출. 256byte~4,096byte까지의 정보만 전송 가능
     • post : url 주소에 사용자가 입력한 정보들이 표출되지 않는다. 보안상 용이하기 때문에 중요한 정보를 넘길때는 거의 대부분 post방식으로 사용한다.
   • name : 한 웹 문서 안에서 여러개의 폼을 사용할 때 각각 구분하기 위해 지정하는 속성.
   • id : 한 웹 문서 안에서 여러개의 폼을 사용할 때 각각 구분하기 위해 지정하는 속성.
   • action : 요청을 보낼 url을 지정하는 속성.

          url 매핑되어있는 소스는 대부분 java의 메소드로 되어있다.

3. 폼 안의 태그들에 제목을 달아주는 label

1. 레이블(label)이란 입력창(input 태그)옆에 아이디나 비밀번호같은 텍스트를 붙여주는 태그
2. label 태그 사용 방식
   • label 태그로 input 태그를 감싸는 방식
     ex) ```

       <label>아이디
           <input type="text">
       </label>
     ```

   • input 태그의 아이디를 label 태그의 for 속성으로 지정하는 방식
     ex) ```

       <label for="userId">아이디</label>
       <input id="userId" type="text">
     ```

   • input type속성으로 라디오 버튼이나 checkbox 같은 input을 만들 수 있는데 label이랑 같이 사용했을 때 효용성이 올라간다.
   • label 없이 checkbox나 radio 사용시 진짜 버튼을 클릭해야 동작하는데 label과 함께 사용하면 label에 지정한 텍스트를 클릭해도 radio나 checkbox가 동작하도록 구성할 수 있다.

4. 폼 태그들을 그룹으로 묶어주는 fieldset, legend

1. 쇼핑몰 사이트에서 주문서 폼에서 사용자 정보와 배송 정보, 주문 정보를 분리해서 표시할 때 주로 사용
2. 하나의 폼에서 여러 구역을 나눠서 표시할 때 사용
3. fieldset 태그는 폼 안의 태그들을 하나의 영역으로 묶고 외곽선을 그려준다.
4. legend 태그는 fieldset으로 묶은 그룹에 제목을 붙여준다.

5. 사용자 입력을 위한 input

1. 웹에서 폼은 사용자가 입력하는 부분과 요청을 보내는 버튼 부분으로 나눌 수 있다.
2. input 태그로 입력할 수 있는 항목은 텍스트, 비밀번호, 이메일주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양하며 type 속성을 통해 지정할 수 있다.
3. id, name 속성은 태그들을 구분하기 위해서 사용되는 속성
4. id, name 속성의 차이점
   • id는 한 웹 문서에서 유일해야 한다. 유일하지 않아도 에러는 발생하지 않지만 웹 접근성 검사에서 에러로 나타난다.
   • name은 한 웹 문서에서 중복해서 사용가능하고 checkbox 같이 중복선택이 가능한 태그들에서 그룹을 묶는 역할도 한다.
   • id는 javascript나 css에서 선택자로 활용이 많이 된다. 웹 문서에서만 사용됨.
   • name 속성은 요청을 보낼 때 input의 데이터만 가지고 가지않고 key와 value로 매핑되어 넘어가는데 여기서 key역할을 해주는 것이 name 속성.
     ex) ```

       <input type="text" name="userId">
       위 input에 사용자가 입력한 값과 함께 요청을 보낼 때 백엔드 단에서 사용자가 입력한 값을 키인 userId로 꺼내서 사용할 수 있다.
     ``` 

6. input 태그의 type 속성으로 지정가능한 유형

1. hidden : 화면에서 보이진 않지만 요청을 보낼 때 데이터 전송은 된다.
2. text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 생성
3. tel : 전화번호 입력 필드 생성
4. url : url 주소 입력 가능한 필드 생성
5. email : 메일주소 입력 가능한 필드 생성
6. password : 비밀번호를 입력할 수 있는 필드 생성. 입력한 텍스트가 *로 표출.
7. date, month, week : date는 사용자 지역 기준 년, 월, 일을 지정. month는 년, 월 지정. week는 년, 주를 지정.
8. number : 숫자를 조절할 수 있는 화살표 생성
9. range : 숫자를 조절할 수 있는 슬라이드를 생성
10. color : 색상을 선택할 수 있는 색상표를 생성
11. checkbox, radio: 중복선택 가능한 checkbox를 생성하거나 단일 선택만 가능한 radio 버튼을 생성
12. file : 파일을 선택할 수 있는 팝업창을 띄워주는 버튼을 생성
13. submit, reset : submit은 form의 action 속성값으로 지정되어 있는 url로 요청을 보내는 버튼을 생성(요청보낼 때 입력된 데이터들도 함께 전송). reset은 폼에 입력되어 있는 내용을 초기화하는 버튼을 생성.
14. image : submit 버튼 대신 사용할 이미지를 삽입
15. button : 아무 기능 없는 버튼을 하나 생성(button 태그와 동일. button 태그는 type의 기본값이 submit). javascript 메소드를 매핑하여 동작이 일어날 수 있도록 직접 동작을 만든다.

7. input 태그의 다양한 속성

1. autofocus 속성
   • 페이지가 로딩될 때 원하는 input태그에 커서를 표시.
   • HTML4까지는 이 속성이 존재하지 않아서 javascript로 직접 구현했지만 HTML5에서는 autofocus 속성을 지원해서 간단하게 속성만 사용하면 원하는 태그에 커서를 가져다 놓을 수 있다.
2. placeholder 속성
   • 해당 input의 입력할 내용에 대한 힌트를 제공할 수 있다.
3. readonly 속성
   • 읽기 전용 태그로 변경함. 사용자 입력을 막는 속성
   • readonly, readonly="true", readonly="readonly" 로 설정할 수 있다. 기본 값은 false로 입력을 막지 않는 상태.
   • 읽기 전용 속성을 해제할 때는 readonly 설정을 삭제한다.
4. required 속성
   • 필수적으로 입력돼야 하는 태그에 지정.
   • required로 설정된 태그에 입력 값 없이 submit을 하게 될 경우 경고창이 뜨면서 submit 되지 않는다.

8. 여러 데이터들을 나열해서 보여주는 select, optgroup, option

1. 사용자가 직접 입력하지 않고 여러가지 옵션 중에 선택할 수 있도록 해주는 태그. 드롭다운이라고도 부른다.
2. select 태그와 option 태그를 조합해서 드롭다운 목록을 만들 수 있다.
3. select 태그는 드롭다운의 시작과 끝을 표시하는 태그이고 option 태그는 드롭다운의 항목들을 만들어주는 태그.
4. 드롭다운 목록에서 항목을 선택하고 submit을 할 경우 선택된 항목의 value속성의 값이 전송되게 되고 키는 select에 설정되어 있는 name속성의 값이 세팅된다.