DEV/HTML
HTML | 폼 태그
devvnn
2021. 12. 30. 16:10
form
- 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- <form>이 다른 <form>을 자식 요소로 포함할 수 없음
| 속성 | 의미 | 값 | 기본값 |
| action | 전송한 정보를 처리할 웹페이지의 URL | URL | |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | ||
| method | 서버로 전송할 HTTP 방식 | GET, POST | GET |
| name | 고유한 양식의 이름 | ||
| novalidate | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 | ||
| target | 서버로 전송 후 응답받을 양식을 지정 | _self, _blank | _self |
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 태그 연습</title>
</head>
<body>
<form action="/login" method="get">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>
</body>
</html>
input
- 사용자에게 입력받을 데이터 양식
태그에 추가 가능한 요소
| autocomplete | 사용자가 이전에 입력받은 값으로 자동 완성 기능을 사용할 것인지 여부 |
| autofocus | 페이지가 로드될 때 자동으로 포커스(하나만 가능하므로 문서 내 고유하게 존재해야 함) |
| checked | 양식이 선택되었음을 표시(type 속성 값이 radio, checkbox일 경우만 가능) |
| form | form의 id 속성의 값 |
| name | 전송하고자 하는 양식의 이름 |
| type | 입력받을 데이터의 종류(text가 기본값) |
type 속성에 입력할 수 있는 값의 목록
| 값 | 데이터 종류 | 특징 |
| button | 일반 버튼 | <button> 처럼 사용 |
| checkbox | 체크박스 | |
| color | 색상 | IE 지원 불가 |
| 이메일 | ||
| file | 파일 | |
| hidden | 보이지 않지만 전송할 양식 | value 속성으로 값을 지정 |
| image | 이미지 제출 버튼 | <img /> 처럼 사용 |
| number | 숫자 | |
| password | 비밀번호 | 가려지는 양식 |
| radio | 라디오 버튼 | |
| range | 범위 컨트롤 | min, max, stop, value (기본값) 속성 사용 |
| reset | 초기화 | 해당 <form> 범위 내 모든 양식 |
| search | 검색 | |
| submit | 제출 버튼 | 해당 <form> 범위 내 고유한 양식 |
| tel | 전화번호 | |
| text | 일반 텍스트 | |
| url | 절대 URL |
label
- 라벨 가능 요소의 제목
- for 속성으로 라벨 가능 요소를 참조하거나 컨텐츠로 포함
- -> for는 참조형 라벨 가능 요소의 id 속성값
- 라벨 가능 요소 : <button>, <input>, <progress>, <select>, <textarea>
button
- 선택 가능한 버튼을 지정
- input으로도 만들 수 있지만 button 속성을 이용해서 좀 더 직관적인 표현 가능
| 속성 | 의미 | 값 | 특징 |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(boolean) | 문서 내 고유해야 함 |
| disable | 버튼을 비활성화 | 불린(boolean) | |
| form | <form> 의 id 속성 값 | 해당 <form>의 후손이 아닐 경우에만 | |
| name | 폼 데이터와 함께 전송되는 버튼의 이름 | ||
| type | 버튼의 타입 | button, reset, submit |
testarea
- 여러 줄의 텍스트 양식
| 속성 | 의미 | 값 | 기본값 | 특징 |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on | |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(boolean) | 문서 내 고유해야 함 | |
| disabled | 양식을 비활성화 | 불린(boolean) | ||
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우에만 | ||
| maxlength | 입력 가능한 최대 문자 수 | 숫자(number) | 무한 | |
| name | 양식의 이름 | |||
| placeholder | 사용자가 입력할 값의 힌트 | |||
| readonly | 수정 불가한 읽기 전용 | 불린(boolean) | ||
| rows | 양식의 줄 수 | 숫자(number) |
select
- 옵션을 선택하는 메뉴
| 속성 | 의미 | 값 | 기본값 |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on |
| disabled | 선택 메뉴를 비활성화 | 불린(boolean) | |
| form | 선택 메뉴가 속할 하나 의상의 <form>의 id 속성 값 | ||
| multiple | 다중 선택 여부 | 불린(boolean) | |
| name | 선택 메뉴의 이름 | ||
| size | 한 번에 볼 수 있는 행의 갯수 | 숫자(number) | 0(1과 같음) |
예제
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 태그 연습</title>
</head>
<body>
<div>
<h1>문의 글 남기기</h1>
<form action="">
<table>
<tr>
<td>이름</td>
<td><input type="text"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password"></td>
</tr>
<tr>
<td>제목</td>
<td><input type="text"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td><button type="submit">저장</button>
<button type="reset">초기화</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 태그 연습</title>
</head>
<body>
<div>
<h1>설문조사</h1>
<form action="">
<table>
<tr>
<td>이름</td>
<td><input type="text"></td>
</tr>
<tr>
<td>나이</td>
<td>
20대 <input type="radio" name="age" id="age">
30대 <input type="radio" name="age" id="age">
40대 <input type="radio" name="age" id="age">
</td>
</tr>
<tr>
<td>취미</td>
<td>
독서 <input type="checkbox" name="" id="">
음악듣기 <input type="checkbox" name="" id="">
게임 <input type="checkbox" name="" id="">
운동 <input type="checkbox" name="" id="">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 태그 연습</title>
</head>
<body>
<div>
<h1>설문조사</h1>
<form action="">
<table>
<tr>
<td>아이디</td>
<td><input type="text"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="" id=""></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text">
@
<select name="" id="">
<option value="">직접입력</option>
<option value="">naver.com</option>
</select>
</td>
</tr>
<tr>
<td>문자 수신 여부</td>
<td>
<input type="radio" name="sms" id="sms" checked>예
<input type="radio" name="sms" id="sms">아니오
</td>
</tr>
<tr>
<td>가입경로</td>
<td>
<input type="checkbox" name="" id="">친구 소개
<input type="checkbox" name="" id="">인터넷 검색
<input type="checkbox" name="" id="">블로그
<input type="checkbox" name="" id="">기타
</td>
</tr>
<tr>
<td>
<button type="reset">초기화</button>
<button type="submit">저장</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
