<form>
<form [속성="속성 값"]>여러 폼 요소</form>
- 입력하거나 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소
- 아이디, 비밀번호, 로그인 버튼, 회원 가입 등..
- 몇 가지 속성을 사용해서 입력 받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리를 할 것인지 지정
<form>의 속성
method
- method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘길지 지정
- get : 입력한 내용의 길이에 제한이 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다.
- post : 입력한 내용의 길이에 제한을 받지 않고, 사용자가 입력한 내용도 드러나지 않는다.
name
- name : 자바 스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
action
<form **action**="register.php">
/*여러 폼 요소*/
</form>
- action : <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
target
- target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
autocomplete
<form action="" autocomplete="off">
/*여러 폼 요소*/
</form>
- 자동 완성 기능을 나타냄
- 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 준다
- 기본 속성 값은 “on”
- 개인 정보나 일회성 정보를 입력한다면 이 기능은 사용하지 않는 게 좋다.
<form> 태그
<fieldset>,<legend>
- <fieldset> : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
<fieldset [속성="속성값"]></fieldset>
- <legend> : <fieldset>태그로 묶은 그룹에 제목을 붙일 때 사용
<fieldset>
<legend>그룹 이름</legend>
</fieldset>
<label>
- 폼 요소에 레이블을 붙일 때 사용
- 레이블 : 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트
<lable>아이디(6자이상)<input type="text"></lable>
<lable for="user-id">아이디(6자이상)</lable>
<input type="text" id="user-id">
- 아래의 코드와 위의 코드의 결과는 같다
- 아래 코드는 <lable>과 <input>태그가 떨어져 있더라도 둘 사이를 쉽게 연결 할 수 있다는 장점이 있다.
<textarea>
<textarea>내용</textarea>
- 여러 줄을 입력하는 텍스트 영역
- 속성
- cols : 가로 너비
- rows : 세로 너비
<select>, <option>
<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
. . .
<option value="값n">내용n</option>
</select>
- 드롭 다운 목록
- <select>의 속성
- size : 드롭 다운 항목의 개수
- multiple : 둘 이상의 항목 선택 가능
- <option>의 속성
- value : 서버로 넘어가는 값 지정
- select : 기본 선택 값 설정
<buttton>
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
- 속성
- submit : 폼을 서버로 전송
- reset : 폼에 입력한 내용 초기화
- button : 기능이 없는 버튼
💡 버튼의 속성을 지정하지 않으면 submit 속성으로 만들어진다
<input>
- 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용
<input>의 type 속성
text & password
<input type="text">
<input type="password">
- text : 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스
- password : 비밀번호 입력 필드
- 주요 속성
- size : 필드의 길이 지정
- maxlength가 10이고 size가 5라면 입력한 글자 중 다섯 글자만 보인다.
- value : 필드에 표시할 초깃값
- maxlength : 입력 할 수 있는 최대 문자 수
search & url & email & tel
<input type="search">
<input type="url">
<input type="email">
<input type="tel">
- search : 검색할 때 입력하는 필드
- 오른쪽에 X가 표시되어 입력 값을 지울 수 있음
- url : URL 주소 입력 필드
- email : 이메일 주소 입력 필드
- tel : 전화번호 입력 필드
checkbox & radio
<input type="checkbox" value="서버에 넘겨 줄 값">
<input type="radio" value="서버에 넘겨 줄 값">
- checkbox : 여러 항목 중 2개 이상 선택 가능한 체크 박스
- radio : 여러 항목 중 1개만 선택 가능한 라디오 버튼
- 주요 속성
- value : 선택한 버튼을 서버에 알려 줄 때 넘겨줄 값, 필수 속성
- checked : 버튼의 초기 선택 여부
number & range
<input type="number">
<input type="range">
- number : 숫자 조절이 가능한 스핀 박스
- range : 숫자 조절이 가능한 슬라이드 막대
- 주요 속성
- min : 최솟값, 기본 값은 0
- max : 최댓값, 기본 값은 100
- step : 숫자 간격 지정, 기본 값은 1
- value : 필드에 표시할 초깃값
date & month & week
<input type="date">
<input type="month">
<input type="week">
- date : 사용자 지역 기준 날짜(연, 월, 일)
- month : 사용자 지역 기준 날짜(연, 월)
- week : 사용자 지역 기준 날짜(연, 주)
time & datetime & datetime-local
<input type="time">
<input type="datetime">
<input type="datetime-local">
- time : 사용자 지역 기준 시간(시, 분, 초, 분할 초)
- datetime : 국제 표준시의 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
- datetime-local : 사용자 지역 기준 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
submit & reset
<input type="submit" value="버튼에 표시할 내용">
<input type="reset" value="버튼에 표시할 내용">
- submit : 전송 버튼
- 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐
- reset : 리셋 버튼
image
<input type="image" scr="이미지 경로" alt="대체 텍스트">
- image : submit 버튼 기능을 하는 이미지
button
<input type="button" value="버튼에 표시할 내용">
- button : 일반 버튼
- 주로 버튼을 클릭해서 자바 스크립트를 실행할 때 사용
file
<input type="file">
- file : 파일 첨부가 가능한 버튼
- ‘파일 선택’이나 ‘찾아보기’ 버튼 등이 표시 된다
hidden
<input type="hidden" name="이름" value="서버로 넘길 값">
- hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드
- 사용자에게는 굳이 보여줄 필요 없지만 관리자가 알아야 하는 정보를 입력 받는다.
<input>의 속성
autofocus
<input type="타입속성" autofocus required>
- 페이지를 불러올 때 자동으로 입력창에 커서가 깜빡이게 한다
placeholder
<input type="타입속성" placeholder="값에 대한 설명">
- 클릭하면 사라지는 내용 표시
- 주로 필드에 어떤 내용을 적어야 하는지 알려줄 때 사용
readonly
<input type="타입속성" readonly>
required
<input type="타입속성" required>
- 필수 입력 필드 표시
- 값이 입력 되지 않으면 오류 메시지를 띄움