[ 생활코딩 ] HTML5의 입력양식

HTML5의 입력양식 - HTML의 새로운 제출양식 1

input types

사용자로 하여금 의도하는 정도만을 입력하도록 규제하는 기능입니다

• color : 색상을 쉽게 선택 할 수 있습니다.
• date : 날짜를 입력하는 화면이 뜹니다
• datetime : 서버쪽으로 데이터가 전송 될 때 국제표준시라는 방식으로 전송이 됩니다
• datetime-local : 현재 살고있는 지역에 해당되는 시간으로 전송이 됩니다
• email : 이메일 정보만 쉽게 입력할 수 있게 강제하는 타입입니다
• month : 월을 지정합니다
• number : 숫자
• range : 어떤 숫자의 범위 (1~10까지)를 슬라이드로 움직이면서 지정할 수 있습니다
• search : 검색하는 입력창 (검색 기능)
• tel : 전화번호와 관련
• time : 시간 (1시,2시)
• url : url 정보 입력
• week : 주를 입력

input type = number ( 출처 : 생활코딩 - https://www.opentutorials.org/course/1 )

input types의 특징

• 사용자가 어떠한 정보를 입력하도록 강제할 수 있습니다.
• 모바일 디바이스에서는 더 편하게 입력할 수 있는 화면이 뜨게 할 수 있습니다.
• submit - 사용자가 유효하지 않은 정보를 입력하게 되면 제출 버튼을 누를 때 거부하도록 동작합니다.

 

HTML5의 입력양식 - HTML의 새로운 제출양식 2

input types - date

date ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

input types - month

년과 월까지 전송할 수 있습니다.

month ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

 

input types - time

년도와 시간까지 전송할 수 있습니다.

time ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

input types - email

이메일(@)형식으로 제출 하지 않으면 오류 메시지가 뜹니다. 모바일 화면에서는 키보드(자판)부분에 '@'가 떠서 이메일을 더 쉽게 입력할 수 있도록 도와줍니다.

email 오류 메시지 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

input types - search

검색할 때 사용하는 것입니다. 일반적인 텍스트 필드와 구별할 수 있습니다. 정보로서의 가치를 높여줍니다.

 search ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

input types - tel

모바일에서 사용하게되면 실행했을 떄 전화번호를 입력하기 쉬운 키패드가 나옵니다.

 tel 모바일 화면 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

input types - url

url이 아닌 것을 입력할 시 오류메시지가 뜹니다. 모바일에서 킬 떄는 url을 입력하기 쉬운 UI가 나옵니다.

 url 오류 화면 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

input types - range

슬라이더가 생깁니다 min값을 지정하고, max갚을 지정하면 맨왼쪽은 min, 맨 오른쪽은 max값으로 들어갑니다.

range ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11038 )

 

 

HTML5의 입력양식 - HTML5 입력양식의 속성들

HTML5 입력양식의 속성들

자동완성기능

• autocomplete="on" - 자동완성 기능 활성화
• utocomplete="off" - 자동완성 기능 비활성화
•  

placeholder

폼(form)이 무엇을 하는건지 사용자에게 알려주는 기능을 합니다.

placeholder ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11089 )

 

autofocus 속성

웹 페이지가 열렸을 때 자동으로 마우스 커서가 첫 번째 입력 양식에 포커싱 될 수 있도록 하는 기능입니다.

autofocus 속성 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/11089 )

 

HTML5의 입력양식 - HTML5 입력 값 체크

유효성 검사

사용자가 입력한 값이 유효한지, 안전한지 알려주는 것입니다.

required

반드시 입력해야 되는 필수 양식일 때 사용되는 속성입니다.

required 속성 ( 출처 - https://www.opentutorials.org/course/2039/11090 )

 

required pattern="[정규표현식]"

사용자가 입력한 정보가 첫 글자나 마지막 글자에 패턴을 강제하고 싶을 때 사용합니다.

required pattern="[]" 예제 - (출처 - https://www.opentutorials.org/course/2039/11090 )

정규표현식