HTML5 웹 폼(web form) 구성하기

웹 페이지 내에서 사용자의 입력을 받기 위한 구성요소를 웹 폼(Web form)이라고 한다.
예를 들면, 우리가 평소에 사용하는 검색창 혹은 로그인 창과 같은 형태가 모두 웹 폼이다.

 

HTML에서 웹폼을 구성하기위해선 <form> </form> 태그를 사용한다. 폼 태그 사이에는 웹 폼을 구성하기 위한 다양한 태그들이 들어갈 수 있는 데, 폼 요소(form element)라고 부른다.

 

---

<폼 태그 속성>

먼저 <form> 태그에 지정할 수 있는 속성들을 살펴보자.

속성(Attribute)	설명(Description)
accept-charset	제출 된 폼에 사용 된 문자 세트를 지정합니다 (default: the page charset).
action	폼을 제출할 주소 (URL)를 지정합니다. (default: the submitting page).
autocomplete	브라우저가 양식을 자동 완성해야하는지 여부를 알려줍니다 (default : on).
enctype	데이터를 서버로 전송할 때 암호화 방식을 지정 (default: is url-encoded).
method	양식을 제출할때 사용할 전송 방식을 설정 (default: GET).
name	폼 이름을 지정.
novalidate	브라우저가 양식의 유효성을 검사하지 않도록 지정합니다.
target	데이터를 출력할 윈도우 이름 (default: _self).

 

---

<폼 요소(Form element) 종류>

<form> 태그 안에 들어갈 수 있는 폼 요소(Form element)에는
HTML5에서 새로 추가된 <datalist>와 <output>을 포함하여 다음과 같다.

• <input> : type을 지정하여 다양한 입력을 받을 수 있음
• <select> : 드롭다운 목록이 있는 콤보박스
• <textarea> : 텍스트 입력 창
• <button> : 버튼
• <datalist> : 옵션 목록을 지정할 수 있는 텍스트 창
• <output> : 스크립트 수행 결과

---

<input> 태그는 type 속성을 지정하여 다음과 같은 다양한 폼 요소를 만들수 있다.

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

---

<form 예제>

다음은 폼 태그와 폼 요소들을 이용한 몇 가지 예제를 보여준다.

 

1. <input> 태그

코드 :

<form>
<label>
color : <input type="color">
</label>
</form>

color :

<label>은 캡션을 지정해주는 태그이다. 설명

---

2. <select> 태그

코드 : 

<form>
<select name="Language">
  <option value="1">C++</option>
  <option value="2">Java</option>
  <option value="3">Python</option>
  <option value="4">Kotlin</option>
</select>
</form>

C++ Java Python Kotlin

추가로 submit 버튼 등을 통해 웹 서버로 값(value)를 전송할 수 있다.

---

3. <button> 태그

코드:

<form>
<button type="button" onclick="alert('Hello World!')">클릭</button>
<button type="reset"">초기화</button>
<button type="submit"">제출</button>
</form>

버튼 태그의 type 속성을 통하여 단순버튼, 리셋, 제출 등의 기능을 만들 수 있다.

---

4. <datalist> 태그

코드:

<form>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<option> 태그를 이용하여 선택지를 만들 수 있다.
브라우저에 따라 datalist 태그를 지원하지 않는 경우도 있다.

---

<폼 요소 그룹 만들기>

폼 안에 여러개의 폼 요소들이 들어갈 경우에 이들을 그룹을 지어주고 싶다면, <fieldset> </fieldset> 태그를 사용해주면 된다. 추가로 <legend> </legend> 태그로 그룹에 캡션 지정해줄 수 있다.

 

 

<폼 요소에 캡션 만들기>

우리가 로그인 화면을 생각해보면 아래 텍스트 입력 공간 옆에 어떤 정보를 입력해야 하는지를 알려주는 캡션이 있다.

ID:

이와 같은 캡션은 아래와 같이 <label> 태그를 이용하여 작성할 수 있다.

<form>
 <label>
 ID : <input type="text">
 </label>
</form>

---

참고 : https://www.w3schools.com/html/html_forms.asp