[CSS] input 타입의 모든것 (1)

input 속성정리

1. 기본

2. 요소

* name - 필드를 구별하기 쉽도록 붙이는 이름 (사용자페이지에 표시안됨)

* size - 필드 길이를 지정

* value - 화면에서 박스 안에 표시될 글의 내용

* maxlength - 필드에 입력할 수 있는 최대 문자 개수

3. 속성값

* text - 글자

* password - 비밀번호

* number - 숫자

* tel - 전화번호

* url - 인터넷주소

* email - 메일주소

* search - 검색

* file - 파일첨부

* submit - 전송버튼

* image - submit 대신 사용할 이미지 버튼

* reset - 리셋

* button - 버튼

* checkbox - 체크박스(다중선택 가능)

* radio - 라이도버튼 (다중선택 불가)

* hidden - 보이지않음

* color - 색상표

* date - 날짜(년,월,일)폼 생성

* month - 날짜(년,월)폼 생성

* week - 날짜(년,월,주)폼 생성

* time - 날짜(시,분,초)폼 생성

* detetime - 국제 표준시(UTC)로 설정된 날자와 시간 (년,월,시,분,초)를 넣습니다.

* datetime-local - 사용자가 있는 지역을 기준으로 날자와 시간 (년,월,시,분,초)를 넣습니다.

1. 기본 속성값의 종류

위에 적어놨듯이, input 속성값은 굉장히 다양합니다.

해당 내용을 모바일에 적용했을 때와 비교하여 설명해드리겠습니다.

[ 모바일 캡쳐 이미지 http://blog.naver.com/besthuman01/220509888830 에서 퍼옴 ]

1. TEXT (글자 입력)

textarea 와는 다르죠. 우선 아무리 height 값을 높게 준다고하더라도 텍스트는 한줄로 밖에 쓸 수 없습니다.

다국어 ,특수문자 등 모두 사용이 가능하고 적용시 모바일에서 해당 키보드값이 노출됩니다.

2. password (비밀번호)

역시 위에 내용과 동일하고 비밀번호는 ( ● ) 로 표시됩니다.

날자 관련

* date - 날짜(년,월,일)폼 생성

* month - 날짜(년,월)폼 생성

* week - 날짜(년,월,주)폼 생성

* time - 날짜(시,분,초)폼 생성

[ 심화과정 ]

1. maxlength (필드에 입력할 수 있는 최대 문자 개수)

위에 설명을 써놓은것처럼, 최대 문자개수를 지정할 수 있습니다.

"5"[쏭냥의 소소한 블로그][쏭냥의 소]

2. readonly (읽기전용)

해당 부분은 제일 마지막에 써주셔도 상관없습니다.

위와같이 써주기만 하는걸로도 분명 input type 인데, 안에 내용을 수정할 수 없게합니다.

3. Disabled (수정불가)

위에 readonly와 같은것처럼 보이지만, 해당부분은 input 색상도 회색으로 변하고

제일 중요한 차이점은, submit을 해도 값이 전송되지 않는다는 점입니다.

4. 클릭시 value 값 바꾸거나 없애기

이걸 가장 많이 사용할것같은데요.

홈페이지보시면 회원가입할때, input 안에 이름 이라고 써있는데 클릭하면 공백으로 비워지는 경우 보셨죠 ?

그럴때 사용하는 기능입니다.

소스는 위와 같고, 내부에서 쏭냥의블로그만 바꿔주시면됩니다.

5. 클릭시 type와 value 모두 변경시

이것도 많이 사용하죠 예를 들자면,

홈페이지 가입시 input 안에 비밀번호 확인 이라고 써있는데 눌러서 쓰면 ● 으로 표시되는것 !

text > password 뿐만아니라 위에 모양같은 박스라면 어떤것도 변경이가능합니다 (tel/number/password/text 등)

6. 모바일(ios /안드로이드) 기본 input 모양