[北大青鸟广州新嘉华]HTML5 表单属性有哪些?(1)

yumo6662个月前 (04-29)技术文章22

在编写HTML5页面时,我们很多时候都需要用到表单属性,那么HTML5作为一个新晋IT界红人,HTML5表单属性有哪些呢?今天先来分享一下其中的<form> / <input> autocomplete 属性、<input> autofocus 属性、<input> form 属性以及<input> formaction 属性。

<form> / <input> autocomplete 属性

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

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。

注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

实例

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

<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>

提示:某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。

<form> novalidate 属性

novalidate 属性的一个boolean 属性.

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

实例

无需验证提交的表单数据

<form action="demo-form.php" novalidate>

E-mail: <input type="email" name="user_email">

<input type="submit">

</form>

<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

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

实例

让 "First name" input 输入域在页面载入时自动聚焦:

First name:<input type="text" name="fname" autofocus>

<input> form 属性

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

提示:如需引用一个以上的表单,请使用空格分隔的列表。

实例

位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="demo-form.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

Last name: <input type="text" name="lname" form="form1">

<input> formaction 属性

The formaction 属性用于描述表单提交的URL地址.

The formaction 属性会覆盖<form> 元素中的action属性.

注意: The formaction 属性用于 type="submit" 和 type="image".

实例

以下HTMLform表单包含了两个不同地址的提交按钮:

<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="Submit"><br>

<input type="submit" formaction="demo-admin.php"

value="Submit as admin">

</form>

了解更多计算机相关知识,可登陆北大青鸟广州新嘉华官网查看,或联系在线值班老师了解详情。

相关文章

初识HTML——列表标签和表单标签(html列表标记)

列表标签在html中列表分为无序列表、有序列表和自定义列表(项目列表)。接下来就看看他们有什么不同吧!作用:如果说table标签是用来显示数据的,那么列表标签就是用来进行html页面布局的。无序列表语...

HTML表单4(form的action、method属性)——零基础自学网页制作

表单的工作过程表单的信息发送与处理过程可以简单的进行图示,如下图。以注册会员为例,用户在自己的电脑上打开相应的注册表单页面填写信息,完成填写后点击提交按钮,也就是图中1所示过程。这时浏览器会将这些信息...

超文本标记语言表单标签详解,教你如何合理利用表单收集用户信息

无论我们使用什么语言来完成web开发,都必然会用到HTML表单标签,HTML表单标签在开发中经常会被我们用来去收集我们想要得到的数据信息,基本上所有的网页都有表单的利用,表单合理的使用和布局是作为一个...

HTML基础知识(三) HTML标签知识2(html标签及作用)

6.图像标签和路径(1) <img>标签用于定义图像,src为必须属性(2) 特点:属性采取键值对的格式,即key="value"(3) 路径a.目录文件夹和根目录(目录文...

DOM - 根据ID访问HTML元素(根据id获取元素的jquery方法)

根据ID访问HTML元素如下方法实现document.getElementById(idVal):返回文档中id属性值为idVal的HTML元素。上面这个方法简单易用,只要被访问HTML元素具有唯一的...

6款优秀的报表表单设计器(如何设计报表)

VeryReport填报设计器VeryRepor表单设计器功能特点如下:1、拖拽式表单控件通过拖拽完成填报表单设计不同数据源单元设置任意数据库字段,实现任意复杂填报应用2、全面的表单控件支持文本、文本...