사용자가 입력하는 여러가지 정보들을 수집할 수 있는 form과 input에 대해서 알아보자.

Form

<form> 은 기본적으로 사용자가 입력한 정보를 서버에 전송하기 위해서 사용한다.

<form action="example.html" method="POST">
  <!-- some input -->
</form>

• <form> 아래에서 배울 input element 들을 포함하는 element이다.
• action form element에 입력된 정보가 어디로 보내질 지 결정한다.
• method 입력된 정보를 어떤 형식으로 보내고 처리할 지 결정한다.(HTTP request)

Input

<input> 을 이용하여 실제로 사용자가 입력할 수 있는 field를 만들 수 있다.

<form action="example.html" method="POST">
  <input type="text" name="first-text-field" placeholder="예시입니다">
</form>  

1. input type

<input> element에는 속성으로 type 이 올 수 있는데 이를 이용해서 여러가지 입력 field를 만들 수 있다.

text

작성법👍

<form action="example.html" method="POST">
  <input type="text" name="text-example" placeholder="예시입니다">
</form>  

• type 은 input의 입력 유형을 결정할 때 사용한다.
• name 속성을 입력하지 않으면 입력된 정보가 서버로 전송되지 못한다. 그렇기 때문에 꼭 작성해서 서버가 어떤 정보가 넘어왔는지 식별할 수 있도록 해야한다.
• placeholder 아무것도 입력하지 않았을 때 기본적으로 사용자에게 보여주고자 하는 내용이 있는 경우에 입력한다.

결과값👌

password

작성법👍

<form action="example.html" method="POST">
  <input type="password" name="password-example" placeholder="입력해보세요">
</form>

password 속성을 사용하면 입력되는 문자가 가려지는 field를 만들어준다.

결과값👌

number

작성법👍

<form action="example.html" method="POST">
  <input type="number" name="number-example" max="10000" min="3">
</form>

number 속성을 사용하면 숫자만 입력할 수 있는 field를 생성할 수 있다.
max 최대로 입력할 수 있는 숫자를 지정할 수 있다.
min 최소로 입력할 수 있는 숫자를 지정할 수 있다.

결과값👌

checkbox

작성법👍

<form action="example.html" method="POST">
  <p>What is your hobby?</p>
  <input type="checkbox" name="hobby" id="soccer" value="soccer">
  <label for="soccer">Soccer</label>
  <input type="checkbox" name="hobby" id="tennis" value="tennis">
  <label for="tennis">Tennis</label>
</form>

• checkbox 를 사용하면 한 개의 체크박스를 만들 수 있다. 다중선택 시에 사용할 수 있다.
• <label> 체크박스만 있는 경우에는 사용자가 어떤 정보를 입력해야 하는지 알 수 없기 때문에 label element를 함께 사용해서 사용자가 파악할 수 있도록 해야한다. 이 때, for 속성을 사용해서 어떤 id를 가진 input element와 연결되어 있는지 알려줘야 한다.

결과값👌

What is your hobby?

Soccer Tennis

radio

작성법👍

<form action="example.html" method="POST">
  <input type="radio" name="gender" id="man" value="man">
  <label for="man">Man</label>
  <input type="radio" name="gender" id="woman" value="woman">
  <label for="woman">Woman</label>
</form>

• radio 속성은 여러 개의 선택 지 중에서 한 개를 선택하도록 하고 싶을 때 사용한다.

결과값👌

Man Woman

2. select & datalist

selsect

작성법👍

<form action="example.html" method="POST">
  <label for="lunch">What would you like for lunch?</label>
  <select name="lunch" id="lunch">
    <option value="pizza">Pizza</option>
    <option value="chicken">Chicken</option>
    <option value="pasta">Pasta</option>
  </select>
</form>

• name 속성은 <select> element에 사용하고, <option> element에는 value 속성을 사용하여 준다.
• name=value의 형태로 서버로 전송되어 사용자가 선택한 값을 서버가 인식할 수 있도록 한다.

결과값👌

What would you like for lunch? Pizza Chicken Pasta

datalist

작성법👍

<form action="example.html" method="POST">
  <label for="lunch">What would you like for lunch?</label>
  <input type="text" id="lunch" list="menu" name="lunch">
  <datalist id="menu">
    <option value="pizza"></option>
    <option value="chicken"></option>
    <option value="pasta"></option>
  </datalist>
</form>

• <select> element와 크게 구별되는 것은 <input> element를 함께 사용한다는 것이다. 이를 통해 사용자가 직접 field에 입력한 값을 사용할 수도 있으며 많은 선택지가 있는 경우에 검색처럼 사용할 수도 있다.
• list 속성을 사용해서 <datalist> element와 <input> element를 연결해 준다.

결과값👌

What would you like for lunch?

3. textarea

<textarea> 를 사용하여 한 줄이 아닌 여러 줄을 사용하는 field를 만들 수 있다.

작성법👍

<form action="example.html" method="POST">
  <textarea name="paragraph" rows="30" cols="40"></textarea>
</form>

• rows field의 row의 수를 정할 수 있다.
• cols field의 column의 수를 정할 수 있다.

Form Validation

기본적으로 사용자가 정보를 입력했을 때 server-side validation이 작용하기는 하지만 잘못된 정보를 계속 입력하지 않을 수 있도록, 그리고 잘못된 정보를 입력했을 경우에 서버에 전송을 하지 않고 빠른 피드백을 주기 위해서 client-side validation을 하는 것이 중요하다. validation과 관련된 몇가지 속성들은 다음과 같다.

• required 이를 사용할 경우에 필수적으로 입력하여야 한다. 만약, 입력 없이 제출을 한 경우에는 입력을 해달라는 메세지를 보여준다.
• min & max 사용자가 입력할 수 있는 최대와 최소의 수를 지정할 수 있다.
• maxlength & minlength 사용자가 입력할 수 있는 최대와 최소의 글자 수를 지정할 수 있다. 최소한의 글자를 입력하지 않았을 경우에는 해당 숫자 이상의 글자를 입력해달라는 메세지를 보여주고 최대를 초과한 글자를 입력하는 경우에는 입력을 제한한다.
• pattern 을 사용하면 특정 패턴에 맞는 지를 검사할 수 있다.

<!-- example -->
<form action="/example.html" method="POST">
  <label for="payment">Credit Card Number (no spaces):     </label>
  <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
  <input type="submit" value="Submit">
</form>