[HTML] 입력 양식 (form)

2023-11-23 10 분 소요

개요

입력 양식(폼, Form이라고도 함)은 웹 페이지에서 사용자가 정보를 입력할 수 있게끔 하는 요소이다. 로그인 입력하는 곳, 상품 결제 정보 입력하는 곳 등이 그 예라 볼 수 있겠다.

폼을 통해 사용자가 정보를 입력하고 특정 버튼을 누르면 이를 통해 사용자가 입력한 정보가 서버로 전달된다. 보통은 사용자가 정보를 입력하여 그 결과를 보도록 요청을 하는 형태이다. 예를 들어 로그인 정보를 입력하고 로그인 버튼을 누르면 로그인이 된 상태를 보여주도록 하거나, 상품 결제 정보에 정보를 입력하고 “결제” 버튼을 누르면 그 결과로 해당 상품에 대한 결제가 진행되고 그 결과가 웹 페이지에 보여지는 형태이다. 또는 게시판에 글을 입력하고 ‘게시’ 버튼을 누르면 해당 글이 게시판에 게재되는 것도 포함된다. 이를 위해, 서버에 전달된 사용자의 정보가 서버 내 데이터베이스에 저장되거나, 해당 정보에 관련된 데이터를 데이터베이스 내에서 검색하여 이를 사용자에게 전송하는 식이다. (데이터베이스 내 정보 저장, 수정, 삭제, 검색 등이 가능) 서버로부터 전송받은 결과물은 다시 사용자의 웹 브라우저에 보여지게 된다.

HTML에서 제공하는 폼으로는 사용자가 정보를 입력할 수 있는 공간만 형성될 뿐, 폼을 통해 입력된 데이터를 서버에 전송하고 처리하는 것은 서버 프로그래밍을 이용해야 한다.

<form> 태그로 폼 생성

닫는 태그 존재 여부: 예

<form> 태그로 폼을 생성할 수 있다.

다음은 폼 태그를 이용하여 간단하게 “회원 가입” 입력창을 구현한 코드와 그 실행 모습이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML로 간단한 웹 문서 만들기</title>
</head>
<body>
    <h1>폼(Form)</h1>
    <form>
        <fieldset>
            <legend>회원 가입</legend>
            <div>
                <label>ID <input type="text"></label>
            </div>
            <div>
                <label for="pw">비밀번호 </label>
                <input type="text" id="pw">
            </div>
        </fieldset>
        <fieldset>
            <legend>개인 정보</legend>
        </fieldset>
    </form>
</body>
</html>

예제 1-1 실행결과

위 코드에서 새로 나온 내용들을 살펴보겠다.

<label>

닫는 태그 존재 여부: 예

<label> 태그는 입력창과 같은 폼 요소에 레이블을 붙여주는 태그이다. 즉, 해당 입력창에 사용자가 무엇을 입력해야하는지를 알려주는 텍스트를 보여주는 태그이다. 위 예제 1-1의 실행결과에서 “ID”,”비밀번호”와 같은 텍스트가 그 오른쪽에 있는 입력창에 붙은 레이블이다.

참고로, 위 예제 1-1에서처럼 한 줄로 짧은 텍스트를 입력받도록 하는 입력창을 생성하려면 <input> 태그를 이용하여 다음과 같이 코드를 입력하면 된다.

<input type="text">

<label> 태그가 <input> 태그와 같은 폼 요소와 함께 사용하는 방법에는 두 가지가 있다. 위 예제 1-1에서 ID 부분과 비밀번호 부분에서 보여지고 있는 코드가 그 예시이다.

하나는 <label> 태그 안에 <input> 태그를 작성하는 것이다.

<label>ID <input type="text"></label>

레이블로 붙이고자 하는 텍스트는 폼 요소의 왼쪽에 붙이고자 한다면 <input> 태그의 왼쪽에, 오른쪽에 붙이고자 한다면 오른쪽에 작성하면 된다.

또 한 가지 방법은 <label> 태그와 폼 요소 태그 (<input>)를 따로 분리하여 작성하되, 폼 요소 태그에서는 id 속성값을 설정하고, <label> 태그에서는 for 속성에 해당 id 속성값을 입력하여 연결하는 방법이다.

<label for="pw">비밀번호 </label>
<input type="text" id="pw">

<fieldset>, <legend>

닫는 태그 존재 여부: 둘 다 존재

서로 비슷한 기능을 하는 폼 요소들끼리 하나로 묶어 폼 안에서 여러 폼 영역들로 나누고자 할 때 <fieldset> 태그를 이용한다. 해당 태그 안에 여러 폼 요소 태그들을 넣으면 된다.

<legend> 태그는 <fieldset> 태그 안에서 사용되며, <fieldset> 태그로 감싼 폼 요소들의 그룹에 이름을 붙여주는 태그이다.

위 예제 1-1에서는 해당 태그들이 다음과 같이 사용되었다.

<form>
    <fieldset>
        <legend>회원 가입</legend>
        <div>
            <label>ID <input type="text"></label>
        </div>
        <div>
            <label for="pw">비밀번호 </label>
            <input type="text" id="pw">
        </div>
    </fieldset>
    <fieldset>
        <legend>개인 정보</legend>
    </fieldset>
</form>

<form> 태그의 속성값들

<form> 태그 자체에도 사용할 수 있는 속성값들이 있다.

다음은 폼으로 입력된 데이터들에 대해 서버에서 어떻게 다룰지를 정하는 속성들이다.

속성	설명
method	사용자가 입력한 내용을 서버에 어떻게 http request할 것인지 그 method를 정한다. get과 post를 사용할 수 있다.
name	자바스크립트로 폼 제어 시 사용할 폼 이름 지정
action	<form> 태그 내 데이터를 처리할 서버 프로그램 지정
target	action 속성에서 지정한 스크립트 파일을 다른 위치에서 열도록 한다.

폼 내 입력 자체에 대한 속성 중 하나로 autocomplete가 있다. 기본 속성값은 “on”이며, “on”, “off” 둘 중 하나의 값을 가질 수 있다. 해당 속성은 자동 완성 기능으로, 기존에 사용자가 입력했던 글자들 중 일부라도 같은 글자를 입력하면 그 아래에 해당 텍스트들을 자동으로 보여주는 기능이다.

<input>

닫는 태그 존재 여부: 아니오

해당 태그는 사용자가 여러 종류의 정보들을 입력하게 할 수 있는 다양한 폼 요소들을 제공한다.

type 속성을 통해 다양한 형태의 폼 요소 삽입하기

다음은 <input> 태그의 type 속성의 값으로 지정할 수 있는 여러 폼 요소들을 이용하여 웹 문서를 만든 코드 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML로 간단한 웹 문서 만들기</title>
</head>
<body>
    <h1>폼(Form)</h1>
    <form>
        <fieldset>
            <legend>회원 가입</legend>
            <div>
                <label>ID 
                    <input type="text" 
                    size="15" value="15글자 제한" maxlength="15">
                </label>
                <input type="image" src="/resources/2023-11-23/html-form/id_overlap_check.png"
                alt="id중복확인" width="80">
            </div>
            <div>
                <label for="pw">비밀번호 </label>
                <input type="password" id="pw" size="15">
            </div>
        </fieldset>
        <fieldset>
            <legend>개인 정보</legend>
            <div>
                <label>휴대폰 번호 <input type="tel"></label>
            </div>
            <div>
                <label>이메일 <input type="email"></label>
            </div>
            <div>
                <label>
                    생년 월일 입력
                    <input type="date">
                </label>
            </div>
            <div>
                <p>
                    <b>관심분야</b><br>
                    당신의 현재 관심분야를 선택하세요(중복 선택 가능)
                </p>
                <ul type="none">
                    <li>
                        <label><input type="checkbox"> 요리</label>
                    </li>
                    <li>
                        <label><input type="checkbox"> 독서</label>
                    </li>
                    <li>
                        <label><input type="checkbox"> 인터넷/IT</label>
                    </li>
                    <li>
                        <label><input type="checkbox"> 게임</label>
                    </li>
                </ul>
            </div>
            <div>
                <p><b>요금제</b></p>
                <label>
                    <input type="radio" value="free" name="payment" checked> 무료
                </label>
                <label>
                    <input type="radio" value="standard" name="payment">스탠다드(월8000원)
                </label>
                <label>
                    <input type="radio" value="premium" name="payment">프리미엄(월12,000원)
                </label>
            </div>
            <div>
                <p>
                    <b>프로필 사진</b><br>
                    원하는 프로필 사진을 첨부하세요.
                </p>
                <input type="file">
            </div>
        </fieldset>
        <fieldset>
            <legend>설문 조사</legend>
            <div>
                <p>1. 일주일에 몇 번 운동하십니까?</p>
                <label>운동 횟수 입력 
                    <input type="number" value="0" min="0" max="100">
                </label>
            </div>
            <div>
                <p>1-1. 운동을 만약에 한다면, 한 번 할 때 강도는 어느 정도입니까?</p>
                <input type="range" value="0" min="0" max="100" 
                oninput="this.nextElementSibling.value = this.value">
                <output>0</output>%
            </div>
            <div>
                <p>2. 평소에 하루 중 언제 잠에서 깨십니까?</p>
                <input type="time" value="09:00">
            </div>
        </fieldset>
        <fieldset>
            <legend>그 외</legend>
            <div>
                <label>첨부할 url <input type="url"></label>
            </div>
            <div>
                <label>검색하기 <input type="search"></label>
            </div>
            <input type="button" value="빈 버튼">
        </fieldset>
        <input type="submit" value="제출">
        <input type="reset" value="리셋">
    </form>
</body>
</html>

위 코드로 작성한 웹 페이지로 이동하여 결과물 보기

위 링크에는 위 HTML 코드를 브라우저에서 실행한 결과를 볼 수 있다. 그저 웹 화면만 구성하였을 뿐, 실제 서버에 요청을 보내는 기능은 하나도 없다.

위 예제 2-1에 사용된 <input> 태그의 type 속성들에 대해 하나씩 살펴보겠다.

text

일반 텍스트를 한 줄로 입력할 때 사용하는 속성값.

<label>ID 
    <input type="text" 
    size="15" value="15글자 제한" maxlength="15">
</label>

예제 2-2 실행결과

text 필드에서 설정 가능한 속성들)

size: text 필드에 텍스트를 보여줄 수 있는 글자 길이. 해당 값에 따라 텍스트 필드의 너비도 달라진다. 위 예제 2-2에서 size=”1”로 고치면 텍스트 필드의 너비도 그만큼 줄어드는 것을 확인할 수 있을 것이다.
value: 처음 사용자에게 보여줄 텍스트 필드 안에 넣을 텍스트.
maxlength: 텍스트 필드에 입력할 수 있는 최대 글자 수 제한

password

text와 똑같으나 사용자가 텍스트 입력 시 텍스트가 * 표시로 보인다.

<label for="pw">비밀번호 </label>
<input type="password" id="pw" size="15">

예제 2-3 실행결과

password에서 사용할 수 있는 속성들

size: text의 size 속성과 동일
maxlength: text의 maxlength 속성과 동일.

image

이미지 버튼을 생성한다. 해당 버튼은 폼에 입력된 정보들을 서버로 전송할 때 사용된다.

<input type="image" src="images\id_overlap_check.png"
alt="id중복확인" width="80">

예제 2-4 실행결과

tel

text와 똑같으나, 사용자로부터 전화번호를 입력하게 하는 용도의 폼 요소이다.

<label>휴대폰 번호 <input type="tel"></label>

예제 2-5 실행결과

해당 폼 요소에 입력된 데이터가 전화번호인지 아닌지는 해당 태그만으로는 알 수 없다. 향후 자바스크립트를 이용해서 전화번호 판별 코드를 따로 짜야할 것이다.

모바일 웹페이지에서는 해당 전화번호로 바로 전화를 걸 수 있다고 한다.

email

text와 똑같으나, 사용자로부터 이메일을 입력받게 하는 용도의 폼 요소이다.

<label>이메일 <input type="email"></label>

예제 2-6 실행결과

text와 똑같아 보이지만, 해당 요소로 입력된 텍스트가 이메일인지 아닌지를 자체적으로 판단해준다. 즉, 자바스크립트로 이메일 판별 코드를 따로 작성하지 않아도 HTML에서 판단한다고 한다.

url

text와 똑같으나, 사용자로부터 특정 웹 사이트의 주소인 url을 입력받게 하는 용도의 폼 요소이다.

<label>첨부할 url <input type="url"></label>

예제 2-7 실행결과

email과 마찬가지로, 겉으로 보면 text와 다를 바 없지만 HTML 내에서 자체적으로 해당 텍스트 필드로 입력된 데이터가 url인지 아닌지를 판단할 수 있다고 한다. 즉, 자바스크립트로 따로 관련 코드를 작성하지 않아도 된다고 한다.

search

text와 똑같으나, 검색 창에 특화된 폼 요소를 생성한다.

<label>검색하기 <input type="search"></label>

에제 2-8 실행결과

해당 폼 요소의 오른쪽에 마우스를 가져다 대면 위 사진처럼 “X”가 떠서 검색창에 입력한 텍스트를 모두 지울 수 있다.

date, month, week

사용자가 날짜 정보를 입력하게 하고자 할 때 일반적인 텍스트 창 대신 작은 달력을 띄우고 그 안에서 사용자가 원하는 날짜를 클릭하게 하여 날짜 정보를 입력하게 하는 폼 요소들이다.

date는 클릭 시 달력이 보이게 되며, 그곳에서 특정 날짜 선택 시 해당 폼 요소에 “yyyy-mm-dd’ 형태의 날짜를 화면에 띄운다.

month는 클릭 시 특정 년도의 달까지만 선택할 수 있으며, 특정 날짜 선택 시 해당 폼 요소에 ‘yyyy년 mm월’ 형태의 날짜 텍스트를 보여준다.

week는 클릭 시 특정 달의 특정 주를 선택할 수 있다. 특정 주 선택 시 해당 폼 요소에 ‘yyyy, ww번째 주’라고 표시된다. 여기서 주는 그 해의 1월 첫 째주부터 계산한 결과를 보여준다.

다음은 type=”date”를 이용하여 생년월일을 입력하도록 하는 폼 요소 예제 코드이다.

<label>생년 월일 입력<input type="date"></label>

예제 2-9 실행결과

참고로 날짜나 시간 폼에서 사용자가 선택할 수 있는 날짜 또는 시간 범위를 제한하고자 한다면 다음의 속성들을 사용할 수 있다. (시간 관련 폼은 다음에 후술)

속성	설명
min	날짜, 시간 범위 제한에 사용되며, 시작 날짜, 시간을 지정한다.
max	날짜, 시간 범위 제한에 사용되며, 마지막 날짜, 시간을 지정한다.
step	스핀 박스의 화살표 클릭으로 숫자를 증감시킬 때 증감시킬 크기 지정
value	기본으로 표시할 날짜, 시간 지정

위 속성값의 형태로 날짜의 경우 ‘yyyy-mm-dd’, 시간의 경우 ‘hh:mm’ 등으로 값을 대입하면 된다.

time, datetime, datetime-local

time은 시간만 지정하고자 할 때, datetime, datetime-local은 사용자의 지역에 맞는 시간, 날짜를 지정하게 하고자 할 때 사용할 수 있는 폼 요소들이다. 다음은 time을 이용한 코드 예제이다.

<p>2. 평소에 하루 중 언제 잠에서 깨십니까?</p>
<input type="time" value="09:00">

예제 2-10 실행결과1

예제 2-10 실행결과2. 시간을 선택할 수 있다.

시간 범위 제한에 대한 속성은 date, month, week 폼 요소의 속성 참고.

checkbox

여러 개의 항목들 중 몇몇개를 선택하도록 하고자 할 때 체크박스를 생성해주는 속성값이다. 해당 속성으로 생성된 여러 개의 체크박스들 중 하나 뿐만 아니라 여러 개를 선택할 수 있다.

다음은 예제 2-1에서 체크박스가 활용된 코드 예제이다.

<p>
    <b>관심분야</b><br>
    당신의 현재 관심분야를 선택하세요(중복 선택 가능)
</p>
<ul type="none">
    <li>
        <label><input type="checkbox"> 요리</label>
    </li>
    <li>
        <label><input type="checkbox"> 독서</label>
    </li>
    <li>
        <label><input type="checkbox"> 인터넷/IT</label>
    </li>
    <li>
        <label><input type="checkbox"> 게임</label>
    </li>
</ul>

예제 2-11 실행결과

한 편, 체크박스에 사용할 수 있는 속성으로 다음이 존재한다.

value: 체크박스 항목에 적용할 값으로, 항목이 선택되면 해당 값이 서버로 전송된다. 이 때, 해당 값은 영문 또는 숫자여야 하며, 서버와의 통신을 위해선 필수 속성이라고 한다. (위 예제 2-10을 예로 들면, 요리에는 <input type=”checkbox” value=”cook”> 이라고 할 수 있겠다)
checked: 처음 체크박스에 체크 표시가 되도록 할 때 사용. 속성값을 따로 지정하지 않고 해당 속성 자체만 사용한다. (예: <input type=”checkbox” checked>)

radio

체크박스와 비슷하나, 여러 항목을 선택할 수 있는 체크박스와 달리, 라디오는 여러 항목 중 하나만을 선택할 수 있다. 어떤 항목을 선택했다가 다른 항목으로 재선택하면 이전 항목의 체크 표시는 사라지고 해당 항목에만 체크 표시가 뜬다.

다음은 예제 2-1에서 라디오를 활용한 코드 예제이다.

<p><b>요금제</b></p>
<label>
    <input type="radio" value="free" name="payment" checked> 무료
</label>
<label>
    <input type="radio" value="standard" name="payment">스탠다드(월8000원)
</label>
<label>
    <input type="radio" value="premium" name="payment">프리미엄(월12,000원)
</label>

예제 2-12 실행결과

라디오에 적용할 수 있는 속성으로 다음이 존재한다.

value: checkbox와 동일
checked: checkbox와 동일
name: 여러 항목 중 단 하나의 항목만을 선택하게 하려면 반드시 설정해야 하는 속성으로, 같은 속성값을 가진 라디오 버튼들에 적용된다. 위 예제에서 세 라디오 버튼 모두 name=”payment”로 지정되었다. 해당 버튼들은 선택 시 단 하나의 항목만 선택할 수 있게 된다. (이 속성을 지정하지 않을 경우 체크박스와 똑같이 여러 항목을 선택할 수 있게 된다)

file

사용자가 이미지, 문서 등 여러 파일들을 첨부할 수 있는 폼 요소이다.

다음은 예제 2-1에서 해당 요소를 사용한 예제 코드이다.

<p>
    <b>프로필 사진</b><br>
    원하는 프로필 사진을 첨부하세요.
</p>
<input type="file">

예제 2-13 실행결과

위 실행결과와 같이 “파일 선택” 버튼을 누르면 첨부할 파일을 선택할 수 있는 대화상자가 뜬다. 해당 창에서 첨부를 원하는 파일을 선택하면 된다.

number

해당 속성값은 spinbox와 동일한 폼 요소로, 칸 오른쪽의 위, 아래 화살표를 누름으로써 해당 칸에 표시되는 숫자들을 증감시킬 수 있다. 다음은 이를 활용한 예제이다.

<p>1. 일주일에 몇 번 운동하십니까?</p>
<label>운동 횟수 입력 
    <input type="number" value="0" min="0" max="100">
</label>

예제 2-14 실행결과

number 폼 요소에 적용할 수 있는 속성으로 다음이 있다.

min, max: number 폼 요소에서 사용자가 지정할 수 있는 숫자 범위 최소, 최대값을 설정할 수 있다. min의 기본값은 0, max의 기본값은 100이다.
step: 숫자 증감 시 증감되는 간격을 설정. 기본값은 1이다.
value: 입력칸에 표시할 초기값.

range

슬라이드 막대로 숫자를 결정할 수 있는 폼 요소이다. 다음은 이를 활용한 코드 예제이다.

<p>1-1. 운동을 만약에 한다면, 한 번 할 때 강도는 어느 정도입니까?</p>
<input type="range" value="0" min="0" max="100" 
oninput="this.nextElementSibling.value = this.value">
<output>0</output>%

예제 2-15 실행결과

슬라이드 위치에 따른 숫자값을 화면에 표시하는 기능은 References [1]에서 참조함. 위 예제 2-14에서, <input> 태그의 oninput 속성값과 <output> 태그가 없으면 위 실행결과처럼 현재 슬라이드 막대로 선택한 숫자가 나오지 않는다.

range에서 사용할 수 있는 속성들 중 number 폼 요소의 속성들을 그대로 사용할 수 있다.

submit, reset

submit, reset 폼 요소는 버튼과 똑같으나, submit 버튼은 여태까지 사용자가 입력한 정보들을 서버로 전송하는 역할을, reset은 사용자가 입력한 정보들을 모두 지워 초기화시키는 역할을 한다.

<input type="submit" value="제출">
<input type="reset" value="리셋">

예제 2-16 실행결과

button

버튼을 생성하는 폼 요소이다. 자바스크립트 코드와 연결하여 해당 버튼을 누르면 특정 기능을 할 수 있도록 설정할 수 있다.

<input type="button" value="빈 버튼">

예제 2-17 실행결과

References

[1] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

[2] range 폼 요소에 현재 슬라이드바의 값 표시 방법.

HTML5 input type range show range value

This content is licensed under CC BY-NC 4.0

JeroCaller