HTML5表单

最新推荐文章于 2022-09-01 10:25:09 发布

漂流の少年

最新推荐文章于 2022-09-01 10:25:09 发布

阅读量217

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： css html

本文链接：https://blog.csdn.net/YINZHE__/article/details/118355051

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.HTML表单特性

①新的控件类型，如URL输入框、Email输入框

②日期选择器和颜色选择器

借助相关框架，如Dojo、YUI等类库

③改进文件上传控件

一个控件可以上传多个文件，自行规定上传文件的类型，甚至设定每个文件最大的大小

④内建表单校验系统

如必填项required属性，为数字类型控件提供max、min等

⑤XML Submission

一种新的数据格式，服务器端将直接收到XML形式的表单数据

⑥外联数据源

HTML5支持data属性，为select控件提供外联数据源

⑦ repeat的模型

2.新的input类型

①email类型，提交表单的时候会自动验证

②url类型，用于输入url地址，url需以http://或https://开头

③number数字框，用于输入数值。可设定输入数字的范围

step=4表示只能输入4的倍数

④range也是用于输入一定范围内的数字，在网页中显示为滑动条

⑤date pickers日期选择器

6种：date,month,week,time,datetime,datetime-local

⑥search搜索框

⑦tel用于输入电话号码框

⑧color拾色器

3.新的input属性

①autocomplete自动完成

帮助用户在输入框中实现自动完成输入，取值包括on和off

适用于input类型：text、search、url、telephone、email、password、datepickers、range和color

也适用于form元素

会自动记录用户输入的信息

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<title>数据列表</title>
</head>
<body>
<h2>输入你喜欢的城市名称</h2>
<form autocomplete="on">
    <input list="cities" />
    <datalist id="cities">
	   <option value="BeiJing">
	   <option value="QingDao">
	   <option value="QingHai">
    </datalist>
</form>
</body>
</html>

②autofocus自动获取焦点

用法：<input type=”text” name=”fname” autofocus=” autofocus”>

在同一个页面中只能指定一个autofocus对象

③form属性

设置表单控件归属的表单，这样表单控件可以放到<form></form>之外

④表单重写

HTML5新增5个表单重写属性

formaction: 重写form标签的action属性

formenctype: 重写form标签的enctype属性

formmethod: 重写form标签的method属性

formnovalidate: 重写form标签的novalidate属性

formtarget: 重写form标签的target属性