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 지원 불가 |
| email |
이메일 |
|
| 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>
