input 타입&스타일

[ input ] 

입력태그 중에 가장 많이 쓰이는 태그, type의 속성값에 따라 입력값이 달라진다.

사용자에게 정보를 입력받는 태그

기본 input

<input type="text" name="name">

input 태그의 속성

	속성값	내용
1	button	버튼을 생성
2	checkbox	checkbox를 생성(여러개 체크 가능)
3	file	파일 입력 양식 생성
4	hidden	보이지 않는 input태그 생성(value값 체크)
5	image	이미지 형태를 생성
6	password	비밀번호 입력 양식 생성
7	radio	radio 버튼을 생성(단일체크)
8	reset	초기화 버튼을 생성
9	submit	폼 양식 제출버튼을 생성
10	text	text입력 양식 생성

*input 태그에 label 태그를 함께 써주어 초점이동이 가능하게 함

 input의 id와 label을 id값이 동일해야 label을 사용자가 클릭했을시 input에 변화가 생김 

 radio나 checkbox의 label 선택시 input에 변화가 없다면 id가 짝이 잘맞는지 확인해봅시다.

<label for="id"></label>   <input type="text" name="name" id="id">

상단의 input 태그 속성은 html4용 태그이다. 아래서부터는 html5에 추가로 지원되는 속성이다.

	속성값	내용
1	color	색상 선택 양식을 생성
2	date	일(day, 년,월,일) 선택양식을 생성
3	datetime	날짜(시,분,초) 양식을 생성
4	datetime-local	지역 날짜 양식을 생성
5	email	이메일 입력양식을 생성
6	month	월(month, 년,월) 선택 양식을 생성
7	number	숫자 양식을 생성(수량 체크)
8	range	범위 선택 양식을 생성
9	search	검색어 입력 양식을 생성
10	tel	전화번호 입력 양식을 생성
11	time	시간 선택 양식을 생성
12	url	url 주소입력 양식을 생성
13	week	주(week, 년,월,주) 선택 양식을 생성

상단의 속성들을 사용할수있는지에 대한 여부는 canIuse를 통해 확인해보자......ㅜㅜ

(ver 20181021)

1.color

https://caniuse.com/#feat=input-color

2. date&time&month&week&datetime

https://caniuse.com/#search=input%20date

3. email&tel&url

https://caniuse.com/#search=email

4.search

https://caniuse.com/#search=search

* text 속성이랑 동일

5.range

https://caniuse.com/#search=range

- date&time&month&week&datetime&color 는 익스에서 사용 안되는 속성이 많으니 확인 후 사용할 것

html5 속성 확인하기 https://jsfiddle.net/jywoo/auygs3eo/8/

위의 피들에 입력해논 html5에 추가된 내용의 디자인을 브라우저별로 확인해보자

1. 크롬

2. 익스11

피들에러인가,,,싶었는데 추가 속성중에 지원안하는 속성이 많아서 이리 보이는,,,,ㅎㅎㅎㅎㅎㅎ

3. 파이어폭스

이전에 썼던 checkbox 버튼 브라우저별 디자인 차이(익스는 버전별로 차이남^-^)에서 유추할수있듯이

브라우저별로 input type의 디자인이 다릅니다.

http://estar.tistory.com/17

그러므로 input을 사용할 때 브라우저별로 디자인을 될수있는한! css에서 normalize를 해줍니다.

input,select{vertical-align:top; outline:none} input[type=file],input[type=image],input[type=reset],input[type=button],input[type=submit]{cursor:pointer} input::-webkit-input-placeholder{color:#999} input:-moz-placeholder{color:#999} textarea::-webkit-input-placeholder{color:#999} textarea:-moz-placeholder{color:#999} input[type=number]::-webkit-outer-spin-button{margin:0} input[type="checkbox"],input[type="radio"]{margin:0; padding:0;} button{outline:none;border:0;background-color:transparent;cursor:pointer}

모바일에서는 IOS 폼 스타일에 굴곡과 쉐도우가 생기기때문에 style 제거가 필요

*- webkit-appearance:none을 하면 브라우저에서 기본적으로 지원하는 디자인을 지워버리기 때문에(라디오 타입은 아예 디자인이 사라져버림,,,) css를 새로 작성해서 스타일을 덮어줘야함!

ios 아이폰 input 스타일 reset

input {    -webkit-appearance: none;    -webkit-border-radius: 0;        }

참고: 

https://www.w3schools.com/tags/tag_input.asp

모던 웹디자인을 위한 html5+css3입문