프론트엔드 HTML 프로그래밍 기초

4. 입력 양식

이번 강좌에서는 웹에서 사용자 입력을 처리하기 위한 입력양식(form)의 종류와 사용법을 배우게 됩니다. 회원가입이나 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문시 옵션을 선택하고 주소를 입력하고 주문버튼을 누르는 등의 모든 화면들이 입력 양식에 해당 합니다.

이 강의를 통해 여러 입력양식 태그를 이해하고 원하는 양식을 디자인 할 수 있으며 입력양식과 서버의 연동 원리를 이해할 수 있게 됩니다.

Youtube 에서 동영상 강좌 보기

01: 입력 양식 개요

입력 양식은 웹에서 사용자에게 정보를 입력 받을 때 사용하는 사용자 인터페이스(UI)를 말합니다. 기본적으로 <form>태그가 사용되며 <form>태그 내부에 다양한 형식의 입력양식 태그들을 사용해 화면을 구성하게 됩니다.

다음은 쇼핑몰등에서 상품 주문시 배송지 주소를 입력하는 입력양식 예 입니다.

<form action="#" method="get">
  <fieldset>
    <legend>Shipping Address</legend> 
  <p>name: <input type="text" name="Name" /></p>
  <p>Address: <input type="text" name="Adress" /></p>
  <p>City:  <input type="text" name="City" ></p>
  <p>State: <input type="text" name="Stat" /></p>
  <p>zip: <input type="text" name="Zip" /></p>
</fieldset>
</form>
실행 결과 보기

Shipping Address

name:

Address:

City:

State:

zip:


웹 입력 양식 동작 구조

<form> 태그를 통해 작성된 입력 양식은 최종적으로 입력 데이터를 서버로 전송해야 합니다. 이때 사용되는 주요 속성은 method와 action입니다. method는 웹 서버와에 데이터를 전달하는 방법을 지정하며 get과 post 방식이 존재합니다. action은 입력 받은 값을 전송할 서버의 프로그램 URL을 지정하게 됩니다.

<form> 태그

<form action="데이터를 전송할 URL" method="전송방법">
  <input type="text"> 
  ...
</form>

GET

/action_page.php?firstname=Sarang&lastname=Hong

POST

02: 입력 양식 태그

기본적으로는 <input> 태그를 사용하며 type 속성으로 다양한 입력 양식을 정의할 수 있습니다. 그외 <select>, <textarea>, <button> 등의 태그도 사용할 수 있습니다.

Tag Description
<form> 입력양식 지정을 위한 기본 태그
<input> 여러 유형의 입력 양식을 지정
<textarea> 여러 라인에 걸친 프리 포맷 입력 양식
<label> 입력 양식과 연결되는 텍스트 라벨
<fieldset> 입력 양식들을 그룹으로 묶어주는 태그
<legend> <fieldset>의 제목을 표시
<select> 드롭다운 박스로 목록중에서 선택할 수 있는 양식
<optgroup> <select>안에서 목록을 그룹화
<option> <select> 의 선택 항목 지정
<button> 입력 버튼 생성

<input> 태그

가장 많이 사용하는 입력양식 태그이며 대부분의 입력 기능을 제공 합니다. type속성으로 입력 양식의 종류를 나타내고 name속성으로 서버에 전송될 데이터 이름을 지정 합니다. value 속성은 기본 입력값을 지정할때 사용하고 placeholder는 입력 항목에 대한 설명문을 넣을때 사용 합니다.

<input type="입력 양식 유형" name="입력값 이름" placeholder="설명">

type

필수 속성이며 사용할 수 있는 type은 다음과 같습니다.

name

입력값에 붙이는 이름으로 서버에서 참조할 수 있는 변수 형태가 됩니다. 일반적으로 입력값을 서버에서 처리할때 사용하게 되며 서버 구현에 따라 데이터베이스 테이블 구조의 엔티티 클래스를 자동으로 매핑하는 경우 엔티티 클래스의 필드 이름과 동일한 이름을 사용해야 합니다.

<input type="text" name="userid">
<input type="assword" name="pwd">

html5 에서는 이외에 특정 데이터 타입에 따라 좀 더 편하게 입력할 수 있는 type 들이 제공됩니다. 예를 들어 color는 색상선택을 위해 별도의 색상선택 박스가 나오게 되고 date 의 경우 날짜 입력을 위해 달력이 나오는 형식입니다. 이들 유형들은 브라우저에 따라 지원이 안되는 경우도 있고 모양이 다르므로 참고하기 바랍니다.

html5 input types

button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number password, radio, range, reset, search, submit, tel, text, time, url, week


<checkbox>와 <radio> 태그

이들 태그는 여러 항목중에 하나 혹은 중복 선택을 위한 UI를 제공 합니다. checkbox는 여러 항목을 다중으로 선택할 수 있고 radio는 하나만 선택할 수 있습니다. 여러 항목들을 하나의 그룹으로 묶기 위해서는 name 속성을 동일하게 해주어야 합니다.

<input type="radio" name="gender">Male</input>
<input type="radio" name="gender">Female</inut>
<input type="radio" name="gender">Other</inut>

<input tpe="checkbox" name="hobby">Swimming</input>
<input type="checkbox" name="hobby">Traveling</input>
<input type="checkbox" name="hobby">Other</input>

<select> 태그

드롭다운 목록을 제공하는 태그로 화면 공간을 절약하고 여러 항목중 하나 혹은 여러개를 선택할 수 있도록 해주는 입력양식 태그 입니다.

<select name=“cars”>
    <option value=“101”>Benz</option>
    <option value=“102”>BMW</option>
    <option value=“103”>Audi</option>
    <option value=“104”>WolksWagen</option>
</select>

<button> 태그

버튼은 입력양식에서 매우 많이 사용되는 구성요소 입니다. 다만 그냥 버튼을 생성해서는 아무런 동작을 하지 않고 별도의 이벤트 처리와 연동되어야 하므로 실제 활용은 자바스크립트 학습이 필요 합니다.

<button ype=“button” onclick="alert('Hello World!')">Click Me!</button>

참고 자료