首页 > 代码库 > web application——HTML表单
web application——HTML表单
表单主要用来获取客户端用户信息
工作原理：
1、在表单的网页，填写信息，点击某个按钮进行提交
2、表单数据通过互联网传递到服务器
3、服务器有专门的程序对表单数据进行处理验证，如果验证成功数据就会存入数据库
表单结构：
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>我的网页</title> </head> <body> <form name="form1"> 用户名：<input type="text" name="username"> 密码：<input type="password" name="password"> <input type="submit" value="提交"> </form> </body> </html>
<form></form>
常用属性：一个网页可以有多个表单
name：表单名 主要给javascript用，做客户端的验证 用户名长度，密码格式，邮箱格式等的验证
method：表单的提交方式 取值：GET POST
action：指定表单的处理程序 一般是php文件 接受提交的结果
enctype：指定表单数据的编码加密方式 客户端到服务器的数据加密发送，防止黑客袭击
只能用于提交方式为POST的情况下 GET的数据直接显示在地址栏中不用加密
取值： application/x-www-form-urldecoded默认的 可以不写
multipart/form-data 用于上传文件必须是这个值
GET方法：form不加method默认是GET方法
通过地址栏向服务器放松表单数据
实例：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>我的网页</title> 6 </head> 7 <body> 8 <form name="form1" action="login.php"> 9 用户名：<input type="text" name="username"> 10 密码：<input type="password" name="password"> 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>
login.php:表单处理程序文件
username=123&password=123:表单提交的数据 也成为查询字符串（？之后的东西）
如果action为空提交给当前文件
实例：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>我的网页</title> 6 </head> 7 <body> 8 <form name="form1" action=""> 9 用户名：<input type="text" name="username"> 10 密码：<input type="password" name="password"> 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>
不加name属性可以不传给地址栏，一旦表单元素加了name，使用get方法就会将值传给地址栏
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>我的网页</title> 6 </head> 7 <body> 8 <form name="form1"> 9 用户名：<input type="text" name="username">
10 密码：<input type="password" name="password"> 11 <input type="submit" name="submit" value="提交"> 12 </form> 13 </body> 14 </html>
GET方法特点：
1、不能提交敏感数据
2、只能提交少量数据
3、不能传递附件
POST方法：相对比较安全，直接将数据传递给表单处理程序文件
实例：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>我的网页</title> 6 </head> 7 <body> 8 <form name="form1" method="post" action="login.php"> 9 用户名：<input type="text" name="username"> 10 密码：<input type="password" name="password"> 11 <input type="submit" name="submit" value="提交"> 12 </form> 13 </body> 14 </html>
<input>
常用属性：
name：文本框名
type:表单元素的类型
value:文本框中的内容
size：长度 以字符为单位
maxLength：最多可以输入的字符
readonly:只读属性，可以选中但不能修改 取值：readonly
disable：不能使用 取值：disable
实例：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>我的网页</title> 6 </head> 7 <body> 8 <form name="form1" method="post"> 9 <table cellpadding="10" align="center"> 10 <tr align="right"> 11 <td>*用户名：</td> 12 <td><input type="text" name="username"></td> 13 </tr> 14 <tr align="right"> 15 <td>*请设置密码：</td> 16 <td><input type="password" name="password"></td> 17 </tr> 18 <tr align="right"> 19 <td>*请确认密码：</td> 20 <td><input type="password" name="passwordagain"></td> 21 </tr> 22 </table> 23 </form> 24 </body> 25 </html>
单选按钮：<input type="radio">必须指定默认值
常用属性：
name：
value：
checked：默认选择 取值：checked
实例：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>我的网页</title> 6 </head> 7 <body> 8 <form name="form1" method="get"> 9 <table cellpadding="10" align="center"> 10 <tr align="right"> 11 <td>*用户名：</td> 12 <td><input type="text" name="username"></td> 13 </tr> 14 <tr align="right"> 15 <td>*请设置密码：</td> 16 <td><input type="password" name="password"></td> 17 </tr> 18 <tr align="right"> 19 <td>*请确认密码：</td> 20 <td><input type="password" name="passwordagain"></td> 21 </tr> 22 <tr> 23 <td align="right">性别：</td> 24 <td align="center"> 25 <input type="radio" name="sex" value="男" checked="checked">男  26 <input type="radio" name="sex" value="女">女 27 </td> 28 </tr> 29 <tr align="center"> 30 <td></td> 31 <td><input type="submit" value="提交"></td> 32 </tr> 33 </table> 34 </form> 35 </body> 36 </html>
web application——HTML表单