Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

web sprit

input 태그 본문

웹1.0/HTML

input 태그

커드만 2016. 3. 28. 19:05

HTML5 Input Types

 color

 date

 datetime

 datetime-local

 email

 month

 number

 range

 search

 tel

 time

 url

 week

 

 


1. Base (기본)

1
<input type="유형" 속성="속성 값">
cs

- 웹에서의 폼은 사용자 입력부분과 서버 전송 버튼으로 나눔

- 사용자 입력 부분은 거의 <input> 태그를 이용해 처리 함

- <input>태그의 type=""속성을 통해 입력하는 내용이 어떤 정보인지를 지정 함

- type=""속성 값에 따라 사용할 수 있는 속성들도 다름



2. type

2-1. hidden

1
<input type="hidden" />
cs

- 숨겨진 입력필드를 정의

  즉, 화면상에 폼에는 보이지 않지만, 폼을 서버로 전송할 때 함께 전송되는 요소

- 예를 들어, 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서버로 넒길때 사용


2-2. text

1
<input type="text" />

cs

- 한 줄짜리 일반 텍스트를 입력하는 요소

- 아이디, 이름, 주소와 같은 텍스트를 입력할 때 사용

- 기본 size는 영문 기준 20자


2-3. radio

1
<input type="radio" name="" value="" checked="checked" />
cs

1) name

- 라디오 버튼이 여러 개 있을 경우 구분하기 위한 이름 지정

- 라디오 버튼의 특성을 여러 개중에서 한 가지만 선택하는 것이기 때문에 관련이 있는 항목들끼리 묶어야 type="radio"를 여러 개 사용할 수 있다.

- 같은 그룹끼리 name 속성 값을 똑같이 하면 된다

2) value

- 서버로 넘길 값을 지정

- 영문 또는 숫자이여야 하며, 필수 속성임

3) checked

- type="radio"에 기본속성은 아무것도 선택되지 않은 상태임

- 해당 속성을 사용하면 처음에 선택된 상태로 표시 됨


2-4. checkbox

1
<input type="checkbox" name="" value="" checked="checked" />
cs

- type="radio"에서 사용하는 속성과 같다

1) name

- 여러개 있을 경우 구분하기 위해 이름 지정

- 반드시 그룹으로 묶어주지 않아도 됨

2) value

- 서버로 넘길 값 지정

- 영문 또는 숫자이여야 하며, 필수 속성임

3) checked

- 처음부터 선택된 상태로 화면에 표시 됨


2-5. image

1
<input type="image" src="" alt="" 속성="속성 값" />
cs

- submit 버튼 대신 전송 버튼 이미지를 사용할 때


2-6. button

1
<input type="button" value="" onclick="함수()" />
cs

- 폼 안에 버튼 형태를 만듦

- submit이나 reset같은 자체 기능은 없고 오직 버튼만 넣기 때문에 javascript와 같은 함수를 연결해서 사용


2-7. password

1
<input type="password" 속성="속성 값" />
cs

- 비밀번호 입력

- 텍스트 필드와 같지만, 입력하는 내용에 '*'로 표시 됨

type="password"의 속성

- value를 제외하고 type="text"와 같다

1) name

- 텍스트 필드의 구분을 위해 사용되는 이름

2) size

- 텍스트 필드의 길이(화면에 몇 글자를 입력할 수 있는지를 지정)

- 영문 글자 단위가 기본이며, 한글 한 글자는 영문 두 글자와 같음

3) maxlength

- 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정


2-8. submit

1
<input type="submit" value="버튼 내용" 속성="속성 값" />
cs

- 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 표시

- submit 버튼으로 전송된 정보는 처음에 <form>태그에서 지정한 위치로 전송


2-9. reset

1
<input type="reset" value="버튼 내용" 속성="속성 값" />
cs

- <input> 요소에 입력된 정보들을 모두 리셋하여 사용자가 입력한 내용을 전부 지움


2-10. search

1
<input type="search" 속성="속성값" />
cs

- 검색 문자열 입력을 위한 텍스트 필드를 정의

- 검색어를 입력하면 'x'표시 활성

- 모바일 브라우저에서 검색할 때 편리함


2-11. url

1
<input type="url" 속성="속성값" />
cs

- URL 입력을 위한 필드 정의


2-12. email

1
<input type="email" 속성="속성값" />
cs

- 메일 주소 입력을 위한 필드 정의

- 모바일 브라우저에서 키보드 배열이 변경 됨


2-13. tel

1
<input type="tel" 속성="속성값" />
cs

- 전화번호 입력으 위한 필드 정의

- 모바일 브라우저에서 키보드 배열이 변경 됨


2-14. number, range

1
2
<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

1
<input type="color" 속성="속성 값" />
cs

- 색상 선택 상자 표시하기

- IE, 사파리에서 지원 안됨

type="color"의 속성

- 속성값이 필수 속성이 아니기에 필요할 때만 사용하면 됨

1) list

- 선택할 수 있는 색생목록을 따로 정의 했을때 그 datalist의 id를 지정

2) value

- 색상 값을 지정

- 색상은 16진수로 표시


2-16. datetime, datetime-local

1
2
<input type="datetime" 속성="속성값" />
<input type="datetime-local" 속성="속성값" />
cs

- type="datetime"는 날짜(년, 월, 일)와 시간을 함께 표시할 수 있음

- type="datetime-local"은 지역의 날짜와 시간을 표시함


2-17. date, month, week

1
2
3
<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

1
<input type="time" 속성="속성 값" />
cs

- 시간 지정을 지정하는 요소

- 시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해서 선택함


날짜와 시간을 나타내는 유형(12, 13, 14)

- 아직 모든 브라우저를 지원하지 않음

- 공통으로 적용되는 속성

1) min

- 날짜나 시간의 최솟값 지정

2) max

- 날짠 시간의 최댓값 지정

3) step

- 스핀 박스의 화살표를 누를 때마다 날짜나 시간의 증가값을 지정

4) value

- 화면에 표시할 초깃값을 지정 


3. input type 적용 화면

hidden
text
radio
checkbox
image
button
password
submit
reset
search
url
email
tel
number
range
color
, datetime, datetime-local
, , date, month, week
time



참조 : bornteller Blog

Comments