当前位置:帮我工作网 > 网页作业知识 >

html5网页设计作业中form表单的几个属性

在期末网页设计作业中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表单的几个属性” 这篇文章能给学习制作网页作业的同学们有所帮助
上一篇:dreamweaver网页作业里不用的站点怎么删除?

下一篇:Dreamweaver发布网页设计作业网站

学生网页设计作业成品怎么发送呢
. 邮箱传送
. Q Q 传送
. 旺旺传送
学生网页设计作业成品有什么保障呢
. 官方优质模板
. 描述100%一致
. 诚信服务
. 安全交易
. 售后保障
学生网页设计作业成品有什么服务呢
. 协助修改页面信息
. 多渠道沟通
. 1:1售后指导
学生网页设计作业成品怎么支付呢
. 在线支付
. 线下汇款
. 财付通
. 支付宝
帮我作业网服务介绍
. 大学生作业模板
. 定制大学生作业
. 商家信息发布
. 学生作业任务发布

2005-2012 版权所有:帮我工作网 并保留所有权利

京ICP备11037944号-4 E-mail: 2932963541@qq.com , 1826816020@qq.com

乘车路线:2路 11路 38路珠江道路南国际新源大厦B座1104

联系帮我作业网 联系帮我作业网网页设计制作老师 帮我作业网 work85

收缩
  • 联系帮我作业网客服