HTML 폼 가이드 - Web 개발 학습하기 | MDN
1. <form> 태그 기본 개요
<form> 태그는 HTML 문서 내에서 폼을 정의하는 기본 태그입니다. <form> 태그는 웹 서버와 데이터를 주고받기 위한 틀을 제공하며, action 속성으로 데이터를 전송할 URL을, method 속성으로 전송 방식을 지정할 수 있습니다.
action: 폼 데이터를 전송할 URL을 지정합니다.method: 전송 방식을 설정합니다. 일반적으로GET이나POST방식이 사용됩니다.
2. 입력 필드 (<input> 태그)
<input> 태그는 다양한 형태의 입력 필드를 제공합니다. 이 태그는 type 속성에 따라 다른 기능을 갖게 되며, 사용자로부터 텍스트, 숫자, 날짜, 파일 등 여러 유형의 데이터를 입력받을 수 있습니다.
2.1 텍스트 입력 관련
- 일반 텍스트 (
type="text")- 사용자로부터 한 줄의 텍스트를 입력받습니다.
maxlength,size,placeholder등의 속성으로 입력 길이, 표시 크기, 안내 문구를 설정할 수 있습니다.
- 비밀번호 (
type="password")- 비밀번호를 입력받으며, 입력 내용이 표시되지 않고
*또는•기호로 숨겨집니다. - 보안이 중요한 입력 필드에서 자주 사용됩니다.
- 비밀번호를 입력받으며, 입력 내용이 표시되지 않고
- 이메일 (
type="email")- 이메일 형식이 맞는지 확인하는 입력 필드입니다.
- 올바른 이메일 형식이 아닌 경우 브라우저가 경고 메시지를 표시합니다.
- URL (
type="url")- 웹 주소(URL)를 입력받으며, 올바른 URL 형식인지 확인합니다.
- 전화번호 (
type="tel")- 전화번호를 입력받는 필드로,
pattern속성을 활용해 전화번호 형식을 제한할 수 있습니다.
- 전화번호를 입력받는 필드로,
2.2 여러 줄 입력 (<textarea> 태그)
- 여러 줄의 텍스트를 입력받는 필드로, 주로 긴 설명이나 메모를 작성할 때 사용됩니다.
rows와cols속성으로 세로, 가로 크기를 설정할 수 있으며,placeholder속성으로 안내 문구를 표시할 수 있습니다.
2.3 숫자 및 범위 관련
- 숫자 입력 (
type="number")- 숫자만 입력할 수 있는 필드입니다.
min,max속성으로 입력할 수 있는 숫자의 범위를 제한할 수 있습니다.
- 범위 선택 (
type="range")- 슬라이더를 통해 특정 범위의 값을 선택할 수 있습니다.
min,max,step속성을 통해 범위와 간격을 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 사용자 입력을 받기 위한 폼 시작 -->
<form>
<!-- 한 줄 문자열 입력 필드 -->
입력: <input type="text" /><br />
<!-- 한 줄 문자열 입력 필드, 입력란의 너비를 50자로 설정 -->
입력: <input type="text" size="50" /><br />
<!-- 입력 필드, 너비 50자, 최대 입력 글자 수를 10자로 제한 -->
입력: <input type="text" size="50" maxlength="10" /><br />
<!-- 입력 필드, 초기값으로 "초기값"이 표시됨 -->
입력: <input type="text" size="50" maxlength="10" value="초기값" /><br />
<!-- 입력 필드, 초기값 "초기값" 표시 및 읽기 전용 (수정 불가) -->
입력: <input type="text" size="50" maxlength="10" value="초기값" readonly /><br />
<!-- 입력 필드, 입력 전 "값입력"이라는 안내 문구가 표시됨 -->
입력: <input type="text" size="50" maxlength="10" placeholder="값입력" /><br />
<br />
<!-- 비밀번호 입력 필드 (입력값 숨김 처리) -->
입력: <input type="password" /><br />
<br />
<!-- 여러 줄 입력 필드 시작 -->
<textarea></textarea><br />
<!-- 여러 줄 입력 필드, 5줄 높이와 50자 너비 설정 -->
<textarea rows="5" cols="50"></textarea><br />
<!-- 여러 줄 입력 필드, 초기값으로 "초기값"이 표시됨 -->
<textarea rows="5" cols="50">초기값</textarea><br />
<!-- 여러 줄 입력 필드, 입력 전 "값입력"이라는 안내 문구가 표시됨 -->
<textarea rows="5" cols="50" placeholder="값입력"></textarea><br />
</form>
<!-- 폼 끝 -->
</body>
</html>2.4 날짜와 시간 입력
- 날짜 (
type="date")- 사용자에게 날짜를 선택하게 하는 필드로, 달력 UI가 표시됩니다.
value속성으로 기본 날짜를 설정할 수 있습니다.
- 시간 (
type="time")- 사용자가 특정 시간을 선택할 수 있도록 하는 필드입니다.
- 날짜와 시간 (
type="datetime-local")- 날짜와 시간을 함께 입력받는 필드입니다.
2.5 파일 및 색상 선택
- 파일 업로드 (
type="file")- 사용자로부터 파일을 업로드받을 수 있습니다.
- 이미지, 문서 등 다양한 파일을 업로드할 수 있습니다.
- 색상 선택 (
type="color")- 색상을 선택할 수 있는 입력 필드입니다.
- 기본 색상을
value속성으로 설정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 화면 크기에 따라 레이아웃을 조정하도록 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 사용자 입력을 받기 위한 폼 시작 -->
<form>
<!-- 파일 경로 입력 필드, 파일 선택을 위한 버튼 제공 -->
<input type="file" /><br /><br />
<!-- 색상 선택 필드, 색상 선택 툴을 통해 사용자 지정 가능 -->
<input type="color" /><br />
<!-- 기본 색상을 #ff00ff (분홍색)으로 설정 -->
<input type="color" value="#ff00ff" /><br /><br />
<!-- 날짜 선택 필드, 달력에서 날짜를 선택할 수 있음 -->
<input type="date" /><br />
<!-- 기본 날짜를 2024년 5월 5일로 설정 -->
<input type="date" value="2024-05-05" /><br /><br />
<!-- 숫자 입력 필드 -->
<input type="number" /><br />
<!-- 최소값 1, 최대값 10으로 설정하고 초기값을 5로 설정 -->
<input type="number" min="1" max="10" value="5" /><br />
</form>
<!-- 폼 끝 -->
</body>
</html>2.6 기타 선택 항목
- 체크박스 (
type="checkbox")- 여러 선택지 중에서 여러 개를 선택할 수 있습니다.
name속성을 동일하게 하여 여러 옵션을 그룹으로 묶을 수 있습니다.
- 라디오 버튼 (
type="radio")- 여러 선택지 중에서 하나만 선택할 수 있습니다.
- 동일한
name속성을 가진 버튼들은 하나의 그룹으로 묶이며, 하나만 선택 가능합니다.
- 드롭다운 목록 (
<select>태그)<select>태그와<option>태그를 사용하여 드롭다운 메뉴를 만듭니다.- 여러 옵션 중 하나를 선택하거나,
multiple속성으로 여러 개를 선택할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력 태그 연습 - 02</title>
</head>
<body>
<form>
<!-- 체크박스 (여러 개의 선택 가능) -->
<!-- 여러 개의 옵션 중에서 여러 개 선택이 가능합니다. -->
<label><input type="checkbox" name="hobby" value="sports" /> 스포츠</label><br />
<label><input type="checkbox" name="hobby" value="music" /> 음악</label><br />
<label><input type="checkbox" name="hobby" value="reading" /> 독서</label><br /><br />
<!-- 라디오 버튼 (하나만 선택 가능) -->
<!-- 여러 개의 옵션 중 하나만 선택할 수 있습니다. 같은 name을 공유하여 그룹으로 묶습니다. -->
<label><input type="radio" name="gender" value="male" /> 남성</label><br />
<label><input type="radio" name="gender" value="female" /> 여성</label><br /><br />
<!-- 이메일 입력 -->
<!-- 이메일 형식이 맞는지 확인하는 입력 필드입니다. -->
<label for="email">이메일:</label>
<input type="email" id="email" name="email" placeholder="example@example.com" required /><br /><br />
<!-- URL 입력 -->
<!-- 웹사이트 URL을 입력할 때 사용하는 필드입니다. -->
<label for="website">웹사이트:</label>
<input type="url" id="website" name="website" placeholder="https://example.com" /><br /><br />
<!-- 전화번호 입력 -->
<!-- 전화번호를 입력할 수 있으며, 형식을 확인할 수 있습니다. -->
<label for="phone">전화번호:</label>
<input type="tel" id="phone" name="phone" placeholder="010-1234-5678" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" /><br /><br />
<!-- 숨김 입력 -->
<!-- 사용자가 보지 못하도록 숨겨진 데이터를 저장할 때 사용됩니다. -->
<input type="hidden" name="userID" value="12345" />
</form>
</body>
</html>3. 폼 전송 및 조작 버튼
- 제출 버튼 (
type="submit")- 폼을 제출할 때 사용됩니다. 클릭 시, 폼에 입력된 데이터가 서버로 전송됩니다.
- 리셋 버튼 (
type="reset")- 폼에 입력된 데이터를 모두 초기화합니다.
- 일반 버튼 (
type="button")- 특별한 기능이 없는 일반 버튼입니다. JavaScript와 함께 다양한 기능을 구현할 때 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<!-- form 태그를 사용하여 사용자로부터 데이터를 입력받고, 서버에 전송하는 예제입니다.
- action 속성 : 입력된 데이터를 처리할 페이지의 경로를 지정합니다.
- method 속성 : 데이터 전송 방식을 지정합니다.
- GET : 데이터를 URL의 쿼리 문자열로 포함해 전송합니다. 주로 검색이나 조회 요청에 사용되며, 데이터가 URL에 노출됩니다.
- POST : 데이터를 요청의 본문에 포함해 전송합니다. 주로 사용자 정보를 안전하게 전송할 때 사용되며, 데이터가 URL에 노출되지 않습니다.
예시 :
http://127.0.0.1:8080/process.html?data1=1&data2=10
- URL : process.html (데이터를 처리할 서버의 URL)
- 데이터 : data1=1, data2=10 (GET 방식일 경우 URL에 포함됨)
- 전송 방식 : POST를 사용하면 URL에 데이터가 표시되지 않음
-->
<!-- POST 방식으로 서버에 데이터를 전송하는 폼 -->
<form action="process.html" method="post">
<!-- 입력 필드: 사용자로부터 data1 값을 입력받음
name 속성 : 서버에서 이 값을 받아 처리할 때 사용되는 필드 이름입니다. -->
<label for="data1">Data 1:</label>
<input type="text" id="data1" name="data1" />
<!-- 입력 필드: 사용자로부터 data2 값을 입력받음
name 속성 : 서버에서 이 값을 받아 처리할 때 사용되는 필드 이름입니다. -->
<label for="data2">Data 2:</label>
<input type="text" id="data2" name="data2" />
<!-- 폼 제출 버튼
type="submit" : 폼을 전송할 때 사용하는 버튼을 생성합니다. 클릭 시, action 속성에 지정된 페이지로 데이터를 전송합니다. -->
<input type="submit" value="제출하기" />
</form>
</body>
</html>4. 숨김 필드 (type="hidden")
- 화면에 표시되지 않지만 폼 데이터를 전송할 때 서버로 특정 값을 전달하기 위해 사용됩니다.
- 예를 들어, 사용자 ID, 토큰 등을 숨겨진 상태로 폼에 포함할 수 있습니다.
추가 속성들
required: 필수 입력 필드로 지정하여 값이 입력되지 않으면 폼이 제출되지 않도록 설정합니다.pattern: 정규 표현식을 사용해 입력 값의 형식을 제한합니다.placeholder: 입력 필드에 안내 문구를 표시하여 사용자가 입력할 내용에 대한 힌트를 제공합니다.min,max,step: 숫자 및 범위와 관련된 필드에서 입력 가능 범위를 지정합니다.
0개의 댓글
관련 채용 정보
