STS 121::HTML 프로그래밍 기초

4. 입력 양식


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

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


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="Address" /></p>
    <p>City: <input type="text" name="City" /></p>
    <p>State: <input type="text" name="State" /></p>
    <p>zip: <input type="text" name="Zip" /></p>
  </fieldset>
</form>
실행 결과 보기

Shipping Address

name:

Address:

City:

State:

zip:


웹 입력 양식 동작 구조

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

<form> 태그

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

GET 방식

POST 방식

참고 동영상 강좌

참고 자료

퀴즈

1) <form>태그의 action에 들어가야 되는 내용은 무엇입니까?

해답보기

입력 받은 값을 저장할 페이지를 지정해줍니다.

2) get방식과 post 방식의 차이에 대해 서술하시오.

해답보기

  • get방식은 URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식입니다.
  • post 방식은 HTTP Request 헤더에 파라미터를 붙여서 전송하여 보안에 좋습니다.



02: 입력 양식 태그

실제로 사용자가 입력을 받는 부분은 여러 입력 양식 태그를 사용합니다. <input>, <select>, <textarea>, <button> 등의 태그가 있으며 대표적인 양식 태그는 <input> 입니다.

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

<input> 태그

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

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

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

<checkbox>와 태그

이들 태그는 여러 항목중에 선택을 할 수 있도록 해주는 입력 양식을 제공 합니다. checkbox 는 여러항목을 다중으로 선택할 수 있고 radio 는 하나만 선택할 수 있습니다. 여러항목들을 하나의 그룹으로 묶어야 하기 때문에 이를 위해 name 속성을 동일하게 해주어야 합니다.

<input type=“radio” name=“gender”>Male</input>
<input type=“radio” name=“gender”>Female</input>
<input type=“radio” name=“gender”>Other</input>

<input type=“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 type=“button” onclick="alert('Hello World!')">Click Me!</button>

참고 동영상 강좌

참고 자료

퀴즈

1) 텍스트 입력란을 만들어보세요.

해답보기

<form>
    <input type="text">
</form>

2) 제출 버튼을 만들기 위해 사용하는 <input>태그의 속성은 무엇입니까?

해답보기

  • submit

3) 다음 중 <input>태그의 속성이 아닌 것은 무엇입니까?

  1. type
  2. action
  3. name
  4. value
해답보기

  • [2번] - action은 <form>의 속성입니다.

03: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.


04: 참고 자료