HTML5学习笔记——form

1、form属性

在HTML4中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>form属性</title>
</head>
<body>
<form action="" id="testform">
<input type="text" name="" />
</form>
<textarea form="testform" name="" cols="30" rows="10"></textarea>
</body>
</html>

input元素从属于表单,它呗书写在表单内部,用不着再对它制定form属性。textarea元素呗书写在表单之外,但它从属于表单,所以表单的id制定给textareea元素的form属性。

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加,因为它们不是被分散在各表单之内的了。

2、formaction属性

在HTML4中,一个表单内的所有元素都只有通过表单的action属性统一提交到另一个页面,而在HTML5中可以给所有的提交按钮,诸如<input type=”submit” value=”" />、<input type=”image” src=”" alt=”" />、<button type=”submit”></button>都增加不同的formaction属性,使得点击不同的按钮,可以将表单提交到不同的页面。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>formaction属性</title>
</head>
<body>
<form action="serve.php" id="testrorm">
<input type="submit" value="v1" name="s1" formaction="s1.php" />提交到S1
<input type="submit" value="v2" name="s1" formaction="s2.php" />提交到S2
<input type="submit" value="v3" name="s1" formaction="s3.php" />提交到S3
</form>
</body>
</html>

3、formmethod属性

在HTML4中,一个表单内只有一个action属性来对表单内所有元素统一指定提交页面,所以每个表单也只有一个method属性来指统一指定提交方法。在HTML5中,可以使用formaction属性来对每个表单元素分别指定不同的提交页面,同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>formmethod属性</title>
</head>
<body>
<form action="serve.php" id="testrorm">
<input type="submit" value="v1" name="s1" formaction="s1.php" formtmehod="get" />提交到S1
<input type="submit" value="v2" name="s1" formaction="s2.php" formtmehod="post" />提交到S2
<input type="submit" />
</form>
</body>
</html>

4、placeholder属性

placeholder是指当文本框(input type=”text” 或 textarea)处于未输入状态并且未获取焦点时,模糊显示输入提示文字。
实现方法非常简单,只要加上placeholder属性,然后制定提示文字就可以了。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>placeholder属性</title>
</head>
<body>
<input type="text" placeholder="默认文字" />
</body>
</html>

5、autofocus属性

给文本框,选择框或按钮控件加上该属性。当页面加载时,该控件自动获取光标焦点。目前为止要做到这一点需要使用JavaScript,譬如“control.focus()”。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>autofocus属性</title>
</head>
<body>
<form action="serve.php" id="testrorm">
<input type="text" autofocus />
</form>
</body>
</html>

6、list属性

在HTML5中,给单行文本框(input type=”text”)增加了一个list属性,该属性的值为某个detalist元素的id。detalist元素的HTML5中新增的元素,该元素类似于选择框(select),但是当用户想要设定的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误,可以用css等将它设置为不显示。
从实用角度来说,请不要随便滥用该属性。强烈建议只有当一个页面是以使用某个控件为主要目的时,才对该控件使用autofocus属性,譬如搜索页面中搜索文本框。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>list属性</title>
</head>
<body>
text:<input type="text" name="btcss" list="btcss" />
<!-- 使用style="display:none;"将datalist元素设为不显示 -->
<datalist id="btcss" style="display: none;">
<option value="btcss1">btcss1</option>
<option value="btcss2">btcss2</option>
<option value="btcss3">btcss3</option>
</datalist>
</body>
</html>

为什么没有把input元素与datalist元素结合为一个元素,像其他语言中的可输入下拉框那样?这是基于兼容性的考虑——在不支持HTML5的浏览器中,可以忽略datalist元素,以便正常输入以及用脚本编程的方式对input元素执行其他操作。

7、autocomplete属性

辅助输入所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以存在圈圈隐患,但只要使用autocomplete属性,安全性就可以得到很好的控制。

对于autocomplete属性,可以制定“on”、“off”与“”(不指定)这三种值。不指定时,使用浏览器的默认值(取决于各浏览器的决定)。把该属性设为on时,可以显示指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>autocomplete属性</title>
</head>
<body>
text1:<input type="text" name="btcss" list="btcss" />
text2:<input type="text" name="btcss" autocomplete="on" list="btcss" />
<!-- 使用style="display:none;"将datalist元素设为不显示 -->
<datalist id="btcss" style="display: none;">
<option value="btcss1">btcss1</option>
<option value="btcss2">btcss2</option>
<option value="btcss3">btcss3</option>
</datalist>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索form
, 表单
, 页面
, 属性
, 元素
, html form属性
, 一个
form表单元素
,以便于您获取更多的相关知识。

时间: 2024-09-26 23:35:22

HTML5学习笔记——form的相关文章

HTML5学习笔记——input

在HTML5中,大幅度地增加与改良了input元素的种类,可以简单的使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能. 到目前为止,对于这些input的种类来说,支持得最多.最全面的是Opera浏览器(也可以进行多浏览器的比较FireFox.Safari.Chrome.Opera).对于不支持新增input元素的浏览器来说,统一这些input元素视为text类型.另外,HTML5中也没有规定这些元素再各浏览器中的外观形式,所以同样input元素再不同的浏览器中可能会

HTML5入门教程之HTML5学习笔记

html5揭秘   先把form一类的代码发上来吧.觉得HTML5的input标签,几乎把之前用过的js验证全部pass了, input中的文本占位. 常用的数据验证,如email.url.min.max.required等. 数值的选择方便直接的可以用拖动滑块的方式.  代码如下 复制代码 <form> <!--HTML5添加了占位文本--> text属性可以有占位文本<input style="width:200px" name="q&quo

HTML5学习笔记:HTML5 Video元素

  现在互联网视频大都使用Flash来实现.但是不同的浏览器可能使用不同的插件.在HTML5中则提供了一个统一的方式来展示视频内容.HTML5 video在Internet Explorer 9, Firefox, Opera, Chrome, 和Safari都支持.IE8及其更早的浏览器不支持.  代码如下 复制代码 <SPAN style="COLOR: #000000"><video width="320" height="240&

HTML5 video标签(播放器)学习笔记(一):使用入门

 HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做的哪些工作. 网上的教程其实也不少了 w3cschool里面的最为简单而详细,那么这几介绍的是一些更为直接的应用. 本文目录: 1.使用标签 2.加上一些必要参数 3.自动播放或自动加载 4.规范播放器 第一步:使用标签 使用的方法很简单,就是一句代码: 代码如下: <video></vi

HTML5 video标签(播放器)学习笔记(二):播放控制

HTML5 video标签(播放器)学习笔记(二):播放控制 本文的目录: 1.获取影片总时长 2.播放.暂停 3.获取影片已播放时间和设置播放点 4.音量的获取和设置 第一.获取影片总时长 对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的.在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素 代码如下: <video id="myVideo" controls prelo

web 前端学习笔记(1)

<span style="color: rgb(255, 0, 0); "><strong>HTML5 学习</strong></span> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网站</title> </head> <body> 学

PHP输入输出流学习笔记

  这篇文章主要介绍了PHP输入输出流学习笔记,PHP输入和输出流是通过php://来访问的,它允许访问 PHP 的输入输出流.标准输入输出和错误描述符,内存中.磁盘备份的临时文件流以及可以操作其他读取写入文件资源的过滤器,需要的朋友可以参考下 PHP输入和输出流是通过php://来访问的,它允许访问 PHP 的输入输出流.标准输入输出和错误描述符, 内存中.磁盘备份的临时文件流以及可以操作其他读取写入文件资源的过滤器. php://stdin, php://stdout 和 php://std

一份ASP学习笔记(连载)

笔记 ASP学习笔记(一) 1. 突出显示文字 <em>要显示的文字</em>2. 根据用户选择,做出相应的反应(在客户端实现) SELECT CASE Document.Form1.card.options(selectedIndex).Text Case "value1" Option1 Case "value2" Option2 ...... END SELECT3. VBScript 的 Sub函数不返回值 Function 函数将返

J2ME学习笔记(八)

笔记 今天买了2.5磅咖啡豆,星巴克的.有点点贵,用了599大洋,呵呵,偶尔奢侈一下也不为过嘛.刚刚磨了一杯咖啡,点上烟,呵呵,继续开始j2me的学习历程.虽说今天星期六,可是估计今天看不了多少,明天要去公司加班,所以今天还是要早点休息...想想前几个星期,soho的时候每天晚上就是我的工作时间,白天嘛..嘿嘿,睡觉...那真是幸福呀...好日子不再咯... 呵呵,TextBox,好像看名字就知道干什么的了,HTML里面的输入框.呵呵,感觉应该差不多.写一个(和TextBox有相同使用方法的还有