웹에서 자주 만나는 폼

우리는 웹에서 폼을 자주 볼 수 있다. 한 페이지 안에서도 여러 가지 폼이 사용된다. 아이디나 비밀번호를 입력하거나 로그인 버튼, 회원 가입 창 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들을 폼이라고 한다.
사용자가 아이디와 비밀번호 정보를 입력하고 [로그인] 버튼을 클릭하면 사용자가 입력한 내용이 웹 서버로 보내진다. 그럼 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져 사용자가 보내 온 아이디와 비밀번호가 서로 일치하는 정보가 무엇인지 여부를 확인하고 그 결과를 브라우저에게 보낸다. 이런 폼과 관련된 대부분의 작업은 모두 데이터베이스를 기반으로 한다. 따라서 텍스트 상자나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그를 사용하고 그 폼에 입력된 정보들을 처리하는 것은 서버 프로그래밍을 사용한다.
우리는 프론트엔드 개발자가 되어 볼 것이기 때문에 서버 프로그래밍에 대해선 다뤄보지 않을 것이다. 우리는 폼을 만드는 태그들에 대해 살펴보자.

폼 만들기

<form>

<form> 태그는 폼을 만드는 가장 기본적인 태그로 <form> 태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣습니다.

<form>의 다양한 태그 속성

1. method 속성: 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
• get 유형: 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256Byte ~ 4096 Byte까지의 데이터만 서버로 넘길 수 있다.
• post 유형: 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력으로 넘겨주므로 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
2. name 속성: 폼의 이름을 지정한다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용한다.
3. action 속성: <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
4. target 속성: aciton 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열리도록 지정한다.
5. autocomplete 속성: 자동 완성 기능의 활성화 여부를 지정할 수 있다. on/off로 지정한다.

<form action="server.php" method="post"> 여러 폼 요소 </form>

<input>

<input> 태그를 사용하여 만들 수 있는 폼 요소가 상당히 많은데 그것은 type 속성을 이용해 구분한다.

<input type="text">
<input type="checkbox">

type 속성에 text 유형을 넣었을 경우 한 줄짜리 텍스트를 입력하는 필드가 만들어지고, checkbox 속성을 넣었을 경우 체크박스가 삽입된다.

id 속성 사용하기

폼을 만들다 보면 똑같은 폼 요소가 여러 번 사용된다.
이렇게 여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성이다.
id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수 있을 뿐만 아니라 나중에 배울 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있다.

<input type="text" id="user-name" size="10">
<input type="text" id="address" size="60">

<input> 태그의 type 속성에서 사용 가능한 유형

1. hidden 유형: 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다.
2. text 유형: 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다.
3. search 유형: 검색 상자를 넣는다.
4. tel 유형: 전화번호 입력 필드를 넣는다.
5. url 유형: URL 주소를 입력할 수 있는 필드를 넣는다.
6. email 유형: 이메일 주소를 입력할 수 있는 필드를 넣는다.
7. password 유형: 비밀번호를 입력할 수 있는 필드를 넣는다.
8. number 유형: 숫자를 조절할 수 있는 화살표를 넣는다.
9. range 유형: 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
10. color 유형: 색상 표를 넣는다.
11. checkbox 유형: 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣는다.
12. radio 유형: 주어진 항목에서 오직 1개만 선택 가능한 라디오 버튼을 넣는다.
13. file 유형: 파일을 첨부할 수 있는 버튼을 넣는다.
14. submit 유형: 서버 전송 버튼을 넣는다.
15. image 유형: submit 버튼 대신 사용할 이미지를 넣는다.
16. reset 유형: 리셋하는 버튼을 넣는다.
17. button 유형: 버튼을 넣는다.

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

<input type="text">

<input type="search">
<input type="submit" value="버튼 이름">

<input type="tel">

<input type="url">

<input type="email">

<input type="password">

<input type="number" min="최솟값" max="최댓값" value="몇 개씩 증감?">

<input type="range" min="최솟값" max="최댓값" value="몇 개씩 증감?">

<input type="color">

<input type="checkbox" name="이름" value="선택한 값을 서버로 알려줄 때 넘길 값, 필수 속성">

<input type="radio" name="이름" value="선택한 값을 서버로 알려줄 때 넘길 값, 필수 속성">

<input type="file">

<input type="submit">

<input type="image" src="경로" alt="대체 택스트">

<input type="reset">

<input type="button">

<input> 태그의 다양한 속성

1. autofocus 속성: 페이지를 불러오자마자 폼의 요소 중 원하는 요소에 마우스 커서를 표시한다.
2. placeholder 속성: 사용자가 텍스트를 입력할 때 도움이 퇴도록 입려란에 힌트 내용을 표시한다.
3. readonly 속성: 입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만드는 속성이다.
4. required 속성: 필수 입력 필드로 지정하는 속성이다. 필수 필드로 지정된 필드에 아무 값도 없는 경우, 이 필드를 반드시 작성하라는 경고창이 뜨면서 submit 할 수 없도록 한다.
5. min, max, step 속성: 각각 최솟값, 최댓값, 몇 개씩 증감할지를 설정한다. 세 가지 속성 모두 type 속성 유형이 date 이거나 datetime, datetime-local, month, week, time, number, range일 경우에만 사용할 수 있다.
6. size, minlength, maxlength 속성: 각각 길이, 최소길이, 최대 길이를 지정할 때 사용한다.

<label>

<label> 태그는 폼 요소에 레이블을 붙이기 위한 것이다. 레이블이란 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 말한다. <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있다.

<label> 레이블 <input ...> </label>

<label for="id 이름">
  <input id="id 이름">
</label>

라디오 버튼과 체크박스에서 사용하는 <label> 태그

스마트폰처럼 화면이 작인 기기에서 라디어 보튼이나 체크박스를 정확하게 터치하는 것은 여간 쉬운 일이 아니다.
그럴 때 <label> 태그를 이용해 라디오 버튼이나 체크박스에 라벨을 연결해 놓았다면 텍스트만 터치해도 라디오 버튼이나 체크 박스가 선택되도록 할 수 있다. 물론 이 방법은 작은 버튼이나 박스를 정확히 누르지 않아도 되므로 마우스를 사용하는 PC에서도 편리하다.

<fieldset>, <legend>

폼 요소를 그룹으로 묶을 때 사용하는 태그들이다.
하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 이 두 태그를 사용한다.
<fieldset> 태그는 <fieldset>과 </fieldset> 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려준다.
<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여준다.

<fieldset>
  <legend> 그룹 제목 </legend>
  <ul>
    <li>
      <label ...> ... </label>
      <input ...>
    </li>
    <li>
      <label ...> ... </label>
      <input ...>
    </li>
  </ul>
</fieldset>

이 외의 다양한 폼 태그

<select>, <option>

사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다.
드롭다운 목록은 <select>와 <option>을 사용해서 표시한다. <select>로 드롭다운의 목록의 시작과 끝을 표시하고 그 안에 <option> 태그를 사용해 원하는 항목들을 추가한다. <option> 태그의 value 속성을 이용하여 서버로 넘겨주기 위한 값을 지정한다.

<select>
  <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
  <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
  <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
</select>

<select>의 다양한 태그 속성

1. size 속성: 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.
2. multiple 속성: Ctrl 키를 누른 상태로 드롭다운 메뉴의 항목들을 여러 개 선택할 수 있도록 한다.

<option>의 다양한 태그 속성

1. value 속성: 선택한 값을 서버로 알려줄 때 넘길 값을 지정한다.
2. selected 속성: 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

<optgroup>

드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 이 태그를 사용한다.
<optgroup> 태그를 사용할 때에는 label 속성을 사용해 그룹의 제목을 붙인다.

<select id="아이디">
  <optgroup label="제목1">
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
  </optgroup>
  <optgroup label="제목2">
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
    <option value="선택한 값을 서버로 알려줄 때 넘길 값"> 내용 </option>
  </optgroup>
</select>

<textarea>

여러 줄 입력하는 텍스트 영역을 만들 때 사용하는 태그이다.
<textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 몇 줄을 표시할지 지정하는 rows 속성을 사용한다.

1. name 속성: 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
2. cols 속성: 텍스트 영역의 가로 너비를 문자 단위로 지정한다.
3. rows 속성: 텍스트 영역의 세로 길이를 줄 단위로 지정한다.

<textarea name="text" cols="60" rows="5" placeholder="테스트용">