表单H5新增属性和常用标签

表单是网页上用来收集用户信息的区域,由文本域、复选框、单选框、菜单、文件址域、按钮等表单元素组成。
<form>标签用于创建一个表单,其基本语法如下所示:

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

在上面的语法中,
name属性用来区分一个网页中的多个表单;
action属性用于指定接受并处理表单数据的服务器url地址;
method属性用于设置表单数据的提交方式,其取值可以为get/post,默认为get。

method属性详解——W3school

HTML5新增的表单属性

(1)autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能,所谓“自动完成”是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表里,以实现自动完成输入。
autocomplete属性有2个值,具体如下:
on 表单有自动完成功能
off 表单无自动完成功能
在这里插入图片描述
(2)novalidate属性
novalidate属性用于指定在提交表单时取消对表单进行有效的检查。
为表单设置该属性时,可以关闭整个表单的验证,这样可以使form内的所有表单控件不被验证。

常用标签:

<input>标签

表单中最核心的就是<input>标签,使用<input>标签可以在表单中定义输入框、单选按钮、复选框、重置按钮等。
表单中最为核心的就是<input>标签,使用<input>标签可以定义文本输入框、单选按钮、复选框、重置按钮,其基本语法如下:

<input type="控件类型"/>

在上面语法中,type属性为最基本的属性,取值有多种,用来指定不同的控件类型,除type属性外,还可以定义很多其它属性,常用属性如name、value、size等。
<textarea>标签用于定义多行文本框,可以通过cols和rows属性来规定文本区域内可见的列数和行数,具体的尺寸可以通过width和height来设置。

<textarea row="" cols="">这里是文本</textarea>
属性允许取值取值说明
name由用户定义控件的名称
readonlyreadonly该控件内容为只读(不能编辑修改)
disableddisabled第一次加载页面时禁用该控件(显示为灰色)
maxlength正整数控件允许输入的最多字符数
autofocusautofocus指定页面加载后是否自动获取焦点
placeholder字符串为input类型的输入框提供一种提示
requiredrequired规定输入框填写的内容不能为空
colsnumber规定文本区的可见宽度
rowsnumber规定文本区内的可见行数
<label>标签

<label>标签用于为<input>标签定义标注(标记),当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

<lable>标签具体用法如下案例:
在这里插入图片描述
<label>标签的for属性值应当与相关标签的id属性相同。
页面效果图:
在这里插入图片描述
单击“女”字,单选按钮同样被选中,这就是<label>标签与<input>标签绑定的作用。
在这里插入图片描述

<select>标签

<select>标签可创建单选或多选菜单,其语法格式具体如下:
在这里插入图片描述
<select>标签中的<option>标签用于定义列表中的可用选项。
<select>标签的常用属性。
在这里插入图片描述

<datalist>标签

<datalist>标签用于定义输入域的选项列表,即与<input>标签配合定义<input>标签可能的值。
列表通过<datalist>标签内的<option>标签创建,可以使用<input>标签的list属性引用<datalist>标签的id属性,具体用法如下:
在这里插入图片描述
页面效果图:
在这里插入图片描述

<keygen>标签

<keygen>标签是密钥对生成器(key-pair-generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。具体用法如下:

在这里插入图片描述
在这里插入图片描述

<output>标签

<output>标签用于定义不同类型的输出,如脚本输出的示例代码如下:
在这里插入图片描述
onforminput属性的值对应脚本的方法名。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值