[HTML] 사용자 입력 받기 - <form>, <label>, <input>

사용자 입력 받기 - <form>

<form> 태그는 HTML에서 사용자 입력을 받는 양식을 생성하는 데 사용된다. 다양한 입력 필드, 버튼, 그리고 전송 방식을 제공한다. 주요 attribute를 알아보자.

<form> 태그의 주요 Attribute

1. action : 양식을 제출할 때 데이터가 전송될 URL을 지정한다.
   • /submit_form.php, https://example.com/process_form.php
2. method : 데이터를 서버로 전송할 때 사용할 HTTP 메서드를 지정한다.
   • GET, POST
3. target : 데이터가 전송된 후 응답이 표시될 위치를 지정한다.
   
   • _self : 현재 창에서 응답 표시(기본 값)
   • _blank : 새 창에서 응답 표시
   • _parent : 부모 프레임에서 응답 표시
   • _top : 최상위 창에서 응답 표시
   • 프레임의 이름 : 특정 프레임에서 응답 표시
4. enctype : 데이터를 인코딩하는 방법을 지정한다.
   • application/x-www-form-urlencoded, multipart/form-data, text/plain
5. autocomplete : 양식의 자동완성 기능을 사용할지 여부를 지정한다.
   • on, off

---

<label> 태그와 Attribute

<label> 태그는 HTML에서 폼 요소의 레이블을 정의하는 데 사용된다. 

레이블은 사용자에게 해당 입력 필드가 무엇을 나타내는지 설명하는 텍스트이다. 웹 접근성을 향상시키고 사용자에게 편리함을 제공하는 중요한 기능이다.

 

주로 for 속성을 사용하여 레이블과 연결된 입력 필드를 지정하는 데 많이 사용된다.

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">

이렇게 input 태그의 id 속성값을 지정하여 어떤 입력 필드를 위한 레이블인지 지정하는 것이다.

혹은 for 태그를 사용하지 않고, input 태그를 감싸서 사용하기도 한다.

<label>사용자 이름: <input type="text" name="username"></label>

---

<input> 태그

<input> 태그는 다양한 형식의 사용자 입력을 받기 위한 태그이다. type 속성을 통해 어떤 형태로 입력을 받을지 결정한다.

<input> 태그의 주요 Attribute

1. type
   • text : 텍스트 입력란
   • password : 비밀번호 입력란
   • checkbox : 체크 박스
   • radio : 라디오 버튼
   • submit : 제출 버튼
   • button : 버튼
   • file : 파일 업로드 필드 등
2. name : 폼을 제출할 때 사용되는 이름이다.
3. id : 입력 필드의 id값을 지정하낟. JS 등에서 조작할 때 사용한다.
4. value : 입력 필드의 초기값을 지정한다.
   • 텍스트 입력, 비밀번호 입력, 체크 박스, 라디오 버튼 등에서 사용된다.
5. required : 필수 입력 필드로 지정한다.
6. disabled : 입력 필드를 비활성화한다.
7. readonly : 입력 필드를 읽기 전용으로 만든다.
8. maxlength & minlength : 입력 필드에 입력할 수 있는 최대/최소 길이를 지정한다.
9. pattern : 입력 필드에 입력할 수 있는 유효한 값의 정규식 패턴을 지정한다.
10. checked : 체크 박스, 라디오 버튼이 기본적으로 선택되어 있는지 여부를 정한다.
11. multiple : 파일 업로드 필드에서 여러 파일 선택을 허용할지 여부를 정한다.
12. accept : 파일 업로드 필드에서 허용되는 파일 유형을 지정한다.
    • `image/*` : 이미지 파일, `.pdf` : pdf 파일 등

---

실제 사용 예시

<form action="/submit_form.php" method="POST">
    <label for="username">Name:</label><br>
    <input type="text" id="username" name="username" required><br><br>
    
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>
    
    <input type="submit" value="Submit">
</form>