职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 1632|回复: 5

初学好文:HTML网页表单制作详细讲解

[复制链接]
难忘童安格 发表于 2007-8-14 11:19 | 显示全部楼层 |阅读模式
  表单是一个网站和访问者开展互动的窗口,我们现在就给大家介绍一下表单的一些基本知识和表单美化方法。
  初识表单
  表单可以用来在网页中发送数据,特别是经常被用在联系表单-用户输入信息然后发送到Email中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程,开发一个服务器端的程序使一个发送到Email的表单工作。
  表单元素
  实际用在HTML中的标签有form、 input、 textarea、 select和option。表单标签form定义的表单里头,必须有行为属性action,它告诉表单当提交的时候将内容发往何处。
  可选的方法属性method告诉表单数据将怎样发送,有get(默认的)和post两个值。常用到的是设置post值,它可以隐藏信息(get的信息会暴露在URL中)。网页教学网
  所以一个表单元素看起来是这样子的:
<form action=\"reg.asp\" method=\"post\">
</form>   input标签在表单制作中起到的作用很重要。有10种形式,概括如下:
<input type=\"text\" />是标准的文本框。它可以有一个值属性value,用来设置文本框里的默认文本。
<input type=\"password\" /> 像文本框一样,但是会以星号代替用户所输入的实际字符。
<input type=\"checkbox\" />是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked,像这样的格式<input type=\"checkbox\" checked=\"checked\" />. 网页教学网
<input type=\"radio\" /> 与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked,使用方法跟复选框一样。 网页教学网

<input type=\"file\" /> 是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。 网页教学网
<input type=\"submit\" /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本(下面的button和reset类型也可以这样,稍后介绍),如下: <input type=\"submit\" value=\"Ooo. Look. Text on a button. Wow\" />.
<input type=\"image\" />以图像代替按钮文本,src属性是必须的,像img标签一样。
<input type=\"button\" />是一个如果没有其他代码的话什么都不做的按钮。
<input type=\"reset\" /> 是一个点击后会重置表单内容的按钮。
<input type=\"hidden\" /> 不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。  注意输入标签input也是用“/>”自关闭的。
  多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols,用法像这样:网页教学网
<textarea rows=\"5\" cols=\"20\">Webjx.Com welcome</textarea>   选定标签select与选项标签option一起可以制作一个下拉选框。是这样工作的:
<select>
<option value=\"first option\">Option 1</option>
<option value=\"second option\">Option 2</option>
<option value=\"third option\">Option 3</option>
</select>   当表单被提交时,被选中选项的值将被发送。网页教学网
  与复选框和单选按钮的预选属性checked一样,选项标签option也有一个预选属性selected,它可以用在这样的格式中:
<option value=\"mouse\" selected=\"selected\">Rodent</option>   上述的标签中在网页中看起来都不错,但是,如果你有一个程序来处理这个表单,这些标签都不起作用。这是因为,表单字段需要名称。所以所有的字段中都需要增加名称属性name,比如 <input type=\"text\" name=\"talkingsponge\" />。 网页教学
  一个表单看起来应该像下面这样(注意:这个表单不会工作,除非有一个用来提交数据的“reg.asp”的文件,它位于表单标签form的行为属性action中。)
<form action=\"reg.asp\" method=\"post\">
<p>Name:</p>
<p><input type=\"text\" name=\"name\" value=\"Your name\" /></p>
<p>Comments: </p>
<p><textarea name=\"comments\" rows=\"5\" cols=\"20\">Your comments</textarea></p>
<p>Are you:</p>网页教学
<p><input type=\"radio\" name=\"areyou\" value=\"male\" /> Male</p>
<p><input type=\"radio\" name=\"areyou\" value=\"female\" /> Female</p>
<p><input type=\"radio\" name=\"areyou\" value=\"hermaphrodite\" /> An hermaphrodite</p>
<p><input type=\"radio\" name=\"areyou\" value=\"asexual\" checked=\"checked\" /> Asexual</p>
<p><input type=\"submit\" /></p>
<p><input type=\"reset\" /></p>
</form>   以上就是表单的一些基本知识和表单的工作原理了,希望大家对表单有个好的认识。
郁闷小男人 发表于 2011-7-29 10:50 | 显示全部楼层
这是怎么了啊??
yoyo 发表于 2011-8-1 10:39 | 显示全部楼层
站个位在说
゛见证奇迹く 发表于 2011-8-3 10:10 | 显示全部楼层
对!先占位观看。
只学java 发表于 2011-8-15 09:10 | 显示全部楼层
早上的时候把硬盘线重新弄 了下
有烟没火 发表于 2011-8-16 10:00 | 显示全部楼层
貌似我真的很笨????哎  
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-4-27 02:27 , Processed in 0.122514 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表