HTML5表单元素详解-优快云博客

本文详细介绍了HTML5中新增的表单元素及其属性，包括各种类型的input元素如email、tel、url、number等，以及下拉框和多选功能。探讨了这些元素如何提升用户体验和简化数据验证。

一.表单
1.input
type=“email”提供了，默认的电子邮箱的完整验证：要求必须包含@符号同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交
type=“tel”他并不是用来验证。它的本质目的是为了能够在移动端打开数字键盘，意味着限制了用户只能输入数字。如何查看效果：qq发送文件>>手机端使用qq来接收>>使用浏览器查看
type=“url”验证只能输合法的网址，必须包含http
type="number"只能输入数字，包含小数点，不能输入其他的东西；max最大值,min最小值,value：默认值
type=“search” 可以提供共人性化的输入体验
type=“range” 范围
type=“color”
type="time"十秒分
type="date"年月日
大多数浏览器不能支持datetime，只能苹果下面的safari支持
type="datetime-local"时间和日期

placeholder=“你需要提示的内容”
autofocus 自动获取焦点
autocomplete=“on打开/off关闭” ：自动完成（在提交过一遍再回到页面填写此空时会有历史提交记录）
1.必须成功提交过，提交过才会记录 2.当前添加autocomplete的元素必须有name值
required：必须输入，如果没有输入则会阻止当前数据提交
parttern：正则表达式验证 *：代表任意个？：代表0个或1个 +：代表1个或多个

<input type="tel" required  partern="^(\+86)?1\d{10}$">

multiple:上传文件时可以多选，在email中可以同时填写多个地址，以逗号隔开

2.下拉框
1.最简单的下拉框

<section>
        <option value="a"></option>
        <option value="b"></option>
        <option value="c"></option>
    </section>

2.不仅可以选择还可以输入的下拉框

<input type="text" list="subjects">
    <datalist id="subjects">
        <!-- 创建选项值：value：具体的值  label：提示信息，辅助值 -->
        <!-- 建立输入框与datalist的关联  list="datalist"的id号 -->
        <!--  option可以是单标签也可以是双标签-->
        <option value="a" label="aaaa"></option>
        <option value="b" label="aaaa"></option>
        <option value="c" label="aaaa"></option>
    </datalist>
    <!-- 如果input输入框的type类型是url，那么value值必须添加http:// -->