第十节 表单

Posted 2020-11-27 kogmaw

 1 <!-- 表单用于搜集不同类型的用户输入，表单由不同类型的标组成，相关标签及属性用法如下：
 2         1、<form>标签：定义整体的表单区域
 3             action属性：定义表单数据提交地址，为空默认提交在本地即get接受方式，不安全，即当前网址会生成提交信息的后缀
 4             method属性：定义表单提交的方式，一般有get(少量不敏感)和post（大量或者少量敏感）方式
 5         2、<lable> 标签：为表单元素定义文字标注
 6         3、<input> 标签：定义通用的表单元素
 7             type属性：
 8                 text：文本
 9                 password：密码
10                 radio：单选框
11                 CheckBox：多选框
12                 file：上传文件
13                 submit：表单提交按钮
14                 reset：重置按钮
15                 image：定义图片作为提交按钮，用src属性定义图片地址
16                 hidden：定义一个隐藏的表单域，用来存储值
17 
18         4、textarea：多行文本输入框
19         5、select：下拉表单控件，里面嵌套option标签配合使用-->
20     <form action="" method="post"> 
21         <!-- action=""默认提交到本地  method=""默认get  -->
22         <div>
23             <label for="username">用户名：</label>
24             <!-- 原先输入需要点输入框，现在点击用户名三个字就可以激活输入框，通过for属性和ID属性，即通过点击标签激活输入框 -->
25             <input type="text" name="username" id="username"/>
26             <!-- name属性里提交的相当于字典中的键，用于存储数据，有这个提交按钮才能生效  -->
27         </div>
28         <br />
29 
30         <div>
31             <label>密&nbsp;&nbsp;&nbsp;码：</label>
32             <input type="password" name="password" />
33         </div>
34         <br />
35 
36         <div>
37             <label>性&nbsp;&nbsp;&nbsp;别：</label>
38             <input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>
39             <input type="radio" name="gender" value="1"> 女
40         </div>
41         <br />
42 
43         <div>
44             <label>爱&nbsp;&nbsp;&nbsp;好：</label>
45             <input type="checkbox" name="" value="study"> 学习
46             <input type="checkbox" name="" value="python"> python
47             <input type="checkbox" name="" value="frontend"> 前端
48             <input type="checkbox" name="" value="beauty"> 美女
49         </div>
50         <br />
51 
52         <div>
53             <label>文&nbsp;&nbsp;&nbsp;件：</label>
54             <input type="file" name="">
55         </div>
56         <br />
57 
58         <div>
59             <label>个人介绍：</label>
60             <textarea name="introduce" ></textarea>
61         </div>
62         <br />
63 
64         <div>
65             <label>籍&nbsp;&nbsp;&nbsp;贯：</label>
66             <select name="site">
67                 <option value="0">北京</option>
68                 <option value="1">上海</option>
69                 <option value="2">浙江</option>
70                 <option value="3">福建</option>
71                 <option value="4">西藏</option>
72                 <option value="5">江西</option>
73                 <option value="6">广东</option>
74             </select>
75         </div>
76         <br /> 
77 
78         <div>
79             <input type="submit" name="" value="提交" />
80             <!-- <input type="image" src= "图片1.png" name=""> -->
81             <!-- 图片提交会导致提交两次，不建议使用 -->
82             <input type="reset" name="" value="重置" />
83 
84             <input type="hidden" name="hid01" value="3">
85             <!-- 在页面上不显示，但是点提交的时候会同页面上的数据一起提交到数据库 -->
86         </div>
87     </form>