在期末
网页设计作业中html5网页
作业和css3越来越收到老师喜爱，因此很多
网页作业的老师都喜欢布置html5
网页作业的
网页制作作业，可是在课堂上学习的内容不多，有很多同学对此不是很了
解，今天
帮我工作网为同学们介绍一下html5网页作业网页作业中的常用表单元素的属性和应用。
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>
希望帮我工作网的 “html5
网页设计作业中form表单的几个属性” 这篇文章能给学习制作网页作业的同学们有所帮助
2656895362
work85
