jiraynor’s 하루 2시간 프로그래밍 - HTML 35. 폼 (Form) 영상 보러가기

HTML 폼

<form> 요소

HTML <form> 요소는 사용자 입력용 HTML 폼을 작성하기 위해 사용됩니다.

<form>
.
form elements
.
</form>

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

<input> 요소

HTML <input> 요소는 가장 많이 사용되는 폼 요소입니다.

<input> 요소는 유형 속성에 따라 다양한 방법으로 표시할 수 있습니다.

다음은 몇 가지 예입니다.

타입 설명
<input type="text" /> 한 줄 텍스트 입력 필드를 표시합니다.
<input type="radio" /> 옵션 버튼을 표시합니다(다양한 옵션 중 반드시 하나를 선택하는 경우).
<input type="checkbox" /> 체크박스를 표시합니다(다양한 선택 항목 중 0개 이상을 선택하는 경우).
<input type="submit" /> 전송 버튼을 표시합니다.
<input type="button" /> 클릭 가능한 버튼을 표시합니다.

Text 필드

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

예제 1 - 텍스트 입력 필드가 있는 양식
<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>

위의 HTML 코드가 브라우저에 표시되는 방법은 다음과 같습니다.




Note: 폼 자체는 표시되지 않습니다. 입력 필드의 기본 너비는 20자입니다.

<label> 요소

위의 예에서는 <label> 요소가 사용되고 있습니다.

<label> 태그는 많은 폼 요소의 라벨을 정의합니다.

<label> 요소는 사용자가 입력 요소에 초점을 맞추면 화면 판독기가 라벨을 크게 읽기 때문에 스크린 판독기 사용자에게 유용합니다.

<label> 요소는 사용자가 <label> 요소 내의 텍스트를 클릭하면 라디오 버튼/체크박스가 전환되기 때문에 매우 작은 영역(옵션 버튼이나 체크 박스 등)을 클릭하기 어려운 사용자에게도 도움이 됩니다.

<label> 태그의 for 속성은 이들을 바인드하기 위한 <input> 요소의 id 속성과 같아야 합니다.

라디오 버튼

<input type="radio">는 옵션버튼을 정의합니다.

사용자는 라디오 버튼을 사용하여 제한된 수의 선택 항목 중 하나를 선택할 수 있습니다.

예제 2 - 옵션 버튼이 있는 폼
<form>
  <input type="radio" id="html" name="fav_language" 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>

위의 HTML 코드가 브라우저에 표시되는 방법입니다.



체크박스

<input type="checkbox"> 는 체크박스를 정의합니다.

체크박스를 사용하면 사용자가 제한된 수의 선택 항목 중 0개 혹은 여러 개를 선택할 수 있습니다.

예제 3 - 체크박스가 있는 폼
<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>

위의 HTML 코드가 브라우저에 표시되는 방법은 다음과 같습니다.



제출 버튼

<input type="submit">은 폼 데이터를 폼에 송신하기 위한 버튼을 정의합니다.

폼 핸들러는 일반적으로 입력 데이터를 처리하는 스크립트가 있는 서버상의 파일입니다.

폼 핸들러는 폼의 action 특성에 지정됩니다.

예제 4 - 제출 버튼이 있는 폼
<form action="https://www.w3schools.com/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" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

위의 HTML 코드가 브라우저에 표시되는 방법입니다.






<input>의 name 속성

각 입력 필드에는 송신하는 name 속성이 필요합니다.

name 속성을 생략하면 입력 필드 값이 전혀 전송되지 않습니다.

예제 5 - 다음 예제에서는 “name” 입력 필드의 값을 전송하지 않습니다.
<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>