[01. HTML] 008. 폼

폼은 방문자로부터 정보를 수집하는 데 사용된다. ID나 패스워드를 폼을 통해 입력받아 로그인을 하거나 라디오 버튼, 체크박스, 드롭다운 박스 등으로 사용자에게 몇 가지 범위내에서 선택할 수 있는 기능을 제공할 수도 있다.

 

폼의 기본적인 구조는 <form>요소를 사용하여 다음과 같다.

 

<form action="정보를 전달할 주소" method="get">
    <p>ID
        <input type="text" name="username" maxlength="30">
    </p>
</form>

 

action 속성은 정보를 전달할 서버의 url이다. method는 get과 post 두 가지 전달방식이 있는데 get은 url창에 정보가 노출된다. 하지만 post방식은 http 헤더에 추가하여 전송하기 때문에 비밀번호 등 노출되면 안되는 정보를 전송할 때 사용된다. <input>요소를 추가하여 최대 길이 30글자의 텍스트를 username의 이름으로 입력받는다. 만약에 password처럼 화면에 나타나서는 안되는 정보는 type=”password”라고 하면 된다. 그리고 type=”hidden”을 사용하여 폼 컨트롤을 숨겨 사용자가 현재 보고 있는 페이지 정보 등을 전달하는 데 사용할 수도 있다. type=”date”를 통하여 날짜를 입력할 수도 있다. 그 외의 type에는 email, url, search 등이 있다.

 

<input>요소에 radio 버튼이나 checkbox를 추가할 수도 있다.

 

<fieldset>
    <legend>폼 컨트롤</legend>
    <label>이름:
        <input type="text" name="username" maxlength="30">
    </label>
    <p>라디오 버튼<br />
        <input id="r1" type="radio" name="radio" value="라디오 버튼1" checked="checked">
        <label for="r1">라디오 버튼1</label>
        <input id="r2" type="radio" name="radio" value="라디오 버튼2">
        <label for="r2">라디오 버튼2</label>
        <input id="r3" type="radio" name="radio" value="라디오 버튼3">
        <label for="r3">라디오 버튼3</label>
    </p>
    <p>체크박스<br />
        <input id="c1" type="checkbox" name="checkbox" value="체크박스1" checked="checked">
        <label for="c1">체크박스1</label>
        <input id="c2" type="checkbox" name="checkbox" value="체크박스2" checked="checked">
        <label for="c2">체크박스2</label>
        <input id="c3" type="checkbox" name="checkbox" value="체크박스3">
        <label for="c3">체크박스3</label>
    </p>
</fieldset>

 

[그림 1.14] 폼 컨트롤

 

<label>요소를 라디오 버튼이나 체크박스와 함께 사용하면 사용자는 선택하기 위해 레이블을 클릭해도 폼 컨트롤이 클릭이 된다. <fieldset>은 폼 컨트롤들을 그룹화하는 것이다.

 

그리고 드롭다운 리스트 박스와 다중 셀렉트 박스는 <select>요소를 사용해 만든다.

 

<form action="정보를 전달할 주소" method="get">
    <p>드롭다운 리스트 박스</p>
    <select name="dropdown_listbox">
        <option value="드롭다운1">드롭다운 리스트1</option>
        <option value="드롭다운2">드롭다운 리스트2</option>
        <option value="드롭다운3">드롭다운 리스트3</option>
    </select>
</form>

<form action="정보를 전달할 주소" method="get">
    <p>다중 셀렉트 박스</p>
    <select name="multi_selection_box" size="3" multiple="multiple">
        <option value="셀렉션1">셀렉션1</option>
        <option value="셀렉션2">셀렉션2</option>
        <option value="셀렉션3">셀렉션3</option>
    </select>
</form>

 

[그림 1.15] 드롭다운 리스트 박스와 멀티 셀렉트 박스

 

사용자가 파일을 업로드하려면 파일 입력 박스를 만들어야 한다.

 

<form action="정보를 전달할 주소" method="post">
    <p>파일 입력 박스</p>
    <input type="file" name="file_upload" required="required">
    <input type="submit" value="Upload">
</form>

 

type=”file”로 파일 선택 버튼을 만들고 type=”submit”으로 업로드 버튼을 만든다. 버튼에 이미지를 넣고 싶으면 type=”image”로 바꾸고 src 속성에 이미지 주소를 입력한다. required 속성으로 폼의 유효성 검증을 할 수 있다.

 

그리고 이러한 버튼은 <button>요소를 통해서도 만들 수 있다.

 

<button>버튼</button>