폼 관련 태그들

폼 만들기 - form태그

사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)이라고 할 수 있다.

<form>태그는 폼을 만드는 가장 기본적인 태그이다.

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

form 태그의 속성

• method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
  • 속성 값
    1. get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256~4096byte까지의 데이터만 서버로 넘길 수 있다.
    2. post : 대부분 이 방식을 사용한다. 사용자의 입력을 표준입력(standard input)으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
• name : 폼의 이름을 지정한다. 한 문서 안에 여러개의 form태그가 있을 경우 폼들을 구분하기 위해 사용한다.
• action : form태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정
• target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

검색창을 만드는 폼 태그
<form action="search.php" method="POST">
    <input type="text" title="검색">
    <input type="submit" value="검색">
</form>

• 사용자의 검색 내용을 받아 처리하는 서버 프로그램(예를 들어 search.php)는 따로 서버 프로그래밍 언어를 공부해 작성해야 한다. html은 UI만 제공한다.

자동완성 기능 - autocomplete

사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여준다. 이러한 기능은 ``autocomplete속성을 이용한다. 기본값은 on으로 설정되어 있다. 비밀번호와 같이 중요한 정보를 입력할때는 off`로 해두는 것이 좋다.

<form action="register.php" autocomplete="off">
...
</form>

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

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

기본형 : <label for="id이름">레이블</label>
		<input id ="id이름" [속성 = "속성 값"]>
		
<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">

• <input>태그는 폼에서 사용자 입력을 받기 위해 사용하는 태그이다.

• 위 예시를 이용하면 <label>태그를 사용한 텍스트 부분과 사용자 입력을 받는 <input>소스가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있다.

라벨을 이용해 체크박스 만들기

<form>
    <h3>수강 분야(다수 선택 가능)</h3>
    <ul>
        <li><input type="checkbox" value="grm">문법</li>
        <li><input type="checkbox" value="grm">작문</li>
        <li><input type="checkbox" value="grm">독해</li>
    </ul>
    
    <h3>수강 과목(1과목만 선택 가능)</h3>
    <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>
</form>

• 수강분야의 태그들은 label태그를 사용하지 않아서 텍스트를 클릭해도 체크박스 버튼이 선택되지 않는다.
• 수강과목의 태그들은 label태그를 사용했기 때문에 텍스트만 클릭해도 왼쪽 라디오 버튼이 선택된다. 최근 대부분의 폼은 모바일 유저를 고려하여 label을 사용한다.

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

쇼핑몰 사이트에서 주문서를 작성하는 폼에 사용자 정보와 배송 정보를 나누어 표시하면 사용자가 정보를 입력하기도 편하고 화면도 깔끔히 정리할 수 있다. 이렇게 하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 <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>

사용자 입력을 위한 <input>태그

<input>태그는 사용자 입력을 받기위해 사용하는 태그이다. 넣을 수 잇는 항목은 아이디나 비밀번호를 비롯해 이메일주소, 전화번호, 날짜, 시간, 이미지 등 다양하다. 이렇게 다양한 옵션 중 무엇이 될지는 type속성에서 결정된다.

입력 항목 만들기

웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. 그 중 사용자 입력을 받을 때 <input>태그를 사용한다. 체크박스나 로그인 버튼처럼 사용자가 클릭하는 버튼도 <input>태그를 이용한다.

ID속성 사용하기

폼을 만들다 보면 똑같은 폼 요소가 여러 번 사용된다. 여러번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id속성이다. id를 지정해두면 <label>태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있다.

id속성 값은 최소한 한개 이상의 문자여야 하고 공백이 있어서는 안됀다.

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

type="hidden" - 히든 필드 만들기

히든 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소이다. 보통 사용자에게 굳이 보여 줄 필요가 없지만 관리자는 알아야 하는 것을 히든 필드로 입력한다.

웹사이트 회원가입창에서 아이디 칸의 태그를 보면 아이디가 중복되는지 체크하고 서버로 전송할 때 hidden필드 값과 함게 서버로 전송되는 것을 알 수 있다.

<input type="hidden" id="agreement" name="agreement" value="Y">

type="text" - 텍스트 필드 만들기

텍스트 필드는 한 줄짜리 일반 텍스트를 입력하는 필드이다. 폼에서 가장 많이 사용하는 요소로 주로 아이디나 이름, 주소 등 텍스트를 입력할 때 사용한다.

텍스트 필드에서 사용할 수 있는 속성은 다음과 같다.

type="password" - 비밀번호 입력란 만들기

password는 문자 그대로 비밀번호 입력란을 만든다. 다만 아이디와 달리 비밀번호는 노출 되선 안되기 때문에 화면에 *와 같은 기호로 표시해야한다. 속성도 value가 없다는 점을 제외하면 text필드와 같다.

type="number" - 숫자 입력하기, type="range" - 슬라이드 막대로 숫자 지정하기

• number를 사용하면 사용자가 입력한 내용을 숫자로 인식한다.

<b>주문 개수 : </b> <input type="number" min="1" max="5" value="1">개

• range태그는 슬라이드 막대를 움직여 숫자 값을 입력하게 한다.

number필드와 range필드에서 사용할 수 있는 속성은 다음과 같다.

<ul>
    <li>
        <label class="reg" for="member">참여인원<small>(최대10명)</small></label>
        <input type="number" id="member" value="1" min="0" max="10" step="1">
    </li>
    <li>
        <label class="reg" for="stuffs">지원물품<small>(인당 5개)</small></label>
        <input type="number" id="stuffs" value="1" min="0" max="50" step="5">
    </li>
    <li>
        <label class="reg" for="satis">희망 단계<small>(하,중,상)</small></label>
        <input type="range" id="satis" value="1" min="1" max="3">
    </li>
</ul>

type="radio", type="checkbox" - 라디오 버튼과 체크박스

라디오 버튼은 여러 요소 중 한 개만 선택하도록 할 경우 사용하고 체크박스 버튼은 복수 선택을 할 때 쓴다. 사용할 수 있는 속성은 다음과 같다.

type="color" - 색상 선택 상자

<p>올해과티 색깔 고르세요.</p>
<label>선호색상 <input type="color" value="#00ff00"></label>

type="date",type="month",type="week" - 날짜 표시

<label><input type="date" id="start"></label>
<label><input type="date" id="end"></label>

type="time",type="datetime",type="datetime-local" - 시간 지정

<input>태그를 사용하면 날짜뿐 아니라 시간도 지정할 수 있다. 속성은 다음과 같다.

<h3>원하는 대관시간 선택하세요.(오늘)</h3>
<label>시작시간<input type="time" value="09:00" id="start1"></label>
<label>종료시간<input type="time" value="18:00" id="end1"></label>

<h3>원하는 대관시간 선택하세요.(다른날짜)</h3>
<label>시작시간<input type="datetime-local" value="2020-11-08T09:00" id="start2"></label>
<label>종료시간<input type="datetime-local" value="2020-11-09T18:00" id="end2"></label>

type="submit",type="reset"-서버전송, 리셋버튼 넣기

리셋버튼은 <input>요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 지울 수 있다. 이때 value속성을 사용해 버튼에 표시할 내용을 지정한다.

반면 submit은 사용자가 폼에 입력한 정보를 서버로 전송하는 submit버튼을 만든다.

<form action="register.php" method="POST">
    <label> 메일주소 <input type="text"></label>
    <input type="submit" value="제출">
    <input type="reset" value="다시입력">
</form>

type="image" - 이미지 버튼 넣기

image를 이용해 submit버튼 대신 전송 이미지를 넣을 수 있다.

<label>아이디<input type="text" size="15"></label>
<label>비밀번호<input type="password" size="15"></label>
<input type="image" id="butt" src="images/login.jpg" alt="login">

type="button" - 버튼 넣기

폼 안에 버튼 형태를 만든다. 별다른 기능은 없기 때문에 자바스크립트 함수를 연결해 사용한다.

<input type="button" value="새 탭 열기" onclick="window.open()">

type="file" - 파일 첨부하기

file필드를 넣으면 웹 브라우저 화면에 [파일선택]이나 [찾아보기] 등이 표시되는데 이 버튼을 클릭한 후 파일을 선택하면 파일이 첨부된다.

<label> 첨부파일 <input type="file"></label>

<input>태그의 다양한 속성

autofocus속성

autofocus속성을 사용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다.

<label class="reg" for="uname">이름</label>
<input type="text" id="uname" autofocus required>

placeholder속성 - 힌트 표시하기

사용자가 텍스트를 입력할 떄 도움이 되도록 입력란에는 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다.

<label class="reg" for="uid">학번</label>
<input type="text" id="uid" placeholder="하이픈 없이 입력">

readonly속성

입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수도 있다.

<label class="reg" for="subj">영어회화</label>
<input type="text" id="subj" value="09:00~18:00" readonly>

required속성 - 필수 필드 지정하기

내용을 폼에 입력한 후 submit버튼을 클릭하면 폼을 서버로 전송하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 한다. required필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타난다.

<label class="reg" for="name">이름</label>
<input type="text" id="name" autofocus required>

min,max,step속성

세 가지 속성 모두 <input>태그의 유형이 date이거나 datetime, datetime-local,month,week,time,number,range일 때만 쓸 수 있다. min과 max는 해당 필드의 최솟값과 채댓값을 지정한다. step속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킨다.

<label class="reg" for="group">단체주문</label>
<input type="number" id="group" value="10" min="10" max="100" step="10">

size, minlength, maxlength속성 - 길이, 최소길이, 최대길이 속성

min,max,step속성이 숫자의 조건을 지정했다면 텍스트 길이도 조건으로 만들 수 있다.

<label>아이디:<input type="text" id="user_id" size="10" minlength="4" maxlength="15"></label>
<small style="color: red;">4~15자리 이내의 영문과 숫자</small>

여러 데이터를 나열해서 보여 주기

<select>, <optgroup>,<option> 태그 - 드롭다운 목록 만들기

사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 드롭다운은 클릭했을때 목록이 아래로 펼쳐진다. 드롭다운은 <select>,<option>태그를 이용해 표시한다.

<select>태그의 속성

select태그를 사용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 한 가지 항목을 선택할 수 있다. 이때 size속성이나 multiple속성을 이용해 드롭다운의 크기나 항목 갯수를 조절할 수 있다.

<option>,<optgroup>태그

• 드롭다운 목록에 표시되는 옵션은 option태그를 이용해 지정한다.

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

<datalist>태그, <option>태그

드롭다운 목록에서 select태그 대신 datalist태그를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있다. 즉 필드에 값을 직접 입력하는 것이 아니라 데이터 목록에서 제시한 값 중에서 선택하면 그 값이 자동으로 입력된다.

<input type="text" id="interest" list="choices">
<datalist id="choices">
    <option value="grammar" label="문법"></option>
    <option value="voca" label="어휘"></option>
    <option value="speak" label="회화"></option>
    <option value="listen" label="청해"></option>
    <option value="news" label="뉴스청취"></option>
</datalist>

<textarea> 태그 - 여러 줄 입력하는 텍스트 영역 만들기

textarea는 한 줄 이상의 문장을 입력할 때 사용하는 폼이다. 게시판의 게시물 입력이나 회원가입 양식에서 사용자 약관을 표시할 때 주로 사용한다.

기타 다양한 폼 요소

<button>태그 - 버튼 넣기

button태그의 type속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정한다. 선택할 수 있는 값은 submit과 reset, button 중 하나이고 지정하지 않으면 submit으로 간주한다.

<output>태그 - 계산 결과

output태그는 입력하는 값이 계산 결과라는 것을 브라우저에게 알려준다.

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" name="num1" value="0">
    +<input type="number" name="num2" value="0">
    =<output name="result" for="num"></output>
</form>

<progress>태그 - 진행 상태 보여주기

progress태그는 작업 진행 상태를 나타낼 때 사용하는 태그다. 작업 시작을 0으로 하고 최종 완료를 최대값으로 해 얼마나 진척되었는지 숫자로 표현한다.

<ul>
    <li>
        <label>10초 남음</label>
        <progress value="50" max="60"></progress>
    </li>
    <li>
        <label>진행률 30%</label>
        <progress value="30" max="100"></progress>
    </li>
</ul>

자바스크립트를 이용하면 progress막대의 진행을 순차적으로 계속 진행시켜 마치 애니메이션처럼 보이게 할 수 있다.

<meter>태그 - 값이 차지하는 크기 표시하기

meter태그는 progress태그를 사용했을 때와 결과 화면이 거의 같기 때문에 혼동되기도 한다. 하지만 progress와 다르게 meter태그는 전체 크기 중에서 얼마나 차지하는 지를 표현할 때 사용한다.

보통 작업이 진행된다기 보다 하드 디스크 전체 용량 중 현재 사용하고 있는 용량이나 전체 유권자 중 몇 명이 투표했는지를 보여주는 투표율과 같이 범위 내에서 값이 차지하는 비율을 보여줄 때 사용한다.

<ul>
    <li>
        <label>점유율 0.8</label>
        <meter value="0.8"></meter>
    </li>
    <li>
        <label>사용량 64%</label>
        <meter min="0" max="100" value="64"></meter>
    </li>
    <li>
        <label>트래픽 초과</label>
        <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
    </li>
    <li>
        <label>적절한 트래픽</label>
        <meter value="0.5" optimum="0.8"></meter>
    </li>
</ul>