[HTML] 폼 태그

웹 양식은 사용자가 웹 문서에 어떤 데이터를 입력하고 그 결괏값을 가져오기 위해 사용한다. 이와 같은 웹 양식은 웹 문서와 사용자 사이에서 원하는 정보를 주고받을 수 있도록 인터페이스를 제공한다. 폼 태그는 이러한 웹 양식을 만드는 데 사용하는 태그이다.

 

<form> 태그

폼을 만드는 기본 태그이다.

<form name="입력 폼 이름" action="웹 프로그램 페이지" method="전달 방식">
	<input type="폼 모양과 기능" name="입력 폼 변수" value="전달 값">
</form>

 

<form> 태그의 속성

 

<input> 태그

사용자가 입력하는 부분을 대부분 처리하는 태그이다. 입력하는 내용의 종류는 type 속성을 통해 지정한다.

<input type="유형" [속성="속성 값"]>

 

type 속성의 유형

text

한 줄 짜리 텍스트 입력 필드이다. 주로 아이디나 이름, 주소 등을 입력할 때 사용한다. 입력 폼의 기본 글자 수는 20자인데 size 속성으로 기본 글자 수를 변경할 수 있다. 또한 value 속성을 이용하면 기본으로 입력되어 있는 값을 지정할 수 있다. 물론 다른 값을 입력하면 그 값이 서버로 전달된다.

 <form>
      <label>입력 : 
      	<input type="text" value="기본값">
    </label>
</form>

 

출력 결과

 

password

비밀번호 입력 필드이다. 사용자가 입력하는 내용이 *로 표시된다.

<input type="password" [속성="속성 값"]>

 

hidden

화면상의 폼에는 보이지 않는다. 서버로 전송할 때 함께 전송되는 요소이다.

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

 

search

검색 필드이다. 검색 창에 x 표시가 되어 검색어 삭제가 쉽다.

<input type="search" [속성="속성 값"]>

 

email

메일 주소 입력 필드이다. 메일 주소 형식을 자동 체크한다.

<input type="email" [속성="속성 값"]>

 

radio

여러 항목 중 하나만 선택할 때 사용한다. 한 가지만 체크할 수 있으며 동그란 모양이 기본 형태이다.

<input type="radio" [속성="속성 값"]>

 

checkbox

여러 항목 중 둘 이상을 선택할 때 사용한다. 한 가지 이상을 체크할 수 있으며 네모 모양이 기본 형태이다.

<input type="checkbox" [속성="속성 값"]>

 

submit, reset

폼을 전송, 리셋하는 버튼이다. value 속성을 이용해 버튼에 표시 내용을 지정할 수 있다.

<input type="submit|reset" [value="버튼 표시 내용"][속성="속성 값"]>

 

상단과 같이 자주 쓰이는 속성들 외에도 다양한 속성이 존재한다.

 

<input> 태그의 속성

type 속성의 종류에 상관없이 공통적으로 쓸 수 있는 속성에 대해 알아보자.

• readonly : 읽기 전용 속성
• disabled : 비활성화 속성
• autocomplete : 자동 완성 속성
• autofocus : 자동 포커스 속성
• placeholder : 현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성
• required : 필수 입력 속성
• spellcheck : 오타 체크 속성

<label> 태그

폼 요소에 텍스트를 붙이는 태그이다. 두 가지 형식으로 작성할 수 있다.

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

<label for="id">레이블</label>
<input id="id" type="유형">

 

<fieldset> 태그

폼 요소를 그룹으로 묶는 태그이다.

 

<legend> 태그

그룹으로 묶는 구역에 제목을 붙이는 태그이다.

<form>
  <fieldset>
    <legend>개인 정보</legend>
    <ul>
      <li>
        <label for="name">이름</label>
        <input type="text" id="name">
      </li>
      <li>
        <label for="mail">메일 주소</label>
        <input type="text" id="mail">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>로그인 정보</legend>
    <ul>
      <li>
        <label for="id">아이디</label>
        <input type="text" id="id">
      </li>
      <li>
        <label for="pwd">비밀번호</label>
        <input type="text" id="pwd">
      </li>
    </ul>
  </fieldset>
</form>

 

출력 결과

 

<select> 태그

여러 옵션 중에서 하나를 선택(= 드롭다운 목록) 할 수 있는 태그이다. selected 속성을 사용하면 기본으로 선택되어 있는 값을 지정할 수 있다.

<select id="class">
  <option value="archi">건축공학과</option>
  <option value="mechanic">기계공학과</option>
  <option value="indust">산업공학과</option>
  <option value="elec">전기전자공학과</option>
  <option value="computer" selected>컴퓨터공학과</option>
  <option value="chemical">화학공학과</option>
</select>

 

출력 결과

 

<textarea> 태그

여러 줄의 텍스트를 입력할 수 있는 텍스트 영역을 생성하는 태그이다. 주로 게시판의 게시물 입력 창, 회원 가입 양식의 약관 등에 사용한다.

<textarea [속성="속성 값"]>내용</textarea>

 

<button> 태그

다양한 형태의 버튼을 삽입해 주는 태그이다. input type 속성으로도 사용 가능하다.

<button type="submit">전송하기</button>

 

출력 결과