집 > 기사 > 웹 프론트엔드 > HTML5 입력 새 유형 속성 색상 색상 선택기 예제 코드

HTML5 입력 새 유형 속성 색상 색상 선택기 예제 코드

青灯夜游앞으로: 2018-10-09 15:52:384173검색

type 속성은 입력 요소의 유형을 지정합니다. 이 글에서는 HTML5 입력의 새로운 유형 속성 색상 색상 선택기의 예제 코드를 더 자세히 소개합니다. 관심 있는 친구들은 스크립트 홈의 편집기를 따라가서 살펴볼 수 있습니다.

정의 및 사용법

유형 속성 입력 요소 유형을 지정합니다.

참고: 이 속성은 필수는 아니지만 항상 사용해야 한다고 생각합니다.

HTML5 입력 새 유형 속성 색상 색상 선택기 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>color拾取器</title>
</head>
<body>
  <input type="color" id="color">
</body>
<script>
  document.querySelector("#color").onchange = function () {
    document.getElementById(&#39;color&#39;).click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色
    document.body.style.background = this.value;
  }
</script>
</html>

HTML 5의 유형 속성

속성 값

값	설명
button	을 살펴보겠습니다. 클릭 가능한 버튼(주로 JavaScript 시작 스크립트)
checkbox	체크박스를 정의하세요.
color	색상 선택기를 정의합니다.
date	날짜 필드 정의(달력 제어 포함)
datetime	날짜 필드 정의(달력 및 시간 제어 포함)
datetime-local	날짜 필드 정의(달력 및 시간 제어 포함) )
month	날짜 필드의 월 정의(달력 컨트롤 사용)
week	날짜 필드의 주 정의(캘린더 컨트롤 사용)
time	날짜 필드 정의 시, 분, 초(시간 제어 포함)
email	이메일 주소에 대한 텍스트 필드 정의
file	파일 업로드에 대한 입력 필드 및 "찾아보기..." 버튼 정의
Hidden	숨겨진 입력 필드 정의
image	이미지를 제출 버튼으로 정의
number	스피너 컨트롤로 숫자 필드 정의
password	비밀번호 필드를 정의하세요. 필드의 문자가 마스크됩니다.
radio	라디오 버튼을 정의하세요.
range	슬라이더 컨트롤을 사용하여 숫자 필드를 정의합니다.
reset	재설정 버튼을 정의합니다. 재설정 버튼은 모든 양식 필드를 초기 값으로 재설정합니다.
search	검색에 사용되는 텍스트 필드를 정의합니다.
submit	제출 버튼을 정의하세요. 제출 버튼은 데이터를 서버로 보냅니다.
tel	전화번호에 대한 텍스트 필드를 정의합니다.
text	기본값. 사용자가 텍스트를 입력할 수 있는 한 줄 입력 필드를 정의합니다. 기본값은 20자입니다.
url	URL에 사용되는 텍스트 필드를 정의합니다.

Summary

위는 HTML5 입력에 도입된 새로운 유형 속성 색상 선택기의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼을 방문하세요!

HTML5 입력 새 유형 속성 색상 색상 선택기 예제 코드

관련 기사