Home > Article > Web Front-end > HTML5 input new type attribute color color picker example code

HTML5 input new type attribute color color picker example code

青灯夜游forward: 2018-10-09 15:52:384174browse

The type attribute specifies the type of input element. This article introduces you to the example code of the new type attribute color color picker in HTML5 input in more detail. Friends who are interested can follow the editor of Script Home to take a look

Definition and usage

The type attribute specifies the type of the input element.

Note: This attribute is not required, but we think you should always use it.

HTML5 input new type attribute color color picker example code

<!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>

Let’s take a look at the HTML 5 type attribute

Attribute value

Value	Description
button	Define a clickable button (mostly used with JavaScript to launch a script)
checkbox	Define checkbox.
color	Define the color picker.
date	Define the date field (with calendar control)
datetime	Define the date field (With calendar and time controls)
datetime-local	Define date fields (with calendar and time controls)
month	Define the month of the date field (with calendar control)
week	Define the week of the date field (with calendar control)
time	Define the hour, minute, and second of the date field (with time control)
email	Define text field for e-mail address
file	Define input field and "Browse..." button for file upload
hidden	Define hidden input field
image	Define image as submit button
number	Define the number field with spinner control
password	Define the password field. Characters in the field are masked.
radio	Define radio buttons.
#range	Define a numeric field with a slider control.
reset	Define the reset button. The reset button will reset all form fields to their initial values.
search	Define the text field used for searching.
submit	Define the submit button. The submit button sends data to the server.
tel	Define the text field used for the phone number.
text	Default. Define a single-line input field where users can enter text. The default is 20 characters.
url	Define the text field used for the URL.

Summary

The above is the introduction to the new type attribute color color of HTML5 input. The entire content of the pickup, I hope it will be helpful to everyone's learning. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of HTML5 input new type attribute color color picker example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Html5 video upload preview image video, set and preview the poster frame of a certain second of the videoNext article：Html5 video upload preview image video, set and preview the poster frame of a certain second of the video

See more

HTML5 input new type attribute color color picker example code

Related articles