html input태그와 종류를 알아보자. (2)

1. 이전글: 바로가기

2. Url 타입

사용자 (user)로 부터 링크(url) 을 입력 받기 위한 타입으로, 입력 된 값이 url 형식이 맞는지 확인한다. 만약, url 형식이 아니면 (htps:// 등이 들어가지 않으면), 에러가 발생한다.

<input type="url" name="인터넷 주소 입력">
/*
예: https://blog-lifelog-kr.blogspot.com/

link가 아닐 경우, error발생
예: 입력값:test ->  error 발생
*/

3. Email 타입

사용자 (user) 로 부터 이메일 주소를 입력받기 위한 타입으로, 입력된 값이 메일 주소 형식이 맞는지 체크하는 기능을 가지고 있다.

<input type="email" name="이메일 주소를 입력해 주세요">

/*
이메일 주소 형식이 아니면 error 발생
예: test라고 입력 창에 입력하면 error 발생
*/

4. 연락처 (tel) 타입

user로 부터 전화번호를 입력 받기 위한 타입으로, tel타입의 경우 스마트폰에 숫자 키보드를 출력해 주는 기능을 가지고 있다.

<input type="tel" name="전화번호 입력">
/*
tel의 경우, 입력값을 검증하지 않음
*/

5. Number 타입

사용자로부터 숫자를 입력 받기 위한 타입으로, 스핀 박스가 표시되며 아래와 같은 속성을 설정할 수 있다.

min: 입력할 수 있는 최소값으로, 기본은 '0' 이다.

max: 입력할 수 있는 최대값으로, 기본은 '100' 이다.

step: +/- 되는 숫자 간격을 조정하는 요소로, 기본은 '1' 이다.

value: 표시할 초기값이다

<input type="number" name="여기에 입력">

6. Range 타입

사용자로부터 슬라이드 바를 통해서 숫자값을 입력 받기 위한 타입으로, submit을 입력하면, url 뒤에 값 (range 값) 이 들어간다.

tip: range의 속성은 number와 동일하다.

<input type="range" name="range예제">

Life.List