HTML 폼은 사용자 입력을 수집하는 데 사용된다. 사용자 입력은 처리를 위해 서버로 가장 자주 전송된다.
HTML <form> 요소
HTML <form> 요소는 사용자 입력을 위한 HTML 양식을 만드는 데 사용된다:
| <form> . form elements . </form> |
<form> 요소는 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소를 위한 컨테이너이다.
HTML <input> 요소
HTML <input> 요소는 가장 많이 사용되는 양식 요소이다.
<input> 요소는 유형 속성에 따라 다양한 방식으로 표시될 수 있다.
다음은 몇 가지 예이다:
| 유형 | 설명 |
| <input type="text"> | 단일라인 텍스트 입력 필드를 표시합니다. |
| <input type="radio"> | 여러 옵션 중 하나를 선택하기 위한 라디오 버튼을 표시합니다 |
| <input type="checkbox"> | 0개 이상의 선택 항목을 선택할 수 있는 확인란을 표시합니다 |
| <input type="submit"> | 제출 단추를 표시합니다(양식 제출용) |
| <input type="button"> | 클릭 가능한 단추를 표시합니다 |
HTML 텍스트 필드(Text Fields)
<input type="text">는 텍스트 입력을 위한 한 줄 입력 필드를 정의한다.
| <!DOCTYPE html> <html> <body> <h2>텍스트 입력 필드</h2> <form> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"> </form> <p>양식 자체가 보이지 않습니다.</p> <p>또한 텍스트 입력 필드의 기본 너비는 20자입니다.</p> </body> </html> |
HTML <label> 요소
위의 예에서 <label> 요소를 사용한다.
<label> 태그는 여러 폼 요소에 대한 레이블을 정의한다.
사용자가 입력 요소에 초점을 맞출 때 화면 판독기가 라벨을 크게 읽기 때문에 <라벨> 요소는 화면 판독기 사용자에게 유용하다.
또한 <label> 요소는 사용자가 <label> 요소 내의 텍스트를 클릭하면 라디오 단추/확인란을 전환하기 때문에 매우 작은 영역(예: 라디오 단추 또는 확인란)을 클릭하는 데 어려움을 겪는 사용자에게 도움이는 사용자가 <label> 요소 내의 텍스트를 클릭할 때 라디오 단추/확인란을 전환하기 때문이다.
<label> 태그의 for 특성은 이들을 함께 바인딩하려면 <input> 요소의 id 특성과 같아야 한다.
HTML <radio> 버튼
<input type="radio">는 라디오 버튼을 정의한다.
라디오 버튼을 사용하여 제한된 수의 선택 중 하나를 선택할 수 있다.
| <!DOCTYPE html> <html> <body> <h2>라디오 버튼</h2> <p>좋아하는 웹 언어를 선택하세요:</p> <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> </body> </html> |
HTML #checkbox
<input type="input">은 확인란을 정의한다.
확인란을 사용하면 제한된 수의 0 또는 더 많은 옵션을 선택할 수 있다.
| <!DOCTYPE html> <html> <body> <h2>체크박스</h2> <form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> 나는 자전거를 가지고 있다.</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> 나는 자동차를 가지고 있다.</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> 나는 보트를 가지고 있다.</label><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
제출 버튼(Submit buttons)
<input type="submit">은 폼 데이터를 폼에 제출하기 위한 버튼을 정의한다.
양식 처리기는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버의 파일이다.
양식 처리기는 양식의 작업 속성에 지정된다.
| <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> <p>"제출" 버튼을 클릭하면 양식 데이터가 "/action_page.php"라는 페이지로 전송됩니다.</p> </body> </html> |
<input>에 대한 #name 속성
각 입력 필드에는 제출할 name 속성이 있어야 한다.
form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성이다.
값을 전달하기 위한 목적을 가지고 있는 경우가 많으며 다중 설정이 가능하다. 예로 a 페이지에서 b 페이지로 이동할 경우 값을 넘겨줄 때 사용된다.
name 속성은 페이지 영역에서 중복되어 사용이 가능하다.
form의 action에 해당하는 페이지에 전달할 수 있는 인자로 사용이 가능하다.
name 속성을 생략하면 입력 필드의 값이 전혀 전송되지 않는다.
| <!DOCTYPE html> <html> <body> <h2>이름 속성</h2> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" value="길동"><br><br> <input type="submit" value="Submit"> </form> <p>"제출" 버튼을 클릭하면 양식 데이터가 "/action_page.php"라는 페이지로 전송됩니다.</p> <p>입력 요소에 이름 속성이 없기 때문에 "이름" 필드의 값은 제출되지 않습니다.</p> </body> </html> |
지금까지 HTML에서 입력에 관련된 요소를 살펴보았다.
꼭 실습하세요
모두 화이팅입니다!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML form 요소 (0) | 2023.06.07 |
|---|---|
| HTML #Form 속성 (0) | 2023.06.06 |
| HTML vs XHTML (0) | 2023.06.04 |
| HTML URL(Uniform Resource Locators) (0) | 2023.06.03 |
| HTML charset (0) | 2023.06.02 |
댓글