HTML表单

文件表单主要用来获取客户端用户信息

工作原理：

           1、在表单的网页，填写信息，点击某个按钮进行提交

           2、表单数据通过互联网传递到服务器

           3、服务器有专门的程序对表单数据进行处理验证，如果验证成功数据就会存入数据库

表单结构：

 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" value="提交">
12      </form>
13 </body>
14 </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">男&nbsp
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>

  

复选框：<input type="checkbox">

常用属性：

           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">男&nbsp
26                            <input type="radio" name="sex" value="女">女
27                      </td>
28              </tr>    
29              <tr>
30                      <td align="right" valign="top">兴趣爱好：</td>
31                      <td align="center">
32                          <input type="checkbox" name="interest" value="摄影" checked="checked">摄影
33                          <input type="checkbox" name="interest" value="唱歌">唱歌
34                          <input type="checkbox" name="interest" value="跳舞">跳舞<br>
35                          <input type="checkbox" name="interest" value="画画">画画
36                          <input type="checkbox" name="interest" value="阅读">阅读
37                          <input type="checkbox" name="interest" value="钢琴">钢琴
38                      </td>
39              </tr>    
40              <tr align="center">
41                      <td></td>
42                      <td><input type="submit" value="提交"></td>
43              </tr>        
44         </table>
45     </form>
46 </body>
47 </html>

 

 

 

下拉列表：<select>

常用属性：

           name:

<option>

常用属性：

           value:

           selected:默认选中   取值：selected

实例：

 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">男&nbsp
26                            <input type="radio" name="sex" value="女">女
27                      </td>
28              </tr>    
29              <tr>
30                      <td align="right" valign="top">兴趣爱好：</td>
31                      <td align="center">
32                          <input type="checkbox" name="interest" value="摄影" checked="checked">摄影
33                          <input type="checkbox" name="interest" value="唱歌">唱歌
34                          <input type="checkbox" name="interest" value="跳舞">跳舞<br>
35                          <input type="checkbox" name="interest" value="画画">画画
36                          <input type="checkbox" name="interest" value="阅读">阅读
37                          <input type="checkbox" name="interest" value="钢琴">钢琴
38                      </td>
39              </tr>    
40              <tr>
41                      <td align="right">籍贯：</td>
42                      <td align="left">
43                           <select name="provice">
44                                 <option value="陕西" selected="selected">陕西</option>
45                                 <option value="北京">北京</option>
46                                 <option value="浙江">浙江</option>
47                                 <option value="上海">上海</option>
48                                 <option value="湖南">湖南</option>
49                           </select>
50                           <select name="city" selected="selected">
51                                 <option value="西安">西安</option>
52                                 <option value="咸阳">咸阳</option>
53                                 <option value="渭南">渭南</option>
54                                 <option value="汉中">汉中</option>
55                                 <option value="榆林">榆林</option>
56                           </select>
57                      </td>
58              </tr>    
59              <tr align="center">
60                      <td></td>
61                      <td><input type="submit" value="提交"></td>
62              </tr>        
63         </table>
64     </form>
65 </body>
66 </html>

 

 

 

    

文本区域：<textarea></textarea>

常用属性：

           name：

           cols： 宽度 以字符为单位

           rows：高度

实例：

 

 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">男&nbsp
26                            <input type="radio" name="sex" value="女">女
27                      </td>
28              </tr>    
29              <tr>
30                      <td align="right" valign="top">兴趣爱好：</td>
31                      <td align="center">
32                          <input type="checkbox" name="interest" value="摄影" checked="checked">摄影
33                          <input type="checkbox" name="interest" value="唱歌">唱歌
34                          <input type="checkbox" name="interest" value="跳舞">跳舞<br>
35                          <input type="checkbox" name="interest" value="画画">画画
36                          <input type="checkbox" name="interest" value="阅读">阅读
37                          <input type="checkbox" name="interest" value="钢琴">钢琴
38                      </td>
39              </tr>    
40              <tr>
41                      <td align="right">籍贯：</td>
42                      <td align="left">
43                           <select name="provice">
44                                 <option value="陕西" selected="selected">陕西</option>
45                                 <option value="北京">北京</option>
46                                 <option value="浙江">浙江</option>
47                                 <option value="上海">上海</option>
48                                 <option value="湖南">湖南</option>
49                           </select>
50                           <select name="city" selected="selected">
51                                 <option value="西安">西安</option>
52                                 <option value="咸阳">咸阳</option>
53                                 <option value="渭南">渭南</option>
54                                 <option value="汉中">汉中</option>
55                                 <option value="榆林">榆林</option>
56                           </select>
57                      </td>
58              </tr>    
59              <tr>
60                      <td align="right" valign="top">简介：</td>
61                      <td align="center">
62                          <textarea name="introduce" cols="20" rows="10">自我介绍</textarea>
63                      </td>
64              </tr>        
65              <tr align="center">
66                      <td></td>
67                      <td><input type="submit" value="提交"></td>
68              </tr>        
69         </table>
70     </form>
71 </body>
72 </html>

按钮：

提交按钮：<input type="submit" value="提交">

重置按钮：<input type="reset" value="重置">

图片按钮：<input type="image" src="pic/image.jpg">默认提交表单

普通按钮：<input type="button"  value="名称"> 不具备任何功能，和js配合实现相应功能

实例：

 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">男&nbsp
26                            <input type="radio" name="sex" value="女">女
27                      </td>
28              </tr>    
29              <tr>
30                      <td align="right" valign="top">兴趣爱好：</td>
31                      <td align="center">
32                          <input type="checkbox" name="interest" value="摄影" checked="checked">摄影
33                          <input type="checkbox" name="interest" value="唱歌">唱歌
34                          <input type="checkbox" name="interest" value="跳舞">跳舞<br>
35                          <input type="checkbox" name="interest" value="画画">画画
36                          <input type="checkbox" name="interest" value="阅读">阅读
37                          <input type="checkbox" name="interest" value="钢琴">钢琴
38                      </td>
39              </tr>    
40              <tr>
41                      <td align="right">籍贯：</td>
42                      <td align="left">
43                           <select name="provice">
44                                 <option value="陕西" selected="selected">陕西</option>
45                                 <option value="北京">北京</option>
46                                 <option value="浙江">浙江</option>
47                                 <option value="上海">上海</option>
48                                 <option value="湖南">湖南</option>
49                           </select>
50                           <select name="city" selected="selected">
51                                 <option value="西安">西安</option>
52                                 <option value="咸阳">咸阳</option>
53                                 <option value="渭南">渭南</option>
54                                 <option value="汉中">汉中</option>
55                                 <option value="榆林">榆林</option>
56                           </select>
57                      </td>
58              </tr>    
59              <tr>
60                      <td align="right" valign="top">简介：</td>
61                      <td align="center">
62                          <textarea name="introduce" cols="20" rows="10">自我介绍</textarea>
63                      </td>
64              </tr>        
65              <tr align="center">
66                      <td></td>
67                      <td>
68                           <input type="submit" value="提交">
69                           <input type="reset" value="重置">
70                           <input type="image" src="pic/image.jpg">
71                           <input type="button" onclick="javascript:window.close() "value="关闭窗口">
72                      </td>
73              </tr>            
74         </table>
75     </form>
76 </body>
77 </html>

 上传文件：<input type="file">

常用属性：

           name：

           value：上传的文件名   只读，只能来自手动选择上传的文件

实例：

 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" enctype="multipart/form-data">    
 9         <table cellpadding="10" align="center">
10              <tr>
11                      <td align="right">*用户名：</td>
12                      <td align="center"><input type="text" name="username"></td>
13              </tr>
14              <tr>
15                      <td align="right">*请设置密码：</td>
16                      <td align="center"><input type="password" name="password"></td>
17              </tr>
18              <tr>
19                      <td align="right">*请确认密码：</td>
20                      <td align="center"><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">男&nbsp
26                            <input type="radio" name="sex" value="女">女
27                      </td>
28              </tr>    
29              <tr>
30                      <td align="right" valign="top">兴趣爱好：</td>
31                      <td align="center">
32                          <input type="checkbox" name="interest" value="摄影" checked="checked">摄影
33                          <input type="checkbox" name="interest" value="唱歌">唱歌
34                          <input type="checkbox" name="interest" value="跳舞">跳舞<br>
35                          <input type="checkbox" name="interest" value="画画">画画
36                          <input type="checkbox" name="interest" value="阅读">阅读
37                          <input type="checkbox" name="interest" value="钢琴">钢琴
38                      </td>
39              </tr>    
40              <tr>
41                      <td align="right">籍贯：</td>
42                      <td align="center">
43                           <select name="provice">
44                                 <option value="陕西" selected="selected">陕西</option>
45                                 <option value="北京">北京</option>
46                                 <option value="浙江">浙江</option>
47                                 <option value="上海">上海</option>
48                                 <option value="湖南">湖南</option>
49                           </select>
50                           <select name="city" selected="selected">
51                                 <option value="西安">西安</option>
52                                 <option value="咸阳">咸阳</option>
53                                 <option value="渭南">渭南</option>
54                                 <option value="汉中">汉中</option>
55                                 <option value="榆林">榆林</option>
56                           </select>
57                      </td>
58              </tr>    
59              <tr>
60                      <td align="right" valign="top">简介：</td>
61                      <td align="center">
62                          <textarea name="introduce" cols="20" rows="10">自我介绍</textarea>
63                      </td>
64              </tr>             
65              <tr>
66                      <td align="right">选择文件：</td>
67                      <td align="center"><input type="file" value="提交"></td>
68              </tr>             
69              <tr align="center">
70                      <td></td>
71                      <td><input type="submit"></td>
72              </tr>            
73         </table>
74     </form>
75 </body>
76 </html>

 

 

 

 

 

 当需要上传 文件时，下面代码必须一起使用

 

 

隐藏域：主要用于php后台程序，修改新闻内容时需要传递ID

<input type="hidden">

常用属性：

           name：

           value：

实例：

 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>
11                      <td align="right">*用户名：</td>
12                      <td align="center"><input type="text" name="username"></td>
13              </tr>
14              <tr>
15                      <td align="right">*请设置密码：</td>
16                      <td align="center"><input type="password" name="password"></td>
17              </tr>
18              <tr>
19                      <td align="right">*请确认密码：</td>
20                      <td align="center"><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">男&nbsp
26                            <input type="radio" name="sex" value="女">女
27                      </td>
28              </tr>    
29              <tr>
30                      <td align="right" valign="top">兴趣爱好：</td>
31                      <td align="center">
32                          <input type="checkbox" name="interest" value="摄影" checked="checked">摄影
33                          <input type="checkbox" name="interest" value="唱歌">唱歌
34                          <input type="checkbox" name="interest" value="跳舞">跳舞<br>
35                          <input type="checkbox" name="interest" value="画画">画画
36                          <input type="checkbox" name="interest" value="阅读">阅读
37                          <input type="checkbox" name="interest" value="钢琴">钢琴
38                      </td>
39              </tr>    
40              <tr>
41                      <td align="right">籍贯：</td>
42                      <td align="center">
43                           <select name="provice">
44                                 <option value="陕西" selected="selected">陕西</option>
45                                 <option value="北京">北京</option>
46                                 <option value="浙江">浙江</option>
47                                 <option value="上海">上海</option>
48                                 <option value="湖南">湖南</option>
49                           </select>
50                           <select name="city" selected="selected">
51                                 <option value="西安">西安</option>
52                                 <option value="咸阳">咸阳</option>
53                                 <option value="渭南">渭南</option>
54                                 <option value="汉中">汉中</option>
55                                 <option value="榆林">榆林</option>
56                           </select>
57                      </td>
58              </tr>    
59              <tr>
60                      <td align="right" valign="top">简介：</td>
61                      <td align="center">
62                          <textarea name="introduce" cols="20" rows="10">自我介绍</textarea>
63                      </td>
64              </tr>    
65              <tr>
66                      <td align="right">选择文件：</td>
67                      <td align="center"><input type="file" value="提交"></td>
68              </tr>        
69               <tr>
70                      <td></td>
71                      <td><input type="hidden" name="id" value="1000"></td>
72              </tr>    
73              <tr align="center">
74                      <td></td>
75                      <td><input type="submit"></td>
76              </tr>            
77         </table>
78     </form>
79 </body>
80 </html>

 

 

posted on 2016-12-25 11:23  心如止水微笑人生  阅读(247)  评论(0)    收藏  举报

导航