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

初学|网页

  表单是一个网站和访问者开展互动的窗口,我们现在就给大家介绍一下表单的一些基本知识和表单美化方法。

  初识表单

  表单可以用来在网页中发送数据,特别是经常被用在联系表单-用户输入信息然后发送到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>

  以上就是表单的一些基本知识和表单的工作原理了,希望大家对表单有个好的认识。

时间: 2024-08-31 09:04:26

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

初学好文:HTML网页表单制作实例讲解

初学|网页 文本框 代码格式:<input type="text" name="..." size="..." maxlength="..." value="..."> 属性解释: type="text"定义单行文本输入框: name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称: size属性定义文本框的宽度,单位是单个字符宽度: maxlength

WEBJX收集30个优秀的网页表单制作实例

这里是30个相比风格更加明显,更注重"外貌"的包括评论表单在内的一些优秀的表单应用设计,任何人都希望可以在使用产品的同时能获得愉悦的感受,因此,一个提供易用漂亮的交互方式的Web表单可以吸引更多用户的响应,在愉悦使用的同时留下更直观的视觉印象. 相关文章: 网页设计师参考:网页登录表单设计实例 网页交互设计参考:漂亮的网页登陆表单设计实例 CSS网页设计实例:15个用CSS设计的网页表单实例 1. Synch Media 2. Ft designer 3. Glass house 4.

用dreamvear制作的网页表单内容链接数据库,不知道为什么提示错误,求大神指点,在线等

问题描述 用dreamvear制作的网页表单内容链接数据库,不知道为什么提示MicrosoftVBScript编译器错误错误'800a0408'无效字符/s071203237/regconfirm.asp,行17STUID=request.form("STUID")-------------------------^代码如下:<body><%dimconnsetconn=server.CreateObject("ADODB.CONNECTION")

网页设计参考:寻找设计网页表单的灵感

网页制作Webjx文章简介:一组网页表单页面设计欣赏. 网页表单看似是网站中最常用的页面,内容大多也不会有啥变化,但这样看似简单的表单设计起来并不容易,原因就在于太简单了,所以在一些新手设计时会感觉不知从何开始.其实对于网页设计老手来说,表单设计也有自己的规律,最常用的一种方式就是根据网站整体风格进行设计. 而一些本身就很干净的网页来说,设计起来就需要花些功夫了.本文推荐的几个表单页面包含了复杂与干净的不同网站风格.可以从中寻找设计网页表单的灵感.

网页设计:WEBJX收集优秀的网页表单设计例子

文章描述:30个非常优秀的网页表单设计例子. 网页表单作为访问者与网站所有者主要的沟通途径,确保网页表单比较容易理解和使用起来比较直观成为网页设计的重要目标之一.每个网站都会有适合自己风格的表单,新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.在本文中将展示国外一些非常优秀的网页表单设计例子,以供欣赏借鉴. RxBalance Awesome Brian Handley Gowalla Form Spring Buffalo [1] [2] [3] [4] [5]  下一页

网页表单输入框设计:精心简化表单输入框

文章描述:简化输入 - 让网页表单更亲切. 大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气. 2. 添加选取器. 与其让

测试网页表单的交互设计

作为网页表单交互设计,有时候网页设计师本身要进行一些极端的测试,这就包括填写和思考一些普通用户很难想去做的一些动作.比如在价格输入框中填写英文字母,什么都不输入的时候按提交按钮等等. 一般作为测试者,我们都要尽可能的把一切可能发生的用户行为考虑到,即便这种可能性出现的概率很低. 以下我们来具体分析啊下网页表单的交互设计中的极限测试以及对淘宝等网站进行观察,看看这些大网站对于表单交互测试做到了什么程度! 如图: 1. 你会在search bar什么都不输入的情况下就按search button吗?

有效网页表单的八条规则

如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了.一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑.明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则. 文章中所有的实例都是用CoffeeCup Web Form Builder生成的. 1. 保守性的搭建, 并带有目的性的设计表单 我们要面对的现实是没有人喜欢花大把的时间填写表单. 保持表单的短小精悍并且剔除绝对不必要的或者不会提供实际收效的表单元素. 保证表单的每个部分都对整体起到了推动

网页表单设计中的反馈提示

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://lilong4174.blogbus.com/logs/39063960.html 反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产生影响.在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息输入者他的操作结果.它有很多种形式,包括界面元素.声音.影像变化和物理位移(如震动)等. 我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息,为了加强区分避免歧义,我们这里姑