폼

폼이란?

• 사용자가 웹 사이트로 정보를 보낼 수 있는 요소
• ex) 로그인 버튼, 회원 가입 등

---

폼을 만드는 태그

• <form> 태그
  • 몇 가지 속성을 사용하여 입력받은 자료를 어떤 방식으로 서버로 넘길지, 서버에서 어떤 프로그램을 이용하여 처리할 것인지를 정함
  • 기본형 : <form [속성="속성값"]>여러 폼 요소</form>
• <form> 태그의 속성
  • method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 정함,
    method에서 사용할 수 있는 속성값은 get과 post
    ┌ get : 256 ~ 4096 byte까지 서버로 넘길 수 있음, 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남
    └ post : 입력한 내용의 길이에 제한받지 않음, 사용자가 입력한 내용이 드러나지 않음
  • name : JavaScript로 폼을 제어할 때 사용할 form의 이름을 지정함
  • action : <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정함
  • target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함
  • autocomplete : form에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 줌 (자동 완성 기능)

---

폼 요소를 그룹으로 묶는 태그

• <fieldset> 태그
  • 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
  • 기본형 : <fieldset [속성="속성값"]> </fieldset>
  • ex) 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나누어 표시
• <legend> 태그
  • <fieldset> 태그로 묶은 그룹에 사용
  • 기본형

    <fieldset> <legend>그룹 이름</legend> </fieldset>​

-(예시)

<form action="">
  <fieldset>
  	<legend>그룹 1</legend>
  </fieldset>
  <fieldset>
  	<legend>그룹 2</legend>
  </fieldset>
</form>

-(결과)

---

폼 요소에 레이블을 붙이는 태그

• <label> 태그
  • label이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 의미함 
  • 같은 폼 요소에 레이블을 붙일 때 사용
  • 기본형 1 : 태그 안에 form 요소를 넣은 경우

    <label>레이블명<input></label>​

  • 기본형 2 : <label> 태그의 for 속성과 form 요소의 id 속성을 이용해 서로 연결하는 경우

    <label for="id명">레이블명<input id="id명"></label>​

-(예시)

<label for="user-id">아이디</label>
<input type="text" id="user-id">

-(결과)

---

입력을 위한 태그

• <input> 태그
  • 사용자가 입력한 정보를 받을 때 사용함
• <input> 태그의 type 속성
  • text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스
    1. 주로 아이디나 이름, 주소 등 한 줄짜리 일반 텍스트를 입력할 때 사용
    2. 기본형 :

       <input type="text">

    3. 주로 사용하는 속성 :
                                          ┌ size : 화면에 몇 글자가 보이도록 할 것인지를 지정함
                                          ├ value : 텍스트 필드 부분에 보여 주는 내용
                                          └ maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정함
  • password : 비밀번호를 입력할 수 있는 필드
    1. 입력하는 내용을 화면에 보여 주지 않아야 하므로 ' * '나 ' ● '로 표시함
    2. 기본형 :

       <input type="password">

    3. 주로 사용하는 속성 :
                                          ┌ size : 화면에 몇 글자가 보이도록 할 것인지를 지정함
                                          └ maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정함
  • search : 검색할 때 입력하는 필드
    1. 웹 브라우저 화면에서는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식함
  • url : URL 주소를 입력할 수 있는 필드
    
    
    
  • email : 이메일 주소를 입력할 수 있는 필드
    1. 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메시지를 보여줌
  • tel : 전화번호를 입력할 수 있는 필드
    1. 전화번호는 지역마다 형식이 다르므로 사용자가 입력한 값이 전화본호인지 아닌지 체크할 수 없음
  • checkbox : 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스
    1. 기본형 :

       <input type="checkbox">

    2. 주로 사용하는 속성 :
                                 ┌ value : 선택한 체크  박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정함
                                          └ checked : 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용함
  • radio : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼
    1. 기본형 :

       <input type="radio">

    2. 주로 사용하는 속성 :
                                 ┌ value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정함
                                          └ checked : 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용함
  • number : 숫자를 조절할 수 있는 스핀 박스
    1. 기본형 :

       <input type="number">

    2. 주로 사용하는 속성 :
                                          ┌ min : 필드에 입력할 수 있는 최솟값을 지정함, 기본 최솟값은 0
                                          ├ max : 필드에 입력할 수 있는 최댓값을 지정함, 기본 최댓값은 100
                                          ├ step : 숫자 간격을 지정함, 기본값은 1
                                          └ value : 필드에 표시할 초기값
  • range :숫자를 조절할 수 있는 슬라이드 막대
    1. 기본형 :

       <input type="range">

    2. 주로 사용하는 속성 :
                                          ┌ min : 필드에 입력할 수 있는 최솟값을 지정함, 기본 최솟값은 0
                                          ├ max : 필드에 입력할 수 있는 최댓값을 지정함, 기본 최댓값은 100
                                          ├ step : 숫자 간격을 지정함, 기본값은 1
                                          └ value : 필드에 표시할 초기값
  • date : 사용자 지역을 기준으로 날짜(년, 월, 일)
    1. 기본형 :

       <input type="date">

    2. 달력에서 날짜를 선택해서 입력할 수 있음
    3. 날짜를 선택하면 필드에 "yyyy-mm-dd" 형식으로 연도, 월, 일이 표시됨
  • month : 사용자 지역을 기준으로 날짜(월, 일)
    1. 기본형 :

       <input type="month">

    2. 달력에서 월을 선택해서 입력할 수 있음
    3. 월을 선택하면 "yyyy-mm" 형식으로 연도, 월까지만 입력됨
  • week : 사용자 지역을 기준으로 날짜(연, 주)
    1. 기본형 :

       <input type="week">

    2. 달력에서 주를 선택해서 입력할 수 있음
    3. 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시됨
  • time : 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)
    1. 기본형 :

       <input type="time">

    2. 첫 번째 항목부터 '오전'과 '오후'를 의미하고 나머지는 '시'와 '분'을 의미함
  • datetime : UTC로 설정된 날짜와 시간(년, 월, 일, 시, 분, 초, 분할 초)
    1. 기본형 :

       <input type="datetime">

    2. 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 입력할 수 있음
  • datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간(년, 월, 일, 시, 분, 초, 분할 초)
    1. 기본형 :

       <input type="datetime-local">

    2. 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 입력할 수 있음
  • submit : 전송 버튼
    1. 기본형 :

       <input type="submit" value="버튼에 표시할 내용">

    2. submit 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐
    3. value 속성을 사용해서 버튼에 표시할 내용을 지정함
  • reset : 리셋 버튼
    1. 기본형 :

       <input type="reset" value="버튼에 표시할 내용">

    2. <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 함
    3. value 속성을 사용해서 버튼에 표시할 내용을 지정함
  • image : submit 버튼 대신 사용할 이미지
    1. 기본형 :

       <input type="image" src="이미지 경로" alt="대체 텍스트">

  • button : 일반 버튼
    1. 기본형 :

       <input type="button" value="버튼에 표시할 내용">

    2. value 속성을 사용하여 버튼에 표시할 내용을 지정함
  • file : 파일을 첨부할 수 있는 버튼
    1. 기본형 :

       <input type="file">

    2. 웹 브라우저 화면에 "파일 선택" 혹은 "찾아보기" 버튼 등이 표시됨
  • hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드
    1. 화면의 form에는 보이지 않지만 사용자가 입력을 마치면 form과 함게 서버로 전송되는 요소임
    2. 사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야 하는 정보는 hidden 필드로 입력함
    3. 기본형 :

       <input type="hidden" name="이름" value="서버로 넘길 값">