[HTML] Form

🌼 폼

폼(Form)은 사용자로부터 정보를 수집할 때 사용하는 강력한 도구이며 태그 내부에 text field, checkbox, radio button 등의 여러 요소들을 포함할 수 있다.

• action: 폼 태그로부터 제출된 값들을 처리하는 URL을 정의할 때 사용하는 attribute이다.

• method: 폼 태그가 제출될 때 사용하는 http method를 정의할 때 사용하는 attribute이다.

• enctype: encode type을 의미하며 폼 태그가 제출될 때 사용되는 encoding type을 정의할 때 사용하는 attribute이다.

🌼 폼 관련 요소

• <label>: input 속성을 정의할 때 사용한다. label <-> input 태그 사이의 상호작용을 위해서는 label에는 for 속성을 할당하고 input에는 id 속성을 할당해야한다.

• <input>: 정보를 수집할 때 입력창을 만들때 사용한다.

  • name: 사용자가 입력한 정보를 서버로 전달할 때 정보의 이름 정의 목적으로 사용한다.

  • type: 사용자가 입력한 정보의 유형을 정의할 때 사용한다.

    • submit: 사용자가 입력한 정보를 서버로 전송할 때 사용한다. value attribute를 추가로 정의하면 <input> 태그를 버튼 형태로 사용할 수 있다.

    • password: 사용자의 입력값을 비밀번호 형태로 정의할 때 사용한다.

    • number: 사용자의 입력값을 숫자 형태로 정의할 때 사용한다.

    • range: 사용자의 입력값을 제한된 숫자 형태로 정의할 때 사용한다.

  input type을 range로 설정하고 1)min/max attribute를 정의하면 해당 조건을 기준으로 사용자가 입력할 입력값을 범위를 제한할 수 있다. 2)step attribute를 정의하면 사용자가 입력하는 숫자의 증/감이 설정된 숫자 기준으로 적용된다.

<form>
  <h1>Login to start creating a burger!</h1>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <br>
  <label for="user-pw">Password:</label>
  <input type="password" name="user-pw" id="user-pw"></input>
  <br>
  <label for="amount">How many patties would you like?</label>
  <input type="number" name="amount" id="amount" step="1">
  <input type="submit" value="Send">
</form>

---

• <radio>: 사용자가 동일/비동의와 같은 단일 값을 선택해야 하는 경우에 사용한다.

<form>
  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>
</form>

• <checkbox>: 사용자가 2개 이상의 값을 선택해야 하는 경우에 사용한다.

  • value: 사용자가 정보를 입력하기 전에 입력이 필요한 정보의 미리보기 기능을 제공할 때 사용하는 attribute이다. 다만 <checkbox>의 경우, value 정보가 보이지 않기 때문에 label 기능으로 기본값을 정의해줘야 한다.

<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

---

• <select>: 드랍다운 형태의 리스트를 생성할 때 사용한다. <option> 태그와 함께 사용하여 리스트를 구성한다.

<form>
  <label for="lunch">What's for lunch?</label>
  <select id="lunch" name="lunch">
    <option value="pizza">Pizza</option>
    <option value="curry">Curry</option>
    <option value="salad">Salad</option>
    <option value="ramen">Ramen</option>
    <option value="tacos">Tacos</option>
  </select>
</form>

• <datalist>: 드랍다운 리스트의 항목이 너무 많을 경우, 사용자의 편의를 위해 직접 입력하여 정보를 선택할 수 있도록 하기위한 목적으로 사용할 수 있다. <option> 태그와 함께 사용하면 드랍다운 리스트와 직접 입력 형태 총 2가지의 옵션을 사용자에게 제공할 수 있다.

<form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">
  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

---

• <textarea>: 사용자가 지정한 행, 열의 크기로 입력창을 생성할 때 사용한다. <input> 태그는 입력 공간이 한 줄이지만 <textarea>는 여러 줄이 될 수 있다는 점에서 차이가 있다.

<form>
  <label for="blog">New Blog Post: </label>
  <br>
  <textarea id="blog" name="blog" rows="5" cols="30">
  </textarea>
</form>

🌼 Form Validataion

• required: input 속성의 attribute로 필수로 입력되야 하는 정보가 입력되지 않았을 경우, 경고문을 띄우는 용도로 사용할 수 있다.

• min, max: <input type="number">일 때 사용할 수 있는 attribute로 입력값의 범위를 제한할 때 사용한다.

<form action="/example.html" method="POST">
  <label for="guests">Enter # of guests:</label>
  <input id="guests" name="guests" type="number" required min="1" max="4">
  <input type="submit" value="Submit">
</form>

• minlength, maxlength: <input type="text">일 때 사용할 수 있는 attribute로 글자수를 제한할 때 사용한다.

<form action="/example.html" method="POST">
  <label for="summary">Summarize your feelings in less than 250 characters</label>
  <input id="summary" name="summary" type="text" required minlength="5" maxlength="250">
  <input type="submit" value="Submit">
</form>

• pattern: 사용자가 입력하는 정보가 일정한 pattern(신용카드 번호, 전화번호)을 가진 형태일 때 사용할 수 있는 attributed이다.

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