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

yumo66610个月前 (04-29)技术文章87

在编写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页面布局的。无序列表语...

JavaScript 控制文本框和文本域(js设置文本框内容)

文本框是表单中与用户打交道最多的元素之一,它包括单行文本框<input type="text">和多行文本框<textarea>,更广义的还可以包括密码输入框&...

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

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

学习web前端开发,需要掌握哪些知识?

可以按照我的教学框架学习,能都掌握也就满足企业目前的人才需求。一、PC端页面重构1、认知行业、岗位、部分专业术语,就业趋势与行业未来展望;2、HTML5核心元素及布局应用;3、CSS3核心属性及布局应...

PHP入门读书笔记(十六):WEB页面使用PHP

Web表单主要用来在网页中发送数据到服务器,经过程序处理中,将用户所需要的信息再传递给客户端的浏览器上。这样就形成了一个浏览者和网站之间的一个互动。一、表单的提交方式<form name=’NA...