HTML의 폼은 사용자의 정보를 서버로 전송하는 기능을 제공하는 HTML 요소입니다.
폼은 <form> 태그로 정의되며, 내부에에 다양한 입력 요소(input elements)를 포함할 수 있습니다.
예를 들어, 텍스트 상자, 라디오 버튼, 체크박스, 셀렉트 드롭다운 등이 있습니다.
사용자가 폼에서 입력한 데이터는 <input> 태그의 name 속성으로 지정된 이름과 함께 전송됩니다.
폼의 전송 방식(GET 또는 POST)은 <form> 태그의 method 속성으로 지정할 수 있습니다.
결과적으로, 사용자가 폼에서 입력한 데이터는 웹 서버에서 처리할 수 있는 형태로 전송됩니다.
# 폼(Form) tag
<form> 태그는 HTML의 폼을 정의하는 주요 요소입니다.
폼 안에는 사용자의 입력을 수집할 수 있는 여러 가지 입력 요소(input elements)를 포함할 수 있습니다.
<form> 태그에서 사용자의 입력 데이터를 전송하기 위해서는, 태그의 action 속성에 전송할 URL을 지정하고, method 속성에 GET 또는 POST 방식을 지정해야 합니다.
<form> 태그에서 데이터를 전송하기 전에 검증할 수 있는 유효성 검사(Validation) 기능도 제공됩니다.
이 기능은 HTML5에서 required 속성과 같은 속성을 사용하여 적용할 수 있습니다.
다음은 간단한 폼의 예입니다.
<form action="https://www.example.com/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
# input tag
<input> 태그는 HTML의 폼에서 사용자의 입력을 수집하는 가장 기본적인 요소입니다.
<input> 태그는 각각 다른 type 속성 값에 따라 다른 입력 유형을 제공할 수 있습니다.
예를 들어, type 속성 값이 text인 경우 텍스트 입력 상자를 제공합니다.
type 속성 값이 password인 경우, 비밀번호 입력 상자를 제공합니다.
type 속성 값이 radio인 경우, 라디오 버튼을 제공합니다.
또한, <input> 태그는 name 속성을 통해 입력 데이터를 식별하는데 사용되는 이름을 지정할 수 있습니다.
입력 데이터는 폼의 method 속성에서 지정한 방식(GET 또는 POST)으로 전송될 때 사용되는 이름과 값의 쌍으로 전송됩니다.
다음은 간단한 텍스트 입력 상자의 예입니다.
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
# textarea tag
<textarea> 태그는 HTML의 폼에서 많은 텍스트 입력을 요구하는 경우 사용되는 요소입니다.
이 태그는 가로와 세로로 확장될 수 있는 텍스트 입력 상자를 제공하며, 복수의 줄에 걸친 텍스트를 입력할 수 있습니다.
<textarea> 태그의 name 속성을 통해 입력 데이터를 식별하는데 사용되는 이름을 지정할 수 있습니다.
입력 데이터는 폼의 method 속성에서 지정한 방식(GET 또는 POST)으로 전송될 때 사용되는 이름과 값의 쌍으로 전송됩니다.
다음은 간단한 <textarea> 태그의 예입니다.
<label for="message">Message:</label>
<textarea id="message" name="message" rows="10" cols="30"></textarea>
# input type: radio
<input type="radio"> 태그는 HTML의 폼에서 단일 선택을 요구하는 경우 사용되는 요소입니다.
각 <input type="radio"> 태그는 단일 선택 항목의 옵션을 표시합니다.
사용자는 한 개의 옵션만 선택할 수 있으며, 이미 선택된 옵션을 다른 옵션으로 변경할 수 있습니다.
<input type="radio"> 태그에는 name 속성이 필수적으로 포함되어야 합니다.
name 속성은 라디오 버튼의 그룹을 식별하는데 사용되는 이름을 지정합니다.
같은 name 속성을 가진 라디오 버튼은 같은 그룹으로 간주되어 단일 선택이 가능한 옵션으로 구성됩니다.
다음은 간단한 <input type="radio"> 태그의 예입니다.
<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>
<input type="radio" id="option3" name="options" value="option3">
<label for="option3">Option 3</label>
# input type: checkbox
<input type="checkbox"> 태그는 HTML의 폼에서 여러 개의 선택을 요구하는 경우 사용되는 요소입니다.
각 <input type="checkbox"> 태그는 여러 개의 선택 항목의 옵션을 표시합니다.
사용자는 여러 개의 옵션을 선택할 수 있습니다.
<input type="checkbox"> 태그에는 name 속성이 필요하지 않습니다.
name 속성은 같은 이름을 가진 체크박스를 그룹으로 묶는데 사용되는데, 체크박스는 개별적으로 처리되기 때문에 그룹화가 필요하지 않습니다.
다음은 간단한 <input type="checkbox"> 태그의 예입니다.
<input type="checkbox" id="interest1" value="interest1">
<label for="interest1">Interest 1</label>
<input type="checkbox" id="interest2" value="interest2">
<label for="interest2">Interest 2</label>
<input type="checkbox" id="interest3" value="interest3">
<label for="interest3">Interest 3</label>
# 드롭다운 리스트 (Select tag)
<select> 태그는 HTML의 폼에서 드롭다운 리스트를 생성하는데 사용됩니다. 드롭다운 리스트는 사용자가 하나의 선택을 할 수 있는 제약된 목록의 옵션을 표시합니다.
<select> 태그 안에는 <option> 태그를 사용하여 각 옵션을 정의합니다.
value 속성은 각 옵션의 값을 정의하며, **`selected`** 속성은 기본적으로 선택된 옵션을 정의합니다.
다음은 간단한 <select> 태그의 예입니다.
<select name="favorite_color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>드롭다운 리스트를 생성하면, 사용자는 해당 리스트에서 하나의 옵션을 선택할 수 있게 됩니다.
# 제출(submit) button
<input type="submit"> 태그는 HTML의 폼에서 submit 버튼을 생성하는데 사용됩니다.
submit 버튼은 사용자가 폼에 입력한 데이터를 제출하기 위해 사용됩니다.
다음은 간단한 <input type="submit"> 태그의 예입니다.
<form>
<!-- form elements -->
<input type="submit" value="Submit">
</form>
value 속성은 submit 버튼에 표시되는 텍스트를 정의합니다.
사용자가 submit 버튼을 클릭하면, 폼의 데이터가 서버로 전송되어 처리됩니다.