[HTML 입문] 폼을 만드는 기본적인 태그

1. <form> 태그 - 폼 만들기

<form [속성="속성 값"]> 여러 폼 요소 </form>

<form> 태그에서 사용하는 속성들은 다음과 같습니다.

속성	설명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄 지 지정한다.
	속성 값	get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 글자 수가 제한적이다. (256~4096byte)
		post - 사용자가 입력한 내용이 드러나지 않는다.
name	여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 폼의 이름을 지정한다.
action	<form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
target	<action> 태그에서 지정한 스크립트 파일을 현재 탭이 아닌 다른 위치에 열도록 지정한다.
autocomplete	자동 완성 기능. 기본 값은 "on"이다.

2. <label> 태그 - 폼 요소에 레이블 붙이기

레이블(label)이란 입력 창 옆에 붙여 놓은 텍스트를 말합니다.

<label [속성="속성 값"]> 레이블 <input ...> </label>

<label for="id이름">

     <input id="id이름" [속성="속성 값"]>

</label>

<label> 태그를 이용해 라디오 버튼이나 체크박스에 택스트(label)을 연결해 놓으면 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 훨씬 쉽습니다.

<h3>수강 분야(다수 선택 가능)</h3> /* <label> 태그 사용안함 */

        <ul>

            <li>

                <input type="checkbox" value="grm">문법

            </li>

            <li>

                <input type="checkbox" value="wr">작문

            </li>

            <li>

                <input type="checkbox" value="rd">독해

            </li>

        </ul>

        <h3>수강 과목(1과목만 선택 가능)</h3> /* <label> 태그 사용 */

        <ul>

            <li>

                <label><input type="radio" name="subject" value="eng">영어회화</label>

            </li>

            <li>

                <label><input type="radio" name="subject" value="ch">중국어회화</label>

            </li>

            <li>                

                <label><input type="radio" name="subject" value="jp">일어회화</label>

            </li>

        </ul>

3. <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기

<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>     

<fildset> 태그는 폼들을 하나의 영역으로 묶고 외곽선을 그려 주고 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여 줍니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석