13. 양식 만들기 <form>

설명

HTML에서 <form>태그는 사용자의 입력을 받아서, 입력 받은 데이터를 서버로 전달하는 역할을 합니다.

웹 페이지에서 이 '폼'을 만드려면 <form>태그를 사용해야 하고, 이 태그 안에서 <input>, <textarea>, <button>,  <select>등을 사용하여 페이지 상에서의 다양한 입력 양식을 나타낼 수 있습니다.

보통 로그인 창이나 회원가입 창에서 이 태그를 사용한 것을 많이 볼 수 있습니다.

사용법

• <form>양식 정의

1) <form>

- 사용자의 입력을 받기 위한 HTML 양식을 만듭니다.

- 속성

속성	설명
accept-charset	전송되는 양식에 사용된 문자셋 지정
action	양식을 전송할 URL 지정
autocomplete	사용자가 이전에 입력한 값을 기반으로 브라우저가 양식을 자동으로 완성시킬지의 여부  autocomplete="on" - 자동 완성시킴, autocomplete="off" - 자동 완성 시키지 않음
enctype	전송된 데이터의 인코딩 지정  method="post"인 경우에만 사용 가능
method	양식 전송 시 사용되는 HTTP 메소드 지정 (데이터를 보내는 방법.)  get 방식 - 메소드를 지정해주지 않았을 시 default값으로, QUERY_STRING으로 인자 값을 전달함  QUERY_STRING이란 URL에서 물음표('?') 뒤에 오는 값을 말함  URL에 데이터 값이 표시되기 때문에 중요한 값 입력시에는 사용하지 않는게 좋음  ex) URL?name=value&name=value  post 방식 - 표준 입력 스트링(stdin)으로 인자 값을 전달함
name	양식의 이름을 지정
novalidate	브라우저가 양식의 유효성을 검증하지 않도록 지정
target	양식을 제줄한 뒤 수신되는 응답을 표시할 위치를 지정  _blank - 새 탭이나 새 창에 표시  _self - 현재 탭이나 창에 그대로 표시  _parent - 부모 프레임에 표시  _top - 창 전체에 표시  framename - iframe에 표시  (_parent, _top, framename은 iframe과 함께 사용됨)

• <form>양식 요소 (<form>태그 안에서 사용)

1) <input>

- 폼 요소에서 가장 중요한 요소로, 사용자의 데이터 입력을 위한 입력 컨트롤을 정의합니다.

<input>요소는 종료 태그가 필요하지 않으며, 속성만 포함하고 있습니다.

type이라는 속성에 따라 페이지 내에서 다양한 형태로 표시됩니다.

- 사용 예

<form>
텍스트 입력 양식 : <input type="text"><br>
라디오 선택 양식 : <input type="radio">radio<br>
선택 양식 : <input type="checkbox">check<br>
전송 버튼 : <input type="submit">            
</form>

- 실행 결과

- type 속성 값 종류

값	설명
button	클릭 가능한 버튼
checkbox	체크 박스
color	색상 선택기(color picker)
date	날짜 입력(년, 월, 일)
datetime	날짜 및 시간 입력(년, 월, 일, 시, 분, 초)
datetime-local	지역 날짜와 시간 입력
email	이메일 주소 입력
file	파일 업로드를 위한 파일 선택
hidden	숨겨진 <input>태그
image	이미지를 제출 버튼으로 사용
month	월, 연도 입력
number	숫자 입력
password	암호 입력
radio	라디오 버튼
range	범위에서 선택(기본은 0에서 100 사이)
reset	입력한 양식을 초기화하는 버튼
search	검색 문자열을 입력하는 텍스트 필드
submit	전송 버튼
tel	전화번호 입력 필드
text	디폴트 값으로, 단일 행 텍스트 입력 필드
time	시간 입력
url	URL 입력 필드
week	주, 연도 입력

2) <select>

- 드롭 다운 목록을 정의하여 여러 개의 목록 중에서 선택적으로 고를 수 있게 해줍니다. 

<select>태그를 사용해 선택 입력 양식 정의 후 태그 내에 <option>태그를 사용해 목록의 내용을 정의합니다.

기본적으로 첫 번째 항목이 표시되어 나타납니다.

- 사용 예

<form>
    드롭 다운 목록 : 
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>           
</form>

- 실행 결과

3) <textarea>

- 한 줄 이상의 텍스트 입력 시 사용하며, 여러 줄의 텍스트 입력 필드를 정의합니다.

cols나 rows 속성을 통해 입력 필드의 행과 열 크기를 지정할 수 있는데, 지정된 크기보다 많은 텍스트가 입력 되었을 시 자동으로 스크롤바가 생겨 제한 없이 텍스트를 입력 받을 수 있습니다.

- 사용 예

<form>
    텍스트 입력 양식(무제한) :             
        <textarea cols="20" rows="5">cols 속성으로 텍스트 영역의 너비를 지정하고, rows 속성으로 표시 가능한 행의 수를 지정
        </textarea>          
</form>

- 실행 결과

4) <button>

- 클릭할 수 있는 버튼을 정의합니다. 이 버튼 안에는 텍스트 또는 이미지가 오도록 할 수가 있습니다.

브라우저마다 정해진 디폴트 유형이 다르기 때문에, <button>요소 사용 시에는 꼭 type 속성을 지정해 주도록 합니다.

- 사용 예

<form>
일반 버튼 : <button type="button">버튼</button><br>            
양식 전송 버튼 : <button type="submit">제출</button><br>
양식 초기화 버튼 : <button type="reset">초기화</button><br>  
</form>

- 실행 결과

• 기타 요소

1) <option>

- <select>태그 안에 사용하여, 선택 목록의 내용들(옵션)을 정의합니다.

속성 없이도 사용은 가능하지만 보통 서버로 전송되는 value 속성을 필요로 합니다.

- 속성

속성	값	설명
disabled		옵션을 사용하지 못하도록 비활성화
label	text	옵션의 짧은 버전. 드롭 다운 목록에서는 label 값이 표시됨
selected		페이지 로드 시 특정 옵션을 미리 선택하도록 지정
value	text	서버로 보낼 값 지정

- 사용 예, 실행 결과

위에서 참고.

2) <optgroup>

- 드롭 다운 목록의 옵션을 그룹화하는 데 사용되며, 옵션 목록이 많을 때 그룹화하면 처리하기 쉬워집니다.

- 속성

속성	값	설명
disabled		옵션을 사용하지 못하도록 비활성화
label	text	옵션 그룹의 레이블 지정

- 사용 예

<form>
옵션 그룹 : 
<select>
    <optgroup label="number">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </optgroup>
    <optgroup label="alphabet">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c<option>
    </optgroup>
</select>
</form>

- 실행 결과

3) <fieldset>

- 관련된 양식 요소를 그룹화합니다. 요소들이 상자로 둘러싸인 형태로 나타납니다.

태그 내에서 <legend>태그를 사용하면, 그룹화한 요소에 대한 범례를 정의할 수 있습니다.

- 속성

속성	값	설명
HTML5 지원
disabled		필드 셋 비활성화
form	form_id	필드 셋이 속하는 form을 지정. 동일한 문서에 있는 <form> 요소의 id 속성이어야함
name	text	필드 셋의 이름 지정

- 사용 예

<form>
필드 셋 :
<fieldset>
    <legend>로그인</legend>
        id <input type="text"><br>
        password <input type="text"><br>
</fieldset>
</form>

- 실행 결과

4) <label>

- <input> 요소에 대한 레이블을 정의합니다.

예를 들어 <input>으로 선택 양식을 만든 후에 브라우저 상에서 봤을 때, 버튼을 직접 누르지 않고 <label> 요소 내의 텍스트를 클릭하여도 버튼이 활성화 되는 것으로, 즉 사용성을 높이는 데 도움을 줍니다.

- 속성

속성	값	설명
for	element_id	레이블이 바인딩되는 양식 요소 지정. 관련 요소를 묶는 요소의 id속성과 일치해야함.
HTML5 지원
form	form_id	<label> 요소가 속한 form을 지정

- 사용 예

<form>
레이블 양식 : <br>
 
<label>① label 요소 안에 직접 배치하기
    <input type="radio">
</label> <br>
 
<label for="check">② for속성 이용하기</label>
<input type="checkbox" id="check">
</form>

- 실행 결과

연습

- 회원가입 폼 만들기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form name="membership_application" action="submit.html" method="get">
            <table cellpadding="10" cellspacing="0" border="1">
                <tr>
                    <th colspan="2">회원 가입 폼</th>
                </tr>
 
                <tr>
                    <td>아이디</td> 
                    <td><input type="text" name="id" placeholder="아이디" size="15" required> 
                        <input type=button value="중복 확인"></td>
                </tr>
 
                <tr>
                    <td>비밀번호</td> 
                    <td><input type="password" name="pwd" placeholder="8자 이상 입력" required></td>
                </tr>
 
                <tr>
                    <td>비밀번호 확인</td> 
                    <td><input type="password" placeholder="비밀번호 재확인" required></td>
                </tr>
 
                <tr>
                    <td>이름</td> 
                    <td><input type="text" name="name"></td>
                </tr>
 
                <tr>
                    <td>생년월일</td>     
                    <td><input type="date" name="birth"></td>
                </tr>
 
                <tr>
                    <td>성별</td> 
                    <td><input type="radio" name="gender" value="male">남성 
                        <input type="radio" name="gender" value="female">여성</td>
                </tr>
 
                <tr>
                    <td>E-mail</td> 
                    <td><input type="email"></td>
                </tr>
 
                <tr>
                    <td>전화번호</td> 
                    <td><input type="tel"></td>
                </tr>
 
                <tr>
                    <td>휴대폰</td> 
                    <td>
                    <select name=tel1>
                        <option value=010>010</option>
                        <option value=011>011</option>
                        <option value=019>019</option>
                    </select>
                    -
                    <input type=text name=tel2 size=4>
                    -
                    <input type=text name=tel3 size=4>
                    </td>
                </tr>
 
                <tr>
                    <th colspan="2"><input type="submit" value="가입"> 
                                    <input type="reset" value="취소"></th>
                </tr>
            </table>
        </form>
    </body>
</html>