不积跬步无以至千里

记录精彩的程序人生

  • 首页
  • Java
  • Golang
  • PHP
  • Python
  • Nodejs
  • Lua
  • Docker
  • DevOps
  • 文章归档
  • 默认分类
  • 关于
  • 标签

  • 搜索
PostgreSQL hbase 时间同步 nexus 开机启动 nexus, 开机启动 jenkins安装配置 gitlab安装配置 gitlab安装 文件系统 fastdfs gcc切换 gcc升级 mysql8 交换空间 虚拟内存 tcp thrift lua tag test VPN SoftEtherVPN homebrew asm spring tomcat maven jdk ios mac 图案字符 figlet mysql半同步复制 mysql主从同步 一主多从 一主一从 主从同步 反向代理 密码重置 test 虚拟机扩容 swap 虚拟空间 docker ldocker grpc-gateway protobuf 微服务 go grp GRPC 授权登录 OAuth2.0 SOA supervisord supervisor RPC CentOS rabbitmq 环境变量 php-fpm php.ini error php7 lnmp 编译安装 mysql nginx linux java php python redis 字符串操作 mysql5.7 Solo

web表单控件之详细讲解

发表于 2018-12-23 | 分类于 默认分类 | 0 | 阅读次数 1414

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">
说明:生成一个用于存储变量信息的表单控件,它不在浏览器中显示,也不能接收用户的输入,只用于将固定的变量值传递给应用程序。

是男人就应该看的一些文字
php中文件上传详解
  • 文章目录
  • 站点概览
ken

ken

记录精彩的程序人生

498 日志
9 分类
77 标签
RSS
Creative Commons
Links
  • 酷壳
0%
© 2010 — 2026 ken
由 Halo 强力驱动
鄂ICP备18013899号-1