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

青灯夜游
풀어 주다: 2018-10-09 15:52:37
앞으로
4172명이 탐색했습니다.

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 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

HTML5 그래픽 튜토리얼

HTML5 온라인 매뉴얼

위 내용은 HTML5 입력 새 유형 속성 색상 색상 선택기 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jb51.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!