#8-1. HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력

# HTML 에서 사용되는 다양한 input 요소들을 살펴봅니다.
# 숫자 입력(number), 입력 범위 지정(range), 색상 입력(color)

# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력

 

---

 

1) 숫자 입력(number)

<input>태그의 type 속성값을 "number"로 설정하면, input요소는 사용자가 숫자를 입력할 수 있도록 합니다.

number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점입니다.
브라우저의 지원 여부에 따라 min속성과 max속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있습니다.

<input type="number" name="favnum" min="1" max="9">

 

---

 

2) 입력 범위 지정(range)

<input>태그의 type 속성값을 "range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 합니다.

0 <input type="range" name="favnum" min="1" max="9"> 9

 

---

 

3) 색상 입력(color)

<input>태그의 type 속성값을 "color"로 설정하면, input요소는 사용자가 색상를 입력할 수 있도록 합니다.

선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송합니다.
브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여줍니다.

<input type="color" name="favcolor" value="#CC6600">

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.