3장 HTML5 웹폼

3.1 웹폼과 <form>태그

HTML5 문서로 된 웹페이지를 통해 사용자로부터 정보를 입력받는 요소를 웹폼(Webform)이라고 한다. 사용자로부터 로그인, 등록, 검색 등 다양한 정보를 입력 받기위해 사용된다. HTML5에서는 <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label> 등의 웹폼 요소(Webform element)들을 제공한다.

이와 같은 웹폼 요소들은 <form> </form> 블록안에 넣어 사용자 입력을 받아 처리하여 인터렉티브한 기능을 제공할 수 있게 해준다. <form> 태그가 가질 수 있는 속성은 [표 3.1.1]과 같다.

다음은 <form> 태그를 사용한 예이다. 여기서 php는 서버 사이드 프로그래밍 언어인 PHP를 의미한다.

3.2 주요 웹폼 요소

HTML5는 <input> 태그에서 사용자로부터 데이터를 입력받는 텍스트박스, 체크박스, 라디오 버튼 등 많은 웹폼 요소를 제공한다. <input> 태그는 많은 속성을 가지고 있는데(https://www.w3schools.com/tags/tag_input.asp 참조). [표 3.2.1]은 주요 속성을 요약한 것이다.

<input> 에 있는 웹폼 요소 이외에 <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label> 등의 웹폼 요소들이 있다.

이와 같은 많은 웹폼 요소들을 다음 절부터 기능별로 모아서 살펴보자.

3.2.1 버튼 요소

버튼은 직사각형 모양으로 생긴 웹폼 요소로서 <input> 태그나 <button> 태그로 만들 수 있으며 그 형식은 [표 3.2.2]와 같다. type 속성으로 단순 버튼, submit 버튼, reset 버튼, image 버튼 등을 만들 수 있다.

가. 단순 버튼

<input type=”button” … >은 간단한 버튼으로 자바스크립트 코드에서 많이 이용된다. 이 버튼은 사용자가 클릭하였을 때 클릭된 이벤트가 발생한 것을 알 수 있다. 다음은 버튼을 클릭하였을 때 간단한 메시지를 보내는 예이다.

위의 예에서 <input type=”button” value=”버튼” …> 은 다음과 같이 <button> 태그를 이용할 수도 있다.

<button type=”button” value=”버튼” onclick=”alert(‘버튼을 눌렀어요’)”</button>

나. 전송(submit) 버튼

<input type=”submit” … >은 브라우저가 폼 데이터를 웹 서버로 전송되게하는 submit 버튼이다.

다. 초기화(reset) 버튼

<input type=”reset” … >은 사용자가 폼에 입력한 내용을 모두 지우고 초기화하는 reset 버튼이다.

라. 이미지 버튼

<input type=”image” … >는 직사각형의 버튼을 이미지로 바꾼 버튼으로 자바스크립트 코드에서 많이 이용된다.

<input type=”image” src=”jjlee.jpg”>

<button type=”button”><img src=”jjlee.jpg”></button>

이미지 버튼은 사용자가 클릭하였을 때 버튼과 유사하게 클릭된 이벤트가 발생한 것을 알 수 있다. 이미지를 선택하면 이미지의 이름과 마우스 위치 정보가 “이름/값”형태로 서버에 보내지고, 위치는 ‘이름.x’ 와 ‘이름.y’ 형태로 보내진다.

3.2.2 텍스트 입력 요소

텍스트 입력 요소에는 한 줄의 간단한 문자열을 입력 받는 텍스트/패스워드 박스, 지정된 텍스트에서 문자열을 선택하는 <datalist>, 여러 줄의 문자열을 입력받을 수 있는 <textarea> 등이 있다.

가. 텍스트/패스워드 입력 박스

HTML 문서에서 이름이나 주소와 같은 한 줄 텍스트 입력은 <input type=”text” … >를 이용하는데 그 형식은 [표 3.2.3]과 같다. 사각형 모양의 텍스트 입력 박스가 나타난다.

패스워드와 같은 암호 텍스트 입력은 <input type=”password” … >를 이용하는데 형식과 기능이 <input type=”text” … >와 유사하다. 다만 패스워드 입력 박스는 입력되는 문자열이 기호 ‘***..’로 암호화 된다.

다음은 텍스트 입력 요소의 예이다. reset 버튼과 submit 버튼을 함께 사용하였다.

나. 사용자 선택 텍스트 박스 <datalist>

<input type=”text” … >는 사용자가 임의대로 텍스트를 입력한다. 만일 텍스트 상자에 지정된 텍스트 목록을 주고 그중에서 하나만 선택하게 할 때에는 <datalist> </datalist> 태그를 같이 이용하여 할 수 있다. 예를 들어 한국어, 영어, 일본어 등 세 나라 언어 중에 하나를 선택하는 다음 예를 살펴보자. 선택 가능한 언어를 <datalist> </datalist> 안에 <option> 태그를 이용하여 만들고 id를 “language”로 부여한다. 이 id를 input 태그안의 list 속성값과 일치시킨다.

<input type=”text” list=”language”>

다. 여러 줄의 텍스트 입력 박스 <textarea>

여러 줄의 텍스트 입력은 <textarea> </textarea> 태그를 이용하는데 그 형식은 [표 3.2.4]와 같다. 이 태그를 이용하면 메모장과 같이 여러 줄에 걸쳐 텍스트를 입력할 수 있는 웹폼을 만들 수 있다.

다음은 텍스트에어리어 입력 요소의 예이다. text 요소, reset, submit 버튼을 함께 사용하였다.

3.2.3 숫자 입력 요소

HTML5에서는 숫자를 입력할 수 있게 두 가지 요소를 제공한다. <input type=”number” …>는 스핀버튼을 이용하여 정확한 값을 입력할 수 있는 박스를 만들어 주고, <input type=”range” …>는 슬라이드바로 대략적인 값을 입력하게 하여 준다.

– 스핀버튼

스핀버튼은 사용자에게 정확한 숫자를 입력할 수 있게 도와주는 요소로서 <input type=”number” …> 태그를 이용하고 그 양식은 [표 3.2.5]와 같다

다음은 스핀버튼 숫자입력 요소의 예이다. 텍스트 박스 우측의 위아래 화살표를 누르면서 원하는 숫자를 선택한다.

나. 슬라이드바

슬라이드바는 사용자에게 대략적으로 숫자를 입력할 수 있게 도와주는 요소로서 <input type=”range” …> 태그를 이용하고 그 양식은 [표 3.2.6]과 같다. 속성은 스핀버튼과 동일하다.

다음은 슬라이드바 숫자입력 요소의 예이다. 슬라이드바를 움직이면서 0에서 10사이의 값을 대략 선택한다. 현재 슬라이드바 위치에서 SUBMIT 버튼을 클릭하면(아래 우측 상단) 서버에 있는 PHP로 처리된 결과가 나타난다(아래 우측 하단).

3.2.4 선택형 입력 요소

선택형 입력 요소에는 사용자에게 여러 개의 선택할 수 있는 항목들을 모두 나열한 후 그 중 하나만 선택할 수 있게 해 주는 라디오 버튼(radio button), 하나 또는 그 이상의 항목을 선택할 수 있게 해 주는 체크박스(check box), 박스에 항목들을 보이게 한 후 하나를 선택하게 하는 콤보 박스(combo box) 등이 있다.

가. 라디오 버튼

사용자에게 선택할 수 있는 항목들을 모두 나열한 후 그 중 하나만 선택할 수 있게 해 주는 라디오 버튼에 사용되는 태그는 <input type=”radio” … > 이고 그 양식은 [표 3.2.7]과 같다.

다음은 라디오 버튼 입력 요소의 예이다.

다음은 이미지를 이용하여 라디오 버튼을 만든 예이다.

나. 체크박스

사용자에게 선택할 수 있는 항목들을 모두 나열한 후 그 중 하나 또는 그 이상의 항목을 선택할 수 있게 해 주는 체크박스에 사용되는 태그는 <input type=”checkbox” … > 이고 그 형식은 [표 3.2.8]과 같다.

다음은 체크박스 입력 요소의 예이다.

다. 콤보박스

콤보박스(combo box)는 드롭다운 방식으로 항목을 나열하고 그 중 하나를 선택할 수 있도록 하는 웹폼 요소로 <select> 태그를 이용한다. 콤보박스는 한 박스 옆의 화살표를 누를 경우 항목이 나열되며 선택된 항목이 박스에 표시된다.

htm은 콤보박스의 예이다.

3.2.5 색 입력 요소

HTML5는 색을 선택할 수 있는 대화상자를 만들어주는 태그 <input type=”color” …>를 제공하는데 그 양식은 [표 3.2.10]과 같다.

HTML과 CSS에서 색은 Red, Green, Blue의 삼원색 조합으로 표시한다. 각각의 색은 1 바이트(byte), 즉 8 비트(bit)로 표시하는데 총 가지의 색을 표시한다. 이러한 256가지의 색(0~255)은 4비트 2개(즉 1616=256)로 표시할 수도 있는데 16개의 경우의 수는 0,1,2, …9,A,B,C,D,E,F(이를 16진법이라 함)로 표시한다. 만일 Red 색이 9F로 표시되었다면 256개의 빨강색 중에서 00에서 시작하여 9F 번째 빨강색을 의미한다. 이와같이 Red, Green, Blue 색을 ‘#’기호와 6개의 16진법 수로 표시하는 것을 RGB 형식의 색값이라 한다(HEX 코드). 예를 들어 #FF0000는 빨강색, #00FF00는 초록색, #0000FF는 파랑색을 의미한다. 자주 사용하는 색의 경우는 RGB 형식 대신에 red, green, blue 와 같은 고유색이름을 부여한다.

여러 가지 색의 이름과 HEX 코드가 [표 3.2.11]에 정리되어 있다.

다음은 색 입력 폼 요소의 예이다. 우측 상단의 박스를 클릭하면 색을 선택하는 대화상자가 나타나는데, 여기서 원하는 색을 클릭하면 박스가 그 색으로 변하게 된다.

3.2.6 날짜/시간 입력 요소

HTML5에서는 <input type=“month/week/date/time/datetim-local”> 태그로 날짜와 시간을 쉽게 입력받을 수 있는 폼 요소를 제공한다.

다음 HTML 문서는 날짜와 시간을 입력받는 폼 요소의 예이다. 사용자는 입력 박스 우측에 마우스를 위치하면 나타나는 스핀버튼()이나 드롭다운버튼(▼)을 클릭하여 나타나는 달력에서 날짜와 시간을 조절한다.

3.2.7 email주소/URL/전화번호/검색어 입력 요소

HTML5에서는 email 주소나, URL, 전화번호 등과 같이 특정한 형식으로 되어있는 텍스트가 맞게 입력되었는지 검사하는 폼 요소를 제공한다.

<input type=”email”> 은 email 주소만 입력받는 입력 폼 요소이다. 텍스트 입력창과 모양이 같지만 submit 버튼을 클릭하면 웹서버로 데이터를 전송하기 전에 email주소 형식 검사가 실행되어 입력된 텍스트가 email 주소 형식에 맞지 않으면 오류메시지를 보여주고 전송하지 않는다.

<input type=”url”> 은 웹주소만 입력받는 입력 폼 요소이다. 텍스트 입력창과 모양이 같지만 submit 버튼을 클릭하면 웹서버로 데이터를 전송하기 전에 웹주소 형식 검사가 실행되어 입력된 텍스트가 웹주소 형식에 맞지 않으면 오류메시지를 보여주고 전송하지 않는다.

<input type=”tel”> 은 전화번호만 입력받는 입력 폼 요소이다. 전화번호 형식이 다양하여 오류 검사를 하지는 않는다. 다만 placeholder 속성에 미리 전화번호 형식을 지정할 수 있다.

<input type=”search”> 는 검색어를 입력받는 입력 폼 요소이다. 텍스트 입력창과 모양이 같지만 오른쪽 끝에  표시되어 이것을 클릭하면 입력이 취소된다.

3.3 기타 웹폼 요소

3.3.1 레이블 요소

앞 절에서 살펴본 여러 가지 입력창 앞에는 대개 창을 설명하는 문자를 앞에 삽입하였다. 예를 들어 다음과 같은 이름을 입력하는 텍스트창 앞에 ‘성명’이라는 글자를 넣었는데 이것을 레이블이라 부른다.

대부분의 폼요소는 레이블을 삽입하지만 이것이 레이블임을 명시하지는 않는다. <label> 태그는 다음과 같이 레이블과 폼요소를 한 단위로 묶어 사용할 때 필요한 태그이다.

<label>

성명 : <input type=”text” name=”MyName” value=”이름 입력”> <p>

</label>

레이블과 폼요소를 묶는 다른 방법은 레이블을 <label> 태그로 둘러싸고 id를 준 후 <input> 태그에서 이 id를 이용하는 것이다.

<label for=”MyName”>

성명 :

</label>

<input type=”text” id=”MyName” value=”이름 입력”> <p>

<label> 태그는 라디오 버튼이나 체크박스와 같이 사용하면 매우 효과적이다. 예를 들어 앞에서 살펴본 라디오 버튼 예제에서 각 <input type=”radio” …> 태그를 다음과 같이 <label> 태그로 둘러싸서 실행시켜 보면 결과가 동일하다. 하지만 여기서는 각 언어 앞의  뿐만 아니라 <label>로 둘러싼 문자를 선택해도 해당 언어가 선택되어 편리하다.

3.3.2 폼 요소들의 그룹화 <fieldset>

HTML5에서는 여러 개의 폼 요소들을 <fieldset> 태그를 이용하여 그룹으로 묶을 수 있다. 폼 요소 그룹의 제목은 <legend> 태그를 이용한다. 그룹화된 폼 요소들은 웹브라우저가 외곽선 박스와 제목을 표시하게 된다.

다음은 텍스트 입력 요소를 <fieldset> 태그로 그룹화 한 예이다.