input 태그
- 사용자에게 입력받을 수 있는 텍스트상자 또는 체크박스 등을 만들 수 있음
텍스트와 관련된 input 태그의 타입 및 태그
text 타입
password 타입
search 타입
- x버튼으로 입력한 값을 삭제할 수 있는 텍스트 상자
url 타입
- 전송 요청을 보낼 때 http가 없으면 전송이 안되는 텍스트 상자
email 타입
- 전송 요청을 보낼 때 @이 없으면 전송이 안되는 텍스트 상자
textarea 태그
- 여러 줄을 입력할 수 있는 텍스트상자
- cols, rows 속성으로 기본 길이 설정, 값이 초과하면 스크롤바가 생김
- resize:none; 스타일로 텍스트상자를 사이즈 조절 못하게 막을 수 있음
숫자와 관련된 input 태그의 타입
number 타입
- 숫자값만 작성 가능한 텍스트 상자
- 스핀박스를 누르면 숫자가 step 속성값만큼 증가하거나 감소함 (스핀박스 : 위아래 화살표 버튼)
range 타입
날짜 및 시간과 관련된 input 태그 타입
date 타입
- 년, 월, 일을 입력받을 수 있는 텍스트 상자 (안 예뻐서 관리자 페이지에서 자주 활용됨)
month 타입
week 타입
- 년도와 해당년도에 몇번째 주인지 입력받을수 있는 텍스트 상자
time 타입
- 오전/오후, 시,분을 입력받을 수 있는 텍스트 상자
datetime-local 타입
- 년도, 월, 일, 오전/오후, 시 , 분 을 입력받을수 있는 텍스트 상자
라디오버튼과 체크박스 관련 input 태그의 타입
radio 타입
- 여러 개 값 중에서 한 개만 선택 가능(동그란 버튼)
- name 속성이 같은 것들끼리 하나의 그룹으로 묶어짐 (같은 name 중 하나만 선택 가능)
- 제출 시 현재 선택된 (checked) 값이 넘어감
checkbox 타입
- 제시한 여러개의 값들 중에서 여러개 선택 가능 (네모난 버튼)
- 현재 선택된(checked) 값들이 모두 넘어감
- 넘기고자 하는 value값을 명시해야 함
- ket=value로 하나씩 끊어서 전송됨
추가적인 input 태그의 타입
submit 타입
reset 타입
button 타입
- 버튼
- 기본값이 없어 value값으로 버튼에 들어갈 텍스트를 추가해줘야함
color 타입
file 타입
- 첨부 파일 선택 가능한 input태그
- 파일 선택 버튼과 파일 이름 텍스트가 보여짐
- name만 설정하면 파일 이름만 전달됨, 실제 파일을 전달하려면 폼 태그의 전송 방법을 multipart로 바꿔줘야함
hidden 타입
- 특정값을 사용자에게 입력받지 않고 화면에 노출시키지도 않고 넘기고자 하는 값이 있을경우 사용하는 타입
- 서버측으로 데이터를 넘겨야 하는데 사용자에게 입력 받는 건 아니고 몰래 넘겨야 하는 데이터가 있을때 사용
- 개발자 도구에서 보이므로 보안상 중요한 데이터를 넣으면 안됨
input 태그의 속성
- required 속성 : 1글자 이상 꼭 작성해야 함, 빈 값이면 안내문 표시
- maxlength 속성 : 최대 글자 수 제한
- placehorder 속성: 사용자에게 보여지는 텍스트 설정 (아이디를 입력하세요) / 클릭하면 사라짐
- checked 속성 : 기본적으로 선택되어져있는 값
- value 속성 : 기본값 지정
- size 속성 : input 타입의 크기 지정
- name 속성
- 폼에서 input 태그에 name 속성이 없으면 값이 전달되지 않음
- 폼에서는 name 속성이 key값임 (id가 아님) ★
- min 속성 : 최소값
- max 속성 : 최대값
- step 속성 : 증가값
- value 속성 : 기본값
label 태그
- label for=id명을 label과 연결된 input 태그의 id 속성 값과 일치하게 설정하면 연동됨
- 라벨을 클릭하면 연결된 input 태그가 선택됨
<input type="radio" id="radioX" name="gender" value="X" checked>
<label for="radioX">선택안함</label>
<input type="radio" id="radioM" name="gender" value="M">
<label for="radioM">남자</label>
<input type="radio" id="radioF" name="gender" value="F">
<label for="radioF">여자</label>
select태그, option 태그
- 사용자가 값을 입력하는게 아니라 내가 제시한 여러 옵션들 중에서 선택할 수 있게끔 해 주는 태그 (콤보상자)
- 제출 시 현재 선택된 값이 넘어감
- option value값 : 실제 넘기는 값
- option 태그 사이 값 (contents) : 사용자에게 보여지는 값
- 각각의 option에 value 속성값을 명시했을 경우 value값이 전달됨
- value 명시 안 했을 경우에는 기본적으로 contents 영역 값이 넘어감
- selected 속성 : 기본적으로 선택되어져있는 값
<form action="test.do">
국적 :
<select name="national">
<option value="ko">한국</option>
<option value="ru">러시아</option>
<option value="us">미국</option>
<option value="eu">영국</option>
<option selected>선택안함</option>
</select>
<input type="submit">
</form>
datalist 태그
- 내가 제시한 옵션 + 목록에 없더라도 사용자가 text 상자에 값을 기술해서 넘길 수 있음
- value 속성을 기술하면 value 속성의 값이 리스트에 들어감
- input list랑 datalist id가 같아야 연결되어 option값이 보임
- 자동완성 기능 제공
<form action="test.do">
좋아하는 색상 :
<input type="text" name="color" list="colorList">
<datalist id="colorList">
<option value="black">검정색</option>
<option value="white">희색</option>
<option value="skyblue">하늘색</option>
<option value="pink">핑크색</option>
</datalist>
<input type="submit">
</form>
