HTML - Forms - 1

Introduction to HTML Form

사용자에게 필요한 정보를 입력받아 처리할 수 있는 HTML 모듈을 Form이라고 한다. 일상생활에서 Form이라고 하면, 택배를 주문할 때 입력해야 하는 주소, 웹사이트의 회원가입 신청서 등을 상상하면 될 것이다.

How a Form Works

Form을 생성하기 위해서는 가장 먼저 form 태그를 작성해준다. 이에 필요한 속성들로써는 action과 method 속성이 있다.

· action 속성에서는 사용자가 form 작성을 끝나고 submit (제출)하면, 제출한 정보(회원명, 비밀번호, 주소 등)들이 전달되는 파일의 위치를 값으로 지정해준다.

· 컴퓨터가 네트워크상에서 통신하기 위해선 HTTP request가 필요하다. method 속성은 어떤 방식으로 form을 통해 얻은 데이터들이 전송될지를 정해준다.

<form action="/example.html" method="POST">
  </form>

Text Input

form 태그만 작성하고 브라우저를 실행해보면, 아무것도 나타나지 않는다. form 태그 내의 input 태그를 작성하여야 사용자에게 직접 데이터를 입력받을 수 있다. input 태그는 type이라는 속성이 있다. 말 그대로 사용자로부터 어떤 형식의 정보를 받는지를 정의해준다. 가장 간단한 형식인 문자(text)를 사용자로부터 받고자 할 경우가 있다. 예를 들어 회원의 이름, 주소 같은 경우는 모두 문자(text) 형식이다. 이럴 때 type 속성에 “text”라는 값을 넣어주면 된다.

<form action="/example.html" method="POST">
  <input type="text" name="first-text-field">
</form>

위와 같은 코드를 작성하고 브라우저를 실행시키면 아래와 같은 문자(text) 입력창이 나타난다.

input 태그의 속성은 type 외에도 name, value가 존재한다.

· name 속성은 사용자로부터 입력을 받을 변수의 이름을 정의할 수 있다. 쉽게 설명해서 변수명이라고 할 수 있다.

· value 속성 안의 값으로 text-field 안의 글씨를 사용자에게 미리 띄워줄 수 있다. 안드로이드로 치면 hint 정도가 될 것 같다.

<form action="/example.html" method="POST">
  <input type="text" name="my-first-name" value="sung-jun">
</form>

my-first-name = “sung-jun”이 example.html로 POST 방식으로 전송된다.

물론 text-input 안의 값은 사용자가 마음대로 바꿀 수 있다.

Adding a Label

input 태그를 통해 생성한 입력란이 사용자에게 무엇을 위한 입력란인지 설명해주기 위해 label 태그를 사용할 수 있다. 말 그대로 입력창에 대한 라벨을 달아주는 것이다. label 태그와 input 태그를 연결하기 위해서는 label 태그의 for 속성과 input id 속성을 일치시켜 줘야 한다.

<form action="/example.html" method="POST">
  <label for="meal">What do you want to eat?</label>
  <br>
  <input type="text" id="meal">
</form>

What do you want to eat?

Password Input

사용자가 민감한 정보를 입력란에 기재해야 할 때, 그 정보를 input에 그대로 노출하면 곤란할 수 있다. 예를 들면 비밀번호나 PIN이 있다. input 태그의 type 속성을 “password”로 설정하면 사용자의 입력이 ‘*’, 나 ‘●’ 로 대체된다.

<label for="user-password">비밀번호</label>
<input type="password" name="user-password" id="user-password"/>

비밀번호

Number Input

input 태그의 type을 “number”로 바꿔주면 사용자의 입력을 숫자로 제한할 수 있다. 수량, 인원수 같은 정보를 입력받을 때 유용하다. 또한 input 태그의 step 속성을 사용해주면 step 속성의 값만큼 증감할 수 있다. 또한, min과 max 속성을 활용해 최대, 최솟값을 지정할 수 있다.

<label for="amount">주문수량</label>
<input type="number" name="amount" id="amount" step="1" min="1" max="9"/>

주문수량

Range Input

Number Input과 비슷하게 input 태그의 type 속성을 “range”로 바꿔주면 슬라이더 형식의 입력란이 생성된다. 볼륨 조정에 사용될 수 있다. 위와 비슷하게 min, max를 통해 범위 지정을 해줄 수 있고 step 속성을 활용한 증감이 가능하다.

<label for="volume">볼륨</label>
<input type="range" name="volume" id="volume" min="1" max="5" step="1"/>

볼륨

Checkbox Input

사용자에게 다양한 옵션의 선택지를 제시하고 1개 이상의 옵션을 선택하는 입력이 필요하다면, Checkbox input이 유용할 것이다. 피자 토핑 선택, 추가 옵션 선택 지정에 유용할 것이다. input 태그의 type 속성을 “checkbox”로 설정해준다.

<h3>토핑선택</h3>
<br>

<label for="topping-cheese">치즈</label>
<input type="checkbox" name="topping" id="topping-cheese"/>

<label for="topping-pepperoni">페페로니</label>
<input type="checkbox" name="topping" id="topping-pepperoni"/>

<label for="topping-anchovy">앤쵸비</label>
<input type="checkbox" name="topping" id="topping-anchovy"/>

토핑선택

치즈

페페로니

앤쵸비

Checkbox Input은 여태까지의 input 태그와는 달리 체크박스 하나당 하나의 input 태그를 생성해 주어야 한다. input 태그의 id 속성은 label 태그를 위한 속성이다. name 속성은 구현한 3개의 체크박스를 모두 하나로 묶는 역할을 한다. 마지막으로 value 속성이 있는데 text input, number input과는 달리 Checkbox input에서 value 속성은 브라우저에 직접 나타나지 않는다. 그러면 왜 value 속성이 굳이 필요하겠냐고 생각이 들 수 있지만. Value 속성은 사용자가 체크박스를 제출(submit)할 때 꼭 필요하다. 각각의 체크박스는 value 속성의 값으로 지정되어 있으며, 체크 시 name 속성에 체크된 체크박스의 value 속성값이 들어가기 때문이다. 위의 Checkbox input을 예로 들면 사용자가 페페로니, 앤쵸비 항목에 체크를 하고 form을 제출했을 때 결과로써 전송되는 값은 다음과 같이 나타난다

topping = “topping-pepperoni”, “topping-anchovy”