Html 폼(form) 요소(input) 종류 (1)



결과

결과





코드


See the Pen OJVwjpb by goddog (@g0dd0g) on CodePen.




input type

기능 

 text

 한 줄의 텍스트 입력

value 를 사용하여 기본값을 채울 수 있다.

maxlength로 입력 될 텍스트의 길이를 제한할 수 있다.

 password

 비밀번호를 입력하는 창(입력 내용이 가려진다)

email

 겉으로는 text와 동일하지만 제출(submit) 버튼으로 제출 시 이메일 형식이 맞지 않다면 안내 메시지를 보여준다.

url

 겉으로는 text와 동일하지만 제출(submit) 버튼으로 제출 시  url 형식이 맞지 않다면 안내 메시지를 보여준다.

tel

 email 과 tel 처럼 안내 메시지를 보여주지 않는다. 그래서 placeholder를 사용하여서 힌트를 제공해주어야 한다.

 search

검색 입력 창을 만든다. 특징으로는 x표가 있어 창의 내용을 한번에 지울 수 있다.

textarea

 여러 줄의 텍스트를 입력할 수 있다.

cols와 rows로 준 값만큼 area가 설정된다.

cols=열 개수, rows=행 개수, 여기서 개수는 글자의 개수이다.





결과2

> email 형식에 맞지 않은 텍스트를 입력하고 제출 하면 경고가 뜨면서 양식에 맞도록 입력하라고 안내 메시지가 뜬다.




결과3

> url 형식에 맞지 않은 텍스트를 입력하고 제출 하면 경고가 뜨면서 양식에 맞도록 입력하라고 안내 메시지가 뜬다.

> url 의 형식은 'http:// ' 이다.











+ Recent posts