HTML의 <form> 요소는 웹 페이지에서 사용자로부터 데이터를 입력받고 서버로 데이터를 전송하는 데 사용됩니다.
<form> 요소 속성
method
method 속성은 폼 데이터를 서버로 전송할 때 사용되는 HTTP 요청 방법을 지정합니다. 아래의 2가지 종류가 있습니다.
- GET: 폼 데이터를 URL의 쿼리 문자열에 포함시켜 서버로 전송합니다. 주로 검색 결과를 요청하거나 데이터를 가져올 때 사용됩니다. 데이터는 URL에 노출되며, 보안에 취약할 수 있습니다.
- POST: 폼 데이터를 HTTP 요청 본문(body)에 포함시켜 서버로 전송합니다. 주로 민감한 정보를 전송하거나 긴 데이터를 보낼 때 사용됩니다. 데이터는 URL에 노출되지 않으며, 상대적으로 안전합니다.
action
action 속성은 폼 데이터가 전송될 서버 쪽 스크립트나 웹 페이지의 URL을 지정합니다. 이 속성은 폼이 제출되면 브라우저가 지정된 URL로 이동하거나 지정된 스크립트를 실행하여 데이터를 처리합니다.
name
JavaScript나 서버 측 스크립트와 상호 작용하거나 CSS 선택자로 폼을 선택하는 데 사용됩니다. 특정 폼 요소를 구별하거나 그룹화하는 데 도움이 됩니다.
<fieldset>과 <legend> tag
HTML에서 폼 요소를 그룹화하고 폼에 대한 설명을 제공하는 데 사용되는 요소입니다. 주로 복수의 입력 필드와 라벨을 함께 그룹화하여 사용자에게 정보를 제공하거나 입력 요소의 관련성을 나타내는 데 사용됩니다.
<fieldset> 요소
<fieldset> 요소는 폼 안에 그룹화할 입력 요소들을 감싸는 컨테이너 역할을 합니다. 이 요소는 주로 입력 필드의 논리적인 그룹을 만들 때 사용하며, 이 그룹에 대한 스타일링이나 레이아웃 조정에도 도움이 됩니다.
<fieldset>요소에는name속성을 설정하여 그룹의 이름을 지정할 수 있습니다.
<legend> 요소
<legend> 요소는 <fieldset> 요소 내에서 사용되며 그룹에 대한 설명을 제공합니다. 보통 그룹의 제목이나 간단한 설명을 나타내는 데 사용되며, 시각적으로 표시됩니다. <fieldset> 요소 안에서 가장 먼저 나타나야 합니다.
<form>
<fieldset>
<legend>개인 정보</legend>
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br>
</fieldset>
</form>input type 속성
type 속성을 사용하여 입력 필드의 유형을 지정하면, 해당 입력 필드가 사용자로부터 어떤 종류의 데이터를 입력받아야 하는지를 브라우저에 알려줄 수 있습니다. 이는 데이터 유효성 검사 및 사용자 경험을 개선하는 데 도움이 됩니다.
type 값 | 설명 |
|---|---|
text | 텍스트 입력 필드 |
password | 비밀번호 입력 필드 |
number | 숫자 입력 필드 (숫자만 입력 가능) |
email | 이메일 주소 입력 필드 (유효성 검사 포함) |
url | URL 입력 필드 (유효성 검사 포함) |
checkbox | 체크박스 (다중 선택 가능) |
radio | 라디오 버튼 (단일 선택, 그룹 단위로 설정 필요) |
file | 파일 업로드 필드 |
submit | 제출 버튼 (폼 제출을 트리거) |
reset | 리셋 버튼 (폼 리셋을 트리거) |
hidden | 숨겨진 필드 (화면에 표시되지 않음) |
date | 날짜 입력 필드 (날짜 선택) |
time | 시간 입력 필드 (시간 선택) |
color | 색상 선택 필드 |
range | 범위 선택 필드 (슬라이더) |
search | 검색 필드 |
tel | 전화번호 입력 필드 (유효성 검사 포함) |
추가적인 input 속성
HTML 폼 요소에서 사용되는 autocomplete, autofocus, placeholder, 그리고 required 속성에 대해 간략히 설명해 드리겠습니다:
autocomplete
autocomplete 속성은 폼 필드의 자동 완성 기능을 제어하는 데 사용됩니다. 이 속성은 사용자가 이전에 입력한 값을 자동으로 채울 때 유용합니다. 속성 값으로 "on" 또는 "off"를 사용할 수 있으며, "on"이 설정된 경우 브라우저가 자동 완성을 제공하려고 시도하고 "off"이 설정된 경우 자동 완성을 비활성화합니다.
autofocus
autofocus 속성은 웹 페이지가 로드될 때 폼 요소에 자동으로 포커스를 설정합니다. 페이지에 여러 폼 요소가 있는 경우 특정 입력 필드에 초점을 맞출 때 유용합니다.
placeholder
placeholder 속성은 입력 필드에 임시 텍스트를 표시하여 사용자에게 어떤 종류의 정보를 입력해야 하는지 알려줍니다. 입력 필드에 포커스가 이동하면 플레이스홀더 텍스트는 사라지고 사용자가 직접 입력할 수 있게 됩니다.
required
required 속성은 사용자가 반드시 해당 필드를 작성해야 함을 나타냅니다. 브라우저는 이 속성이 있는 필드를 제출할 때 빈 값이면 사용자에게 경고를 표시하며 폼을 제출하지 못하도록 합니다.
HTML <select> 요소에 사용되는 multiple, selected, 그리고 size 속성에 대해 간략하게 설명해 드리겠습니다:
input type=select의 속성
multiple
multiple 속성은 <select> 요소가 다중 선택 가능한 목록을 나타내는 데 사용됩니다.이 속성을 사용하면 사용자가 여러 항목을 동시에 선택할 수 있습니다.
<select name="fruits" multiple>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="cherry">체리</option>
</select>selected
selected 속성은 <option> 요소를 선택한 상태로 미리 설정할 때 사용됩니다. 이 속성을 사용하면 기본적으로 어떤 옵션이 선택되어 있는지를 설정할 수 있습니다.
<select name="cars">
<option value="volvo">볼보</option>
<option value="audi" selected>아우디</option>
<option value="bmw">BMW</option>
</select>위의 예제에서 "아우디" 옵션이 기본적으로 선택되어 있습니다.
size
size 속성은 <select> 요소에서 목록 상자의 표시 크기를 지정합니다. 이 속성을 사용하여 목록 상자에 여러 옵션을 한 번에 표시하고 스크롤 막대를 표시할지 여부를 설정할 수 있습니다.
<select name="colors" size="4">
<option value="red">빨강</option>
<option value="green">초록</option>
<option value="blue">파랑</option>
<option value="yellow">노랑</option>
</select>input type=textarea의 속성
maxlength
<textarea> 요소에 입력할 수 있는 문자의 최대 길이를 지정합니다.
<input type="text" name="username" maxlength="50">
<textarea name="comments" maxlength="200"></textarea>cols, rows
이 두 가지 속성을 사용하여 텍스트 에어리어의 크기를 제어하고 초기에 보이는 텍스트 줄의 수와 열의 수를 설정할 수 있습니다.
<textarea name="message" cols="40" rows="5"></textarea>