【50】HTML5(4)—— 新增③表单标签

最新推荐文章于 2025-02-26 13:40:55 发布

原创最新推荐文章于 2025-02-26 13:40:55 发布 · 219 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

前端基础专栏收录该内容

79 篇文章

订阅专栏

本文介绍了HTML5中新增的输入标签类型，包括email、url、date、time等，以及新增的表单属性，如required、placeholder、autofocus等。通过示例代码展示了如何使用这些新特性来创建更丰富的表单交互，提升用户体验。

★文章内容学习来源：拉勾教育大前端就业集训营

一、新增输入标签

1.`<input>`表单类型属性值

回顾
已学表单输入标签<input>的type属性属性值:
点击回顾【12】HTML基础（3）——HTML常用标签⑧表单相关标签
以下简要罗列：

属性名	属性值	描述
`type`	`text`	单行文本输入框
	`password`	密码输入框
	`radio`	单选框
	`checkbox`	复选框
	`button`	普通按钮
	`reset`	重置按钮
	`submit`	提交按钮
	`image`	图像形式的按钮
	`file`	定义输入字段和"浏览"按钮，供文件上传

HTML5新增：

属性	属性值	描述
`type`	`email`	限制用户输入必须为Email类型
	`url`	限制用户输入必须为URL类型
	`date`	限制用户输入必须为日期类型
	`time`	限制用户输入必须为时间类型
	`month`	限制用户输入必须为月类型
	`week`	限制用户输入必须为周类型
	`number`	限制用户输入必须为数字类型
	`range`	滑动条
	`tel`	手机号码
	`search`	搜索框
	`color`	生成一个颜色选择表单

1.1举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增input表单类型</title>
</head>
<body>
  <form action="">
    姓名： <input type="text"><br>
    邮箱: <input type="email"><br>
    个人网站：<input type="url"><br>
    生日：<input type="date"><br>
    填表时间：<input type="time"><br>
    填表月份：<input type="month"><br>
    填表周数：<input type="week"><br>
    年龄：<input type="number" max="100" min="0" step="2" value="22"><br>
    年龄范围：<input type="range" max="100" min="0" step="2" value="22"><br>
    手机号码： <input type="tel"><br>
    搜索框： <input type="search"><br>
    喜欢颜色: <input type="color"><br>
    喜欢城市：<input type="text">
    <input type="submit" value="提交">
  </form>
</body>
</html>

在这里插入图片描述

2.新增`<datalist>` 标签

简介
<datalist> 标签规定了<input>元素可能的选项列表。
<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入
过程中，会自动响应<option>元素的值。
绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。

1.2举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增input表单类型datalist标签</title>
</head>
<body>
  <form action="">
    喜欢城市：<input type="text" list="list01">
    <datalist id="list01">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>
      <option value="北京">bj</option>
      <option value="上海">
      </datalist>
    <input type="submit" value="提交">
  </form>
</body>
</html>

在这里插入图片描述

二、新增表单属性

1.汇总

属性	值	描述
`required`	`required`	表单拥有该属性表示其内容不能为空，必填
`placeholder`	提示文本	表单的提示信息，存在默认值将不显示
`autofocus`	`autofocus`	自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放`1个`
`autocomplete`	`off / on`	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 `autocomplete=“on”`，关闭 `autocomplete ="off"` ，需要放在表单内同时加上`name`属性，同时成功提交
`multiple`	`multiple`	可以多选文件提交

2.1举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增表单属性</title>
</head>
<body>
  <form action="">
    姓名： <input type="text" required="required" placeholder="请填入用户名" value="比如：zhangsan"><br>    
    年龄：<input type="number" max="100" min="0" step="4" value="4"><br>
    搜索框： <input type="search" autofocus="autofocus" autocomplete="off" name="sousuo"><br>
    城市：<input type="text" list="list01">
    <!-- 预定义一些选项 -->
    <datalist id="list01">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>
      <option value="北京">bj</option>
      <option value="上海">
    </datalist>
    文件： <input type="file" multiple="multiple">
    <input type="submit" value="提交">
  </form>
</body>
</html>