[HTML] Forms

HTML form은 사용자 입력을 수집하는 데 사용됩니다. 사용자 입력은 처리를 위해 자주 서버로 전송됩니다.

<form> Element

HTML <form> element는 사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.

<form>
.
form elements
.
</form>

• <form> 요소는 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소를 위한 컨테이너입니다.

The <input> Element

• HTML <input> 요소는 가장 자주 사용되는 form 요소입니다.
• <input> 요소는 type 속성에 따라서 다양한 방식으로 표현됩니다.

Type	Description
<input type="text">	한 줄 텍스트 입력 필드를 표시합니다.
<input type="radio">	라디오 버튼을 표시합니다(많은 선택 사항 중 하나를 선택하기 위해)
<input type="checkbox">	확인란을 표시합니다(많은 선택 항목 중 0개 이상 선택)
<input type="submit">	제출 버튼 표시(양식 제출용)
<input type="button">	클릭 가능한 버튼을 표시합니다.

Text Fields

<input type="text">는 텍스트 입력을 위한 한 줄 입력 필드를 정의합니다.

# 텍스트 입력 필드가 있는 양식
<form>
	<label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname">
</form>

• form 자체는 보이지 않습니다.
• 입력 필드의 기본 너비는 20자입니다.

The <label> Element

• <label> 태그는 많은 form 요소에 대한 레이블을 정의합니다.
• <label> 요소는 사용자가 입력 요소에 초점을 맞출 대 화면 판독기가 레이블을 소리내어 읽어주기 때문에 화면 판독기 사용자에게 유용합니다.
• <label> 요소는 라디오 버튼이나 체크박스와 같은 아주 작은 영역을 클릭하는 데 어려움을 겪는 사용자에게 도움이 됩니다.
• 사용자가 <label> 요소 내의 텍스트르르 클릭하면 라디오 버튼 / 체크박스가 toggle 되기 때문입니다.
• <label> 태그의 for 속성은 함께 묶기 위해 <input> 요소의 id 속성과 같아야 합니다.

Radio Buttons

• <input type="radio">는 라디오 버튼을 정의합니다.
• 라디오 버튼은 사용자가 제한된 선택권 중 하나를 선택하게 한다.

# 라디오 버튼이 있는 양식

<p>Choose your favorite Web language:</p>

<form>
	<input type="radio" id="html" name="fav_langugae" value="HTML">
    <label for="html">HTML</label><br>
    <input type="radio" id="css" name="fav_language" value="CSS">
    <label for="css">CSS</label><br>
    <input type="radio" id="javascript" name="fav_language" value="JavaScript">
    <label for="javascript">JavaScript</label>
</form>

Checkboxes

• <input type="checkbox">는 체크박스를 정의합니다.
• Checkboxes를 통해 사용자는 제한된 수의 선택 중에서 ZERO 또는 MORE 옵션을 선택할 수 있습니다.

# 체크박스가 있는 form

<form>
	<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label><br>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> I have a boat</label>
</form>

 

The Submit Button

• <input type="submit">은 form-handler에 form-data를 제출하기 위한 버튼을 정의합니다.
• form-handler는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버의 파일입니다.
• form-handler는 form의 action 속성에 지정됩니다.

# 제출하기 버튼이 있는 form

<form action="/action_page.php">
	<label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</form>

<input> 태그의 name 속성

• 각 input filed에는 제출할 name attribute가 있어야 합니다.
• name 속성이 생략되면 입력 필드의 값이전송되지 않습니다.

# This example will not submit the value of the "First name" input field:
<form action="/action_page.php">
	<label for="fname">First name:</label><br>
    <input type="text" id="fname" value="John"><br><br>
    <input type="submit" value="Submit">
</form>

REFERENCE

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

HTML Forms