HTML5 学习笔记DAY3

关注

原创最新推荐文章于 2026-07-13 10:07:58 发布 378 阅读 AI 写同款· GEO 优化 ›

前端基础入门（11）input color 拾色器将标签的type属性值设置为"color"即可创建一个拾色器。拾色器功能是HTML5新增。 <!DOCTYPE html> <``html``> <``head``> <``meta charset``=``" utf-8"``> <``meta name``=``"author" content``=``"[http://www.softd... 阅读详情

HTML5 新元素

七.HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

1.Input 类型: color

color 类型用在input字段主要用于选取颜色

如下所示：从拾色器中选择一个颜色:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

</body>
</html>

2.Input 类型: date

date 类型允许你从一个日期选择器选择一个日期。

定义一个时间控制器:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

3.Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区).

定义一个日期和时间 (无时区):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

在这里插入图片描述

4.Input 类型: email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值是否合法有效:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>

</body>
</html>

在这里插入图片描述
5.Input 类型: month

month 类型允许你选择一个月份。

定义月与年 (无时区):
生日 (月和年):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

</body>
</html>

6.Input 类型: number

number 类型用于应该包含数值的输入域。

定义一个数值输入域(限定):
数量 ( 1 到 5 之间 ):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

<p><b>注意:</b>Internet Explorer 9 及更早 IE 版本不支持 type="number" 。</p>

</body>

使用下面的属性来规定对数字类型的限定：
在这里插入图片描述
7.Input 类型: range

range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条。

定义一个不需要非常精确的数值（类似于滑块控制）:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p>

</body>
</html>

在这里插入图片描述
用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

8.Input 类型: search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

定义一个搜索字段 (类似站点搜索或者Google搜索):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

</body>
</html>

9.Input 类型: tel

定义输入电话号码字段:

<body>

<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

</body>

10.Input 类型: time

time 类型允许你选择一个时间。

<form action="demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

11.Input 类型: url

url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。

定义可输入时间控制器（无时区）：

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

12.Input 类型: week

week 类型允许你选择周和年。

定义周和年 (无时区):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>

<body>

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

</body>
</html>

八.HTML5 表单元素

1.HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input
域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.

2.HTML5 <keygen> 元素
`

<keygen> 元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>

</body>
</html>

3.HTML5 元素

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>注意:</strong> Edge 12及更早 IE 版本的浏览器不支持 output 元素。</p>

</body>

九.HTML5 表单属性

1.<form> / <input> autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于标签，以及以下类型的标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form 的 autocomplete 属性为  "on"（开），但是 e-mail 自动为“off”（关）。</p>

</body>
</html>

2.<form> novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<p><strong>注意：</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>

</body>

</html>

3.<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

让 “First name” input 输入域在页面载入时自动聚焦：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。</p>

</body>
</html>

4.<input> form 属性

form 属性规定输入域所属的一个或多个表单。

提示:如需引用一个以上的表单，请使用空格分隔的列表。
位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formaction 属性。</p>

</body>
</html>

5. formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

主要: 该属性与 type=“submit” 和 type=“image” 配合使用。

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-post-enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formenctype 属性。</p>

</body>
</html>

6. formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formmethod 属性。</p>

</body>
</html>

7. formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了元素在表单提交时无需被验证。

formnovalidate 属性会覆盖元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

两个提交按钮的表单(使用与不适用验证 ):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 formnovalidate 属性。</p>

</body>
</html>

8. formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖元素的target属性.

注意: formtarget 属性与type=“submit” 和 type="image"配合使用.

两个提交按钮的表单, 在不同窗口中显示:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formtarget 属性。</p>

</body>
</html>