没有合适的资源?快使用搜索试试~ 我知道了~
HTML表单基础知识.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 64 浏览量
2022-07-14
10:21:31
上传
评论
收藏 180KB PDF 举报
温馨提示
试读
11页
HTML表单基础知识.pdf
资源推荐
资源详情
资源评论
序言
每个人都曾看到过和用过表单,不过你曾写代码创建过一个表单吗?
表单是网页上用于输入信息的区域, 例如向文本框中输入文字或数字, 在方框中打勾,
使用单选按钮选中一个选项, 或从一个列表中选择一个选项等。 在你按下提交按钮后, 表单
就被提交到网站。
表单在网上随处可见,它们被用于在登录页面输入用户名和密码,对博客进行评论,
在社交网络网站填写个人信息,或在购物网站指定记账信息等。
创建表单并不难,但要创建出符合 Web 标准的表单又是怎么样的呢?如果你已经通
读了本课程前面的所有文章,也许已认识到 Web 标准是规范网页编写工作的好方式。因
此,创建一个符合 Web 标准的、可访问性好的表单,并不比以不符合规范的代码编写一
个不符合 Web 标准的表单更费力。
在本篇文章中, 我将一步一步讲述如何创建 HTML 表单,从最基本和最简单的表单到
更复杂的表单。在学习完本篇文章后,你们应该就能掌握使用 HTML 创建有效的、可访问
性好的表单的基础知识。本篇文章的内容目录如下:
第一步:基本代码
第二步:添加结构和行为
第三步:添加语义、样式和更多的结构元素
总结
延伸阅读
练习题
第一步:基本代码
我们从创建一个简单的评论表单开始,评论表单可用于让访问者对网站上的内容如文
章等发表评论, 还可用于让不知道你邮箱地址的访问者在表单中输入信息, 与你联系。 这种
评论表单的代码如下:
<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25"
rows="3"></textarea>
<input type="submit" value="submit" />
</form>
如果你把以上代码输入一个 HTML 文档,然后用浏览器打开这个文档, 代码将被渲染
为如图 1 所示的样子。
图 1:一个简单的表单示例
请自己动手将以上的代码输入你自己的样本 HTML 文档,并在浏览器中载入这个文
档,或是 点击这里观看在一个单独页面显示的表单 。你们可以试着对代码做些改动, 看看表
单会发生什么变化。
在以上这段代码中,你们看到有一个 <form> 开始标签和一个 </form> 结束标签,
以及在这两个标签之间的一些信息。 这个元素内包含两个用于让访问者输入名字和电子邮
件地址的文本输入框,以及一个用于发表和提交评论的文本区域。
以下是对表单代码的分析:
<form></form> :这两个标签是创建一个表单所需的基本标签,每一个表单
都必须以 <form> 标签起始,并以 </form> 标签结束。
<form> 标签可有几个属性, 这些属性将在以下第二步中再讲述。 有一点你们必须
注意,那就是不能在一个表单内再嵌套一个表单。
<input> (如果你使用 XHTML 文档类型,则应写为 <input /> ):这个
标签定义了那些可以输入信息的区域。在以上这个示例表单中, input 标签定义
了网站访问者可以输入名字和电子邮件地址的文本框。
每个 input 标签都必须有一个定义接受类型的 type 属性,其可能的属性值包
括: text (文本框), button (按钮), checkbox (复选框), file (文件),
hidden (隐藏字段), image (图像), password (密码框), radio (单选
按钮), reset (重置按钮), submit (提交按钮)。
每个 <input> 标签还必须有一个名字 (除了一些特殊情况, 需要将 value 属性
值始终设为和 type 属性值一样,如 type="submit" 或 "reset" ),做为编
码人员的你就可以决定这件事。 name 属性定义提交表单时数据字段的名称(如一
个数据库,或是通过服务器端的脚本发送给网站管理员的电子邮件)。当表单被提
交时,绝大多数脚本都使用 name 属性来将表单数据放入数据库,或放入可供人
阅读的电子邮件。
因此,如果 <input> 元素是用于让网站访问者输入其名字的,则 name 属性可
以为 name="name" 或 name = "first name" 等。如果 <input> 标签是用
于输入电子邮件地址, 则 name 属性可以为 name="email" 。为让你更容易地创
建表单, 并让使用表单的人更容易使用, 建议你以语义化的方式为 <input> 元素
命名。
所谓语义化的方式,我指的是像上面那样,根据其功能为其命名。如果要输入的数
据是电子邮件地址,则把其命名为 name="email" 。如果要输入的数据是网站访
问者的街道地址, 则把其命名为 name="street-address" 。使用的命名词语越
准确,不仅让你编写表单代码变得更容易,而且让你以后做维护网站的工作时也更
为轻松,同时还让接收表单的人或数据库更容易解释数据。 我们需要多思考一会儿,
选择精确的名称。
每个 <input> 标签还必须有一个 value 属性。 value 属性值可以为空,
即 value="" ,这将告诉处理脚本插入网站访问者在表单框里输入的任何数据。 对
于复选框、单选按钮、隐藏字段、提交按钮,或其它类型的属性,你可以为其设置
你希望的默认值。 在其它一些情况下, 如对 “提交按钮 ”或“隐藏字段 ”类型, 你将其值
设为等于最终的输入。例如, value="yes" 代表 “是”,提交按钮设为
value="submit" ,重置按钮设为 value="reset" ,隐藏的重定向字段设为
value=http://www.opera.com 等。
以下是一些如何使用 value 属性的示例:
空值属性,由用户的输入决定属性值:
o
代码为: <input type="text" name="first-name"
id="first-name" value="" />
o
用户输入: Jenifer
o
当表单提交时, first-name 的值以 “Jenifer ”发送。
预定值:
o
代码为: <input type="checkbox" name="mailing-list"
id="mailing-list" value="yes" />
o
用户在方框里打勾,代表他们希望加入网站的邮件列表。
剩余10页未读,继续阅读
资源评论
ll17770603473
- 粉丝: 0
- 资源: 6万+
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功