欢迎您光临爱永设计官网!
电话图标 服务热线/微信:13436537174 QQ咨询:276583799

新闻资讯

news

web表单控件之详细讲解

发表日期:2012-12-08 文章作者:爱永设计  浏览次数:14157 次

经常玩网站的朋友都知道,交互中表单是如此重要,下面爱永设计提供一些关于表单的应用。。

WEB表单(Form)是WEB应用程序与客户交互的界面,用表单传送的数据可以被应用程序接收到。大多数人在学习HTML的时候就接触到它了,但真正懂得各项属性用法的相信并不多。

一、<form> 标签
<form> 标签是一个表单的框架,所有的表单控件都必须放在 <form> 标签中。

Action 属性:定义接收表单数据的应用程序的路径,也就是我们用PHP开发的那个程序文件,表单提交后,将会把表单数据发送给该文件,并显示反馈的数据。

Method 属性:定义表单发送数据所使用的方法。对于WEB请求,HTTP/0.9协议定义了两种方法,HTTP/1.0增加了一种,HTTP/1.1扩展到了七种,但常用到的,只有HTTP/0.9中的GET和POST两个方法。GET方法是默认值,只是用于简单的下载(获得)远程文件,所有表单数据都经URL编码后附加在请求资源的后面,资源标识符(URL)与请求数据用“?”分隔,多个请求数据间用“&”分隔,每条数据的标识符与值之间用“=”分隔。由于GET方法只是用于简单的请求资源,并非专用于传递数据,因此只适合发送有限的数据,如果数据很多,URL将会变得很长。POST方法则是专门用于传送数据的,所有的请求数据都被放在了所有请求头(Request Header)后面。通常使用表单时,无论数据的多少,都使用POST方法。而对于更简单的固定数据,直接放在超级链接中好了(注意请求数据只允许字母、数字和“-”,其它字符要经过URL编码)。

Target 属性:接受请求的目标窗口,这个属性与超级链接的同名属性相同。
Enctype 属性:定义发送数据的编码类型,默认为application/x-www-form-urlencoded,所有数据都要进行URL编码;如果要使用 <input type=”file”> 控件上传文件,必须将这个属性改为“multipart/form-data”,否则只会传递文件的路径字符串。

二、<input> 标签
表单中的输入元素(<input> 标签)被称作表单控件,它们是仿照桌面应用程序的标准输入控件设计的,以提供最基本的输入支持。所有的表单控件都有两个通用的重要属性:name 和 value。
Name 属性用来标识表单控件,WEB应用程序就是用这个属性来读取控件输入的内容的。理论上,在同一表单中,不可以有 name 属性相同的 <input> 标签,但 <input type=”radio”> 和 <input type=”check”> 两个标签除外。如果不为 <input> 标签指定 name 属性,这个空间的值将不被上传,通常按钮空件都无须指定 name 属性。
Value 属性表示表单控件的值,通常不用在设计期定义它,而在运行期有用户输入它们的值。
Type 属性定义了表单控件的类型,不同类型的表单控件它们之间的差别也是在 type 属性中。

1、表单提交控件
语法:<input type=”submit”>
说明:生成一个提交按钮,用户点击后将提交表单。它的 value 属性定义了按钮上的文字,通常不用为它定义 name 属性——因为它只用于提交表单数据,而本身并不包含有价值的数据。

2、图片提交控件:
语法:<input type=”image”>
说明:生成一个提交表单的按钮,与普通表单提交控件不同的是,它使用一个图片来代替按钮。Src、width 和 height 属性分别定义图片的路径、宽度和高度。

3、表单复位控件:
语法:<input type=”reset”>
说明:生成一个复位按钮,用户点击后将把所有表单元素的输入内容恢复成初始状态。

4、按钮控件:
语法:<input type=”button”>
说明:生成一个普通按钮,用来响应用户的点击。按钮空间通常只用于和客户端脚本语言(如:JavaScript)交互,而不用来提交数据。

5、文本字段控件:
语法:<input type=”text”>
说明:生成一个单行文本输入框,用来接收用户输入的数据。它的 value 属性定义了文本框内初始的文字,通常为空,即接收用户输入。其它常用属性还有:
Size 属性:定义文本框的宽度,以字符为单位。
Maxlength 属性:定义文本框最多输入的字符数量。

6、密码输入控件:
语法:<input type=”password”>
说明:生成一个密码输入框,用来接受用户的密码输入。它与文本字段的主要区别是:密码输入框中的字符都显示为掩码“*”,且禁止粘贴操作。

7、文本区域控件:
语法:<textarea> … </textarea>
说明:生成一个多行文本输入框。它是 <input type=”text”> 标签的一个特殊情况,由于要输入的内容很多,把它们都集中在 value 属性中很难看,因此为它度身定做了一个 <textarea> 标签。标签没有 value 属性,原本 value 属性的内容都应该加在起始与结束标签之间的主体中。

8、列表菜单控件:
语法:<select> <option> … </option> </select>
说明:生成一个列表或菜单。如果为 <select> 标签加上 size 属性,将生成一个多行列表,否则将生成一个下拉菜单。对于多行列表,size 属性定义显示的行数,multiple 属性定义是否允许多选。<option> 标签可以有多个,它定义了列表或菜单的所有选项,value 属性要加在 <option> 标签中,<option> 标签的主体是显示的文字。
示例:<select name=”booklist” size=”5″ mutiple>
<option value=”1″> PHP编程模式</option>
<option value=”2″> MySQL高级教程 </option>
<option value=”3″> Java编程思想 </option>
<option value=”4″> JSP高级教程 </option>
<option vlaue=”5″> XML实例教程 </option>
</select>

9、单选按钮控件:
语法:<input type=”radio”>
说明:生成一个“互斥”的单选输入框,它有一个很形象的名字——Radio Button,就好像旧式收音机的按钮,按下一个后,其它的都会弹起来。要使多个单选按钮达到互斥的效果,需要将它们编为一组,即将它们的 name 属性定义为相同值。浏览器在发送请求时,只会将该组中被选择的那个按钮的值提交。
示例:<input type=”radio” name=”booklist” value=”1″> PHP编程模式 <br>
<input type=”radio” name=”booklist” value=”2″> MySQL高级教程 <br>
<input type=”radio” name=”booklist” value=”3″> Java编程思想 <br>
<input type=”radio” name=”booklist” value=”4″> JSP高级教程 <br>
<input type=”radio” name=”booklist” value=”5″> XML实例教程 <br>

10、多选按钮控件:
语法:<input type=”check”>
说明:生成一个复选框,既可以选择,又可以取消选择。对于一组复选框,通常也将它们的name属性定义为相同。但这样一来,WEB应用程序在接收时,后面的值将会覆盖前面的值,解决方法是将它们的 name 属性后面加上“[]”,这样PHP就会将它们协调成数组。

示例:<input type=”check” name=”booklist[]” value=”1″> PHP编程模式 <br>
<input type=”check” name=”booklist[]” value=”2″> MySQL高级教程 <br>
<input type=”check” name=”booklist[]” value=”3″> Java编程思想 <br>
<input type=”check” name=”booklist[]” value=”4″> JSP高级教程 <br>
<input type=”check” name=”booklist[]” value=”5″> XML实例教程 <br>
请注意,使用“[]”只是PHP的解决方法,并不适用于其它WEB开发技术(如在ASP中,不用使用“[]”也会自动将相同 name 属性的 <input> 标签协调为数组)。

11、文件上传控件:
语法:<input type=”file”>
说明:生成一个文件选择框,用于上传文件。需要注意的是,要想上传实际文件,需要将 <form> 标签的enctype属性定义为multipart/form-data,否则,只会上传图片路径字符串。

12、隐藏字段控件:
语法:<input type=”hidden”>
说明:生成一个用于存储变量信息的表单控件,它不在浏览器中显示,也不能接收用户的输入,只用于将固定的变量值传递给应用程序。

将文章分享到..
相关资讯
最新主题模板
随机新闻
最新网站案例
  • 更多 +我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!

Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作