表单

一、所有表单元素放在form标签里

二、表单元素的类型

　　　　1、文本类型：文本框：text

　　　　　　　　　　密码框：password

　　　　　　　　　　隐藏域：hidden

　　　　　　　　　　多行文本：textarea

　　　　2、按钮类型：普通按钮：butten

　　　　　　　　　　　重置按钮：reset

　　　　　　　　　　　提交按钮：submit

　　　　3、选择类型：单选：radio

　　　　　　　　　　复选：checkbox

　　　　　　　　　　下拉：<select>

　　　　其中radio和checkbox这两个表单元素的name属性不仅有键的属性还有分组的作用

三、表单元素通用格式：<input type="类型" name="后台接收的键" value="值"/>

四、例子：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9     <form action="https://www.baidu.com/" method="post">
10         <table border="0">
11             <tr>
12                 <td><a href="https://passport.baidu.com/v2/">百度账号注册</a></td>
13                 <td><a href="https://www.baidu.com/"><img src="QQ截图20171219114412.png"/></a></td>
14             </tr>
15             <tr>
16                 <td align="right">用户注册:</td>
17                 <td width="10"><input type="text" placeholder="请设置用户名" style=" 200px;height: 40px"></td>
18                 
19             </tr>
20             <tr>
21                 <td align="right">手机号:</td>
22                 <td width="10"><input type="text" placeholder="请输入手机号" style=" 200px;height:40px"></td>
23                 
24             </tr>
25             <tr>
26                 <td align="right">密码：</td>
27                 <td width="10"><input type="text" placeholder="请输入密码" style=" 200px;height: 40px"></td>
28                 
29             </tr>
30             <tr>
31                 <td align="right">验证码：</td>
32                 <td width="10"><input type="text" placeholder="请输入验证码" style=" 200px;height: 40px">
33                     <input type="button" value="获取验证码" style=" 100px;height: 40px"></td>
34             </tr>
35             
36             <tr>
37                 <td colspan="2"><input type="checkbox" align="right">阅读并接受《百度用户协议》及《百度隐私权保护声明》</td>
38             </tr>
39             <tr>
40                 <td colspan="2"><input type="submit" value="注册" style=" 400px;height: 70px"></td>
41             </tr>
42             <tr>
43                 <td><select name="123" id="234">
44                     <option value="1">汉族</option>
45                     <option value="1">回族</option>
46                     <option value="1">满族</option>
47                     <option value="1">土家族</option>
48                 </select></td>
49             </tr>
50         </table>
51     </form>
52 </body>
53 </html>

View Code