表单是一个包含表单元素的区域，是允许用户在表单中输入信息的元素。
表单标签form，属性action="url"是向后台发送数据的。
表单里有多种输入框，用type进行区分，所有的input标签都要包裹在form表单中。
1、文本输入框
<form action="#">
文本输入框:<input type="text" name="" value="默认值" placeholder="提示用户输入信息"/>
</form>
input默认为文本输入框，name是后台会用到的数据，value可以在里面设置默认值，placeholder显示提示用户输入的信息，可添加disabled属性禁止编辑文本框。
可以设置其样式text-indent使输入信息缩进一定距离，然后用定位在其前面插入图片，这样就可以做类似天猫登录的输入框。
2、密码输入框
<form action="#">
密码输入框:<input type="password" />
</form>
输入密码时以黑圆点显示。
3、单选框
<form action="#">
单选框:
<input type="radio" name="sex" id="male" checked/>
<label for="male">男</label>
<input type="radio" name="sex" id="female" />
<label for="female">女</label>
</form>
单选框name属性值必须要一样，否则就不能单选。checked默认被选中。
label标签可以对文字进行关联，即点击文字时对应的单选框会被选中，for属性值和单选框id值一样。
4、复选框
<form action="#">
复选框:
<input type="checkbox" name="check" />复选框1
<input type="checkbox" name="check" />复选框2
<input type="checkbox" name="check" />复选框3
<input type="checkbox" name="check" />复选框4
</form>
5、普通按钮
<form action="#">
普通按钮:<input type="button" value="按钮" />
</form>
6、提交按钮
<form action="#">
提交按钮:<input type="submit" value="提交" />
</form>
7、重置按钮
<form action="#">
重置按钮:<input type="reset" value="重置" />
</form>
清空表单中的所有数据。
8、文件上传
<form action="#">
上传文件:<input type="file" />
</form>
9、多行文本输入框
<form action="#">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
cols控制最小列，rows控制最小行，控制文本大小通常用css去控制，即给宽高即可，这样比较准确。
10、下拉列表
<form action="#">
<select name="" id="" size="">
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
<option value="7">星期天</option>
</select>
</form>
size控制下拉列表可见数目，multiple属性可以使用户按住Ctrl键多选属性。
11、组合表单
<form action="#">
<fieldset>
<legend>组合表单</legend>
文本框1:<input type="" /><br />
文本框2:<input type="" /><br />
文本框3:<input type="" /><br />
</fieldset>
</form>
结果：
12、实战
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content="XXX"> 7 <meta name="Keywords" content="登录界面"> 8 <meta name="Description" content="登录界面"> 9 <title>登录界面</title> 10 <style> 11 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 12 *{margin: 0; padding: 0;} 13 ol,ul{list-style: none;} 14 a{text-decoration: none; color: inherit;} 15 html{background: #ccc;} 16 #container{ 17 position: relative; 18 width: 1920px; 19 height: 520px; 20 background: url('./images/dlbg.jpg') no-repeat; 21 } 22 #container .con{ 23 position: absolute; 24 right: 410px; 25 width: 340px; 26 margin: 50px 0; 27 background: rgb(245, 240, 233); 28 } 29 #container .con .top{ 30 padding: 30px 45px 0; 31 border-bottom: 1px dotted #ccc; 32 } 33 #container .con .top input{ 34 margin-bottom: 25px; 35 } 36 #container .con .top .in{ 37 position: relative; 38 } 39 #container .con .top label{ 40 font-size: 14px; 41 margin-right: 5px; 42 } 43 #container .con .top span{ 44 font-size: 14px; 45 color: #666666; 46 margin-right: 5px; 47 } 48 #container .con .top .in input{ 49 width: 255px; 50 height: 40px; 51 text-indent: 55px; 52 font-size: 16px; 53 } 54 #container .con .top .uname, 55 #container .con .top .upassword{ 56 position: absolute; 57 top: 0; 58 left: 0; 59 width: 40px; 60 height: 42px; 61 border: 1px solid #ccc; 62 } 63 #container .con .top .uname{background: url("./images/zhanghao.jpg") 0 -1px;} 64 #container .con .top .upassword{background: url("./images/mima.jpg") 0 -1px;} 65 #container .con .top .submit{ 66 position: absolute; 67 top: 0; 68 left: 0; 69 z-index: 1; 70 width: 255px; 71 height: 40px; 72 background: url("./images/but.jpg"); 73 } 74 75 #container .con .bottom{ 76 position: relative; 77 font-size: 14px; 78 padding: 40px 45px 75px; 79 } 80 #container .con .bottom ul{ 81 position: absolute; 82 top: 25px; 83 left: 170px; 84 } 85 #container .con .bottom ul li{ 86 float: left; 87 margin: 0 5px; 88 } 89 #container .con .bottom ul li i{ 90 float: left; 91 width: 32px; 92 height: 32px; 93 /* border: 1px solid red; */ 94 } 95 #container .con .bottom ul li .i1{background: url("./images/weixin.png");} 96 #container .con .bottom ul li .i2{background: url("./images/qqlogin.png");} 97 #container .con .bottom ul li .i3{background: url("./images/taobao.png");} 98 </style> 99 </head> 100 <body> 101 <div id="container"> 102 <div class="con"> 103 <div class="top"> 104 <form action="#"> 105 <div class="in"> 106 <input type="" placeholder="用户名/邮箱地址/手机号" /> 107 <i class="uname"></i> 108 </div> 109 <div class="in"> 110 <input type="password" placeholder="填写密码" /><br /> 111 <i class="upassword"></i> 112 </div> 113 <input type="checkbox" id="remember" /> 114 <label for="remember">记住账号</label> 115 <span><a href="#">欢迎注册</a></span> 116 <span><a href="#">忘记密码？</a></span><br /> 117 <div class="in"> 118 <input type="submit" value="" /> 119 <i class="submit"></i> 120 </div> 121 </form> 122 </div> 123 <div class="bottom"> 124 合作网站账号登录： 125 <ul> 126 <li><i class="i1"></i></li> 127 <li><i class="i2"></i></li> 128 <li><i class="i3"></i></li> 129 </ul> 130 </div> 131 </div> 132 </div> 133 </body> 134 </html>
结果：
