HTML-表单
表单的概念:
表单主要是用来获取客户端用户数据,注册表单,查询表单,登录表单
表单的工作原理:
浏览有表单的网页,填写一些必要的信息,然后点击提交按钮
表单数据,通过互联网,传到了服务器上
服务器上有专门的程序,对表单数据进行验证。验证成功,返回正确的信息。验证失败,返回错误信息。
从表单的工作原理来看,表单的制作分俩个部分,前台页面制作,后台对表单数据处理
表单的基本结构
<form name="form">
用户名:<input type="text" name="username" />
密码:<input type="password" name="uerpassword" />
<input type="submit" value="提交表单" />
</form>
<form>标记的属性-块元素
name:表单名称,给javascript用,js主要用来做客户端表单验证。
method:表单的提交方式 GET/POST
action:指定表单的处理程序,一般是PHP程序, action为空,提交给当前文件
enctype:指定表单数据的编码方式,该属性只能用在 method=“POST”的方式下,有两个值,
application/x-www-form-urldecoded //默认的编码方式
multipart/form-data //上传文件时用到的加密方式
GET方法和POST方法:
GET提交方式
GET方式,是将表单数据追加到action指定的处理程序后面,然后向服务器发出数据,地址栏默认传值方式
URL说明:
action文件和查询字符串之间用?分隔
没两个表单元素的“名称=值”之间用“&”分隔
表单名称和表单值之间用“=”分隔
如果某个表单元素,不想往服务器传递数据,则不需要加name属性,没有name服务器获取不到对应的值
GET方式特点:
GET方式不能提交敏感数据
GET方式只能提交少量数据,地址栏的长度是有限制的 100字符
GET不能上传附件
POST提交方式
POST直接将表单数据传递给表单处理程序
POST方式特点:
POST方式相对安全
POST方式可以提交海量数据
POST方式可以上传数据
表单元素
单行文本域
语法格式 <input type="text" 属性=“值”/>
常用属性
name:文本框的名称。命名规则:字母,数字,下划线,只能以字母开头
type:表单元素类型
value:文本框中的值
size:文本框的长度,以”字符“为单位
maxlength:最多可以输入的字符,超出大小的输入不显示
readonly:只读属性,可以选中,不能修改 ,readonly="readonly"
disabled:禁用属性。不能选中,不能修改 ,disabled="disabled"
单行密码域
语法格式<input type="password" 属性=”值“ />
常用属性:同上
单选按钮
语法格式:<input type="radio" 属性=”值“ />
常用属性:
name:元素名称
value:元素的值
checked:默认选中项, checked="checked"
<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
复选框
语法格式:<input type="checkbox" 属性=”值“ />
常用属性:
name:元素名称
value:元素的值
checked:默认选中, checked="checked"
<input type="checkbox" name="like" value="game1" checked="checked" /> <input type="checkbox" name="like" value="game2" /> <input type="checkbox" name="like" value="game3" />
下拉列表
<select name="名称">
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
</select>
<select>标记的属性,只有一个name属性
<option>标记的属性,value属性,selected属性(默认选中),selected="selected"
文本区域
语法格式
<textarea name="名称" cols="宽度" rows="高度">……</textarea>
常用属性:
name:元素名称
没有value
cols:宽度,字符为单位
rows:高度,行为单位
提示:<textarea>标签之间是默认文本内容</textarea>
按钮-4种按钮
提交按钮
<input type="sbumit" value="提交按钮" />
重置按钮
<input type="reset" value"重置按钮" />
图片按钮
<input type="image" src="image/001.png" /> //提交表单功能
普通按钮
<input type="button" onclick="javascript:winsow.clode()" value="关闭窗口" /> //普通按钮不具备任何功能,配合JavaScript使用
上传文件域
语法格式:<input type="file" 属性=”属性“ />
常用属性:
name:表单元素的名称
value:表单元素的值,上传的文件名,考虑安全因素,value只读属性,只能手动选择上传的文件,不能自己输入
隐藏域
功能:就是看不见的框,传递一些值,不想让别人看见
用于后台程序,修改某条内容传递的id号
语法格式:<input type="hidden" name="名称" value="默认值" />
常用属性:
name:表单元素的名称
value:表单元素的值,上传的文件名,考虑安全因素,value只读属性,只能手动选择上传的文件,不能自己输入