[form] HTML - <input type="color"> 태그 - 색상값(색깔값) 선택 입력 (= 인풋컬러타입/컬러타입인풋 요소)

1. <input type="color"> 예제 - 색상값 선택 입력
2. <input type="color"> 정의
3. <input type="color"> 구문

<input type="color"> 예제 - 색상값 선택 입력

 

<form action="/action_page.php">

  <label for="mycolor">색상선택:</label>

  <input type="color" id="mycolor" name="mycolor" value="#ff0000">

  <input type="submit">

</form>

 

결과보기 (전송키값쌍: mycolor=#ff0000)

<input type="color"> 정의

 

색상 선택 입력 가능한 컬러픽커(ColorPicker) INPUT 요소.

 

---

 

1.

• 입력값은 7글자의 HEX 형식으로 서버에 전달됨. 
• 기본값: #000000 (검은색) 
• value 속성 이용해 기본값 별도 지정 가능하며, 반드시 7글자의 HEX 표기해야 함. (※ red, blue 등 색상명 형식으로 지정하면 적용 X)
• <label> 태그 이용 시, 웹접근성 향상됨.
• 색상코드변환기 - RGB / HSL 코드로 변환

 

2.

IE 제외한 주요 최신 브라우저 모두 지원.

 

3. MDN <input type="color"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

 

<input type="color"> 구문

 

• 기본값 검은색 사용: <input type="color">
• 기본값 다른색 사용: <input type="color" value="hexColorCode">