웹 폼 디자인과 유효성 검사를 위한 HTML 작성법

 

폼(Form)이란?

폼은 웹사이트나 웹 애플리케이션에서 사용자로부터 정보를 수집하는 데 사용되는 요소입니다. 폼은 사용자와 상호작용할 수 있는 다양한 입력 필드, 버튼 및 선택 옵션 등을 포함할 수 있습니다. 이러한 폼을 제공하는 것은 사용자 경험을 개선하고 유효성 검사를 통해 올바른 데이터를 수집하는 데 도움이 됩니다. 

 

 

주요 폼 태그

<form> 태그

• 폼의 시작을 나타내는 태그로, 모든 입력 요소는 이 태그 안에 위치해야 합니다.
• action 속성을 사용하여 폼 데이터를 서버로 전송할 URL을 지정할 수 있습니다.
• method 속성을 사용하여 폼 데이터를 전송하는 HTTP 메소드를 지정할 수 있습니다.
  일반적으로는 "GET" 또는 "POST"를 사용합니다.

<!-- Form which will send a GET request to the current URL -->
<form>
  <label
    >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label
    >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio" /> Select me</label>
  </fieldset>
</form>

 

<input> 태그

• 사용자로부터 데이터를 입력받는 가장 기본적인 입력 요소입니다.
• type 속성을 사용하여 입력 필드의 종류를 지정할 수 있습니다. 예를 들어, "text", "password", "email" 등이 있습니다.
• name 속성을 사용하여 입력 필드의 이름을 지정하고, 이는 폼 데이터를 서버로 전송할 때 사용됩니다.

Input Type 종류

button

checkbox

color

date

datetime-local

email

file

hidden

image

month

number

password

radio

range

reset

search

submit

tel

text

time

url

week

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />

 

 

<select> 태그

• 사용자가 목록에서 선택할 수 있는 드롭다운 메뉴를 생성합니다.
• <option> 태그를 사용하여 목록의 각 항목을 지정할 수 있습니다.
• multiple 속성을 사용하여 다중 선택이 가능한 드롭다운 메뉴를 만들 수도 있습니다.

<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

 

 

<textarea> 태그

• 여러 줄의 텍스트 입력을 받을 수 있는 입력 필드를 생성합니다.
• rows와 cols 속성을 사용하여 텍스트 영역의 크기를 조정할 수 있습니다.

<label for="story">Tell us your story:</label>
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

 

<button> 태그

• 사용자가 클릭하여 특정 동작을 수행하도록 하는 버튼을 생성합니다.
• type 속성을 사용하여 버튼의 타입을 지정할 수 있습니다. 예를 들어, "submit", "reset", "button" 등이 있습니다.

<button class="favorite styled" type="button">Add to favorites</button>

 

 

폼 유효성 검사

폼 유효성 검사는 사용자가 잘못된 데이터를 입력하지 않도록 유도하며, 사용자에게 정상적인 값을 받기 위하여 수행합니다. HTML에서 입력 필드에 대한 유효성 검사를 위한 "required", "maxlength", "pattern" 등의 속성을 제공하며, Javascript를 통해 더 복잡한 유효성 검사를 구현할 수 있습니다.

 

required

• 사용자가 입력 값을 지정해야 함을 나타냅니다.

<form>
  <div class="group">
    <input type="text" />
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required />
    <label>Required</label>
  </div>
  <input type="submit" />
</form>

 

maxlength

• 사용자가 입력할 수 있는 최대 문자열 길이를 정의합니다.

<label for="name">Product name:</label>
<input name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />

<label for="description">Product description:</label>
<textarea name="description" minlength="10" maxlength="40" required></textarea>

 

minlength

• maxlength와 유사하게 사용자가 입력할 수 있는 최소 문자열 길이를 정의합니다.

<label for="name">Product name:</label>
<input name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />

<label for="description">Product description:</label>
<textarea name="description" minlength="10" maxlength="40" required></textarea>

 

pattern

• 사용자가 입력할 수 있는 정규식을 지정합니다.

<label for="username">Username: (3-16 characters)</label>
<input name="username" type="text" value="Sasha" pattern="\w{3,16}" required />

<label for="pin">PIN: (4 digits)</label>
<input name="pin" type="password" pattern="\d{4,4}" required />

 

 

마치며

여기서는 각 태그의 기본 사용 방법과 몇 가지 속성에 대해 설명했지만, 태그와 속성은 더 다양하며, 실제로 사용하는 환경에 따라 다를 수 있습니다. 다양한 폼 태그와 유효성 검사를 활용하면 사용자에게 올바른 값을 입력할 수 있도록 유도할 수 있습니다.