3. 폼 구성하기

• 폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다.
• HTML에는 다양한 폼을 구성하기 위한 태그들이 아주 많다.

3-1. form 태그

<form action="서버 url" method="get 또는 post"></form>

• form 태그는 action 태그와 method 속성을 함께 사용한다.
• action 속성: 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적는다.
• method 속성: 입력받은 값을 서버에 전송할 때 송신 방식을 적는다, 값으로는 get, post가 있다.

3-2. input 태그

<input type="종류" name="이름" value="초깃값">

• 입력받는 요소를 생성할 때 input 태그를 사용한다.
• 태그는 3가지가 있으며 type 속성은 필수로 사용하고, name 과 value는 유동적으로 사용한다.

type 속성

• 입력된 값에 따라서 속성이 달라지게 된다.
• 텍스트, 패스워드 라디오, 버튼 등 다양한 type 값을 활용해서 지정
• 다음 표는 실무와 웹 페이지에 자주 쓰이는 입력 요소들 이다.

속성값	설명
text	한 줄 텍스트를 입력할 수 있는 요소를 생성함.
password	비밀번호를 입력할 수 있는 요소를 생성함.
tel	전화번호 형식을 입력할 수 있는 요소를 생성함.
number	숫자만 입력할 수 있는 요소를 생성함.
url	URL 주소 형식을 입력할 수 있는 요소를 생성함.
search	검색용 텍스트를 입력할 수 있는 요소를 생성함.
email	이메일 형식을 입력할 수 있는 요소를 생성함.
checkbox	체크박스 요소를 생성함.
radio	라디오버튼 요소를 생성함.
file	파일 업로드 요소를 생성함.
button	버튼 요소를 생성함.
image	이미지로 버튼 요소를 생성함. 따라서 img 태그처럼 src 속성을 사용해야 한다. (alt 속성은 사용하지 않음.)
hidden	사용자 눈에 보이지 않는 입력 요소를 생성함.
date	날짜(연, 월, 일)를 선택할 수 있는 입력 요소를 생성함.
datetime-local	사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분)를 선택할 수 있는 입력 요소를 생성함.
month	날짜(연, 월)를 선택할 수 있는 입력 요소를 생성함.
week	날짜(연, 주차)를 선택할 수 있는 입력 요소를 생성함.
time	시간을 선택할 수 있는 입력 요소를 생성함.
range	숫자 범위를 선택할 수 있는 슬라이드 요소를 생성함.
color	색상을 선택할 수 있는 요소를 생성함.
submit	폼 전송 역할을 하는 버튼 요소를 생성함.
reset	폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소를 생성함.

name 속성

• 입력 요소의 이름을 작성한다.
• 입력 요소가 form 태그에 의해 서버로 전송될때, name 속성에 적힌 값이 이름으로 지정
• 서버에서는 지정된 이름으로 입력 요소를 식별한다.

value 속성

• 입력 요소의 초깃값을 작성한다.
• 입력 요소는 사용자에게 수동으로 입력 받지만 상황에 따라 초기값을 설정해야 하는 경우가 있다, 그럴 때 사용함

3-3. label 태그

• form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다.
• label 태그를 잘 사용해야 웹 접근성 향상에 도움을 준다.
• 웹 접근성: 웹의 기본 이념(모든 사람이 차별 없이 동일한 사용자 경험을 하는 것)을 지켜 장애인이나 고령자도 동등하게 보장되는 것
• label 태그는 2가지의 방법으로 사용할 수 있다.(label 안에 input을 감싸는 것, label의 for 값과 input의 id 값을 맞추는 것)

<label>
  비밀번호
  <input type="password">
</label>

<label for="userpw">비밀번호</label>
<input type="password" id="userpw">

3-4. fieldset와 legend 태그

<form action="#">
  <fieldset>
    <legend>그룹의 이름</legend>
    
    <필요한 input과 label값>
      
  </fieldset>
</form>

• fieldset 태그를 사용해 form 태그 안에 사용하는 요소들을 그룹지어 사용할 수 있다.
• 그룹을 지으면 박스 모양의 테두리가 감싸게 되고 뭉친 요소들의 이름은 legend 태그로 붙일 수 있다.

예시

<form>
  <fieldset>
    <legend>로그인</legend>
    <p>
      <label for="idid">아이디</label>
      <input type="text" id="idid">
    </p>
    <p>
      <label for="pwpw">비밀번호</label>
      <input type="password" id="pwpw">
    </p>  
  </fieldset>
</form>

• 실행결과 로그인

  아이디

  비밀번호

3-5. textarea 태그

<textarea>초기값</textarea>

• 여러 줄의 입력 요소를 만들때는 textarea 태그를 사용한다.
• 웹 사이트에서 글을 작성할 때 대부분 textarea 태그를 사용함.
• input과 달리 닫는 태그가 있다.

    <p>
      <label for="what"> 줄거리
	  <textarea id="what" name="what"></textarea>
      </label>
    </p> 

• 실행결과

  줄거리

3-6. select, option, optgroup 태그

• select 태그를 사용하면 콤보박스(combobox)를 생성한다.
• option 태그는 콤보박스에 항목을 추가할때 사용.
• optgroup 태그는 항목들을 그룹으로 묶고 싶을때 사용.

<select>
  <optgroup label="그룹 이름">
    <option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
  </optgroup>
</select>

• 실행결과

웹 브라우저에 표시할 값

<fieldset>
  <legend>음식 고르기</legend>어떤 음식?
  <select name="내가 좋아하는 음식" id="내가 좋아하는 음식">
    <optgroup label="한식">
      <option value="김치찌개">김치찌개</option>
      <option value="불고기">불고기</option>
      <option value="비빔밥">비빔밥</option>
    </optgroup>
    <optgroup label="중식">
      <option value="짜장면">짜장면</option>
      <option value="짬뽕">짬뽕</option>
      <option value="탕수육">탕수육</option>
    </optgroup>
  </select>
</fieldset>

• 실행 결과

음식 고르기어떤 음식? 김치찌개 불고기 비빔밥 짜장면 짬뽕 탕수육

size 속성

  <select name="내가 좋아하는 음식" id="내가 좋아하는 음식" size="2">
    <optgroup label="한식">
      <option value="김치찌개">김치찌개</option>
      <option value="불고기">불고기</option>
      <option value="비빔밥">비빔밥</option>
    </optgroup>

• 실행결과

  김치찌개 불고기 비빔밥

• 콤보박스에서 화면에 노출되는 항목 갯수를 지정하는 속성
• 숫자를 적으면 되고, 생략할 경우 기본 값은 1이다.

mutiple 속성

• select 태그로 생성되는 콤보박스는 기본 값으로 1개의 항목만 선택할 수 있다, 그러나 mutiple 속성을 사용하면 여러 항목 선택 가능
• 항목 선택 후 Ctrl(윈도우) or cmd(맥)를 클릭하면 된다.

 <select name="내가 좋아하는 음식" id="내가 좋아하는 음식" multiple >
  <optgroup label="한식">
    <option value="김치찌개">김치찌개</option>
    <option value="불고기">불고기</option>
    <option value="비빔밥">비빔밥</option>
  </optgroup>
 </select>

• 실행결과

  김치찌개 불고기 비빔밥

selected 속성

• 콤보박스의 첫 번째 option 태그의 값이 기본 값으로 지정되는데 selected 속성을 사용하면 기본 값을 지정할 수 있다.

 <select name="내가 좋아하는 음식" id="내가 좋아하는 음식">
  <optgroup label="한식">
    <option value="김치찌개">김치찌개</option>
    <option value="불고기" selected>불고기</option>
    <option value="비빔밥">비빔밥</option>
  </optgroup>
 </select>

• 실행결과
  김치찌개 불고기 비빔밥

3-7. button 태그

<button type="값 선택">확인</button>

• 실행결과
  확인

• type 속성 값을 submit(서버에 전송하는 목적), reset(초기화 버튼), button(단순한 버튼)으로 지정해서 생성할 수 있다.

3-8. 폼 관련 태그에서 사용할 수 있는 추가 속성

disabled 속성

<input type="text" disabled>
<button disabled>정지</button>

• 실행결과
  
  정지

• disabled 속성은 상호작용 요소를 비활성화 된다.

• input, textarea, select, button 태그에 사용할 수 있다.

• 비활성화 된다면 금지되어 텍스트 입력 X, 항목 선택 X, 버튼 클릭 X

readonly 속성

<input type="text" readonly>
<textarea readonly></textarea>

• 실행결과
  
  

• 요소를 읽기 전용으로 변경함

• 읽기 전용으로 되면 텍스트를 입력할수는 없지만, 요소를 선택하거나 드래그할 수 있다.

• textarea 태그와 input 태그(text, search, url, tel, email, password, date, month, week, datetime-local, number)에 사용가능.

maxlength 속성

<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>

• 실행결과
  
  

• 글자 수를 제한하여 입력 값을 제한한다.

• readonly와 같게 textarea 태그와 input 태그(text, search, url, tel, email, password, date, month, week, datetime-local, number)에 사용가능.

checked 속성

<fieldset>
  <legend>음식</legend>
  <input type="checkbox" id="떡볶이">
  <label for="떡볶이">떡볶이</label>
  <input type="checkbox" id="순대">
  <label for="순대">순대</label>
  <input type="checkbox" id="튀김" checked>
  <label for="튀김">튀김</label>
</fieldset>

• 실행결과

  음식 떡볶이 순대 튀김

• 요소를 선택된 상태로 표시.

• input 태그의 type 속성 값이 checkbox와 radio일때만 사용가능.

placeholder 속성

<input type="password" placeholder="비밀번호를 입력하시오.">

• 요소에 어떤 값을 입력해야 하는지 도움을 주는 용도로 사용
• 예를 들어, input에 type 값을 password로 지정했을때 비밀번호를 입력하라고 도움을 주는 역할.