HTML5 Input Types color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
1. Base (기본) <input type ="유형" 속성 ="속성 값" >
cs
- 웹에서의 폼은 사용자 입력부분과 서버 전송 버튼으로 나눔
- 사용자 입력 부분은 거의 <input> 태그를 이용해 처리 함
- <input>태그의 type=""속성을 통해 입력하는 내용이 어떤 정보인지를 지정 함
- type=""속성 값에 따라 사용할 수 있는 속성들도 다름
2. type
2-1. hidden
- 숨겨진 입력필드를 정의
즉, 화면상에 폼에는 보이지 않지만, 폼을 서버로 전송할 때 함께 전송되는 요소
- 예를 들어, 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서버로 넒길때 사용
2-2. text
- 한 줄짜리 일반 텍스트를 입력하는 요소
- 아이디, 이름, 주소와 같은 텍스트를 입력할 때 사용
- 기본 size는 영문 기준 20자
2-3. radio
<input type ="radio" name ="" value ="" checked ="checked" / >
cs
1) name
- 라디오 버튼이 여러 개 있을 경우 구분하기 위한 이름 지정
- 라디오 버튼의 특성을 여러 개중에서 한 가지만 선택하는 것이기 때문에 관련이 있는 항목들끼리 묶어야 type="radio"를 여러 개 사용할 수 있다.
- 같은 그룹끼리 name 속성 값을 똑같이 하면 된다
2) value
- 서버로 넘길 값을 지정
- 영문 또는 숫자이여야 하며, 필수 속성임
3) checked
- type="radio"에 기본속성은 아무것도 선택되지 않은 상태임
- 해당 속성을 사용하면 처음에 선택된 상태로 표시 됨
2-4. checkbox
<input type ="checkbox" name ="" value ="" checked ="checked" / >
cs
- type="radio"에서 사용하는 속성과 같다
1) name
- 여러개 있을 경우 구분하기 위해 이름 지정
- 반드시 그룹으로 묶어주지 않아도 됨
2) value
- 서버로 넘길 값 지정
- 영문 또는 숫자이여야 하며, 필수 속성임
3) checked
- 처음부터 선택된 상태로 화면에 표시 됨
2-5. image
<input type ="image" src ="" alt ="" 속성 ="속성 값" / >
cs
- submit 버튼 대신 전송 버튼 이미지를 사용할 때
2-6. button
<input type ="button" value ="" onclick ="함수()" / >
cs
- 폼 안에 버튼 형태를 만듦
- submit이나 reset같은 자체 기능은 없고 오직 버튼만 넣기 때문에 javascript와 같은 함수를 연결해서 사용
2-7. password
<input type ="password" 속성 ="속성 값" / >
cs
- 비밀번호 입력
- 텍스트 필드와 같지만, 입력하는 내용에 '*'로 표시 됨
type="password"의 속성
- value를 제외하고 type="text"와 같다
1) name
- 텍스트 필드의 구분을 위해 사용되는 이름
2) size
- 텍스트 필드의 길이(화면에 몇 글자를 입력할 수 있는지를 지정)
- 영문 글자 단위가 기본이며, 한글 한 글자는 영문 두 글자와 같음
3) maxlength
- 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정
2-8. submit
<input type ="submit" value ="버튼 내용" 속성 ="속성 값" / >
cs
- 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 표시
- submit 버튼으로 전송된 정보는 처음에 <form>태그에서 지정한 위치로 전송
2-9. reset
<input type ="reset" value ="버튼 내용" 속성 ="속성 값" / >
cs
- <input> 요소에 입력된 정보들을 모두 리셋하여 사용자가 입력한 내용을 전부 지움
2-10. search
<input type ="search" 속성 ="속성값" / >
cs
- 검색 문자열 입력을 위한 텍스트 필드를 정의
- 검색어를 입력하면 'x'표시 활성
- 모바일 브라우저에서 검색할 때 편리함
2-11. url
<input type ="url" 속성 ="속성값" / >
cs
- URL 입력을 위한 필드 정의
2-12. email
<input type ="email" 속성 ="속성값" / >
cs
- 메일 주소 입력을 위한 필드 정의
- 모바일 브라우저에서 키보드 배열이 변경 됨
2-13. tel
<input type ="tel" 속성 ="속성값" / >
cs
- 전화번호 입력으 위한 필드 정의
- 모바일 브라우저에서 키보드 배열이 변경 됨
2-14. number, range
<input type ="number" 속성 ="속성값" / >
<input type ="range" 속성 ="속성값" / >
cs
- 스핀 박스나 슬라이드 막대를 사용해 숫자를 입력
- type="number"은 스핀 박스에 화살표를 눌러 숫자를 입력
- type="range"는 슬라이드 막대를 이용해 숫자를 입력
- type="number" : IE10에서 사용 불가
type="number", type="range"의 속성
1) min
- 필드에 입력 가능한 최소값을 지정
- type="range"일 때 최소값 0
2) max
- 필드에 입력가능한 최대값을 지정
- type="range"일 때 최대값 100
3) step
- 짝수나 홀수 등 특정 숫자로 제한할 때 숫자의 간격을 지정
- 기본은 '1'이며 생략 가능
4) value
- 필드에 표시될 초깃값
2-15. color
<input type ="color" 속성 ="속성 값" / >
cs
- 색상 선택 상자 표시하기
- IE, 사파리에서 지원 안됨
type="color"의 속성
- 속성값이 필수 속성이 아니기에 필요할 때만 사용하면 됨
1) list
- 선택할 수 있는 색생목록을 따로 정의 했을때 그 datalist의 id를 지정
2) value
- 색상 값을 지정
- 색상은 16진수로 표시
2-16. datetime, datetime-local
<input type ="datetime" 속성 ="속성값" / >
<input type ="datetime-local" 속성 ="속성값" / >
cs
- type="datetime"는 날짜(년, 월, 일)와 시간을 함께 표시할 수 있음
- type="datetime-local"은 지역의 날짜와 시간을 표시함
2-17. date, month, week
<input type ="date" 속성 ="속성 값" / >
<input type ="month" 속성 ="속성 값" / >
<input type ="week" 속성 ="속성 값" / >
cs
- type="date"는 달력에서 날짜를 선택할때 'yyyy-mm-dd'로 표시
- type="month"로 지정하면 날짜를 선택할때 'yyyy-mm'으로 표시
- type="week"로 지정하면 1월 첫째 주를 기준으로 몇 번째 주인지 연도와 주기가 표시
2-18. time
<input type ="time" 속성 ="속성 값" / >
cs
- 시간 지정을 지정하는 요소
- 시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해서 선택함
날짜와 시간을 나타내는 유형(12, 13, 14)
- 아직 모든 브라우저를 지원하지 않음
- 공통으로 적용되는 속성
1) min
- 날짜나 시간의 최솟값 지정
2) max
- 날짠 시간의 최댓값 지정
3) step
- 스핀 박스의 화살표를 누를 때마다 날짜나 시간의 증가값을 지정
4) value
- 화면에 표시할 초깃값을 지정
3. input type 적용 화면
참조 : bornteller Blog
