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

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:// ' 이다.