表单如何工作：1.咱访问一个包含HTML表单的Web页面，填写表单，然后提交
2.浏览器将表单中的所有数据打包，把这些数据发送到Web服务器
3.Web服务器接收到表单数据，然后再把数据传给一个服务器脚本进行处理
4.服务器脚本处理表单中的数据，然后创建一个全新的HTML页面作为响应，再将这个页面传回Web服务器
通过<form>元素创建表单,它不仅包含构成表单的所有元素，还会告诉浏览器当你提交表单时要把表单数据发送到哪里（以及浏览器用什么方法发送数据POST/GET）
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
<!--注释：form是开始标记，表单中的所有内容都包含在此；action属性包含web服务器的URL；脚本所在文件夹是hfhtmlcss;而contest.php将处理表单数据的服务器脚本的文件名
;method="POST" method属性确定表单数据如何发送到服务器。咱们将使用最常用的方法POST（而不是GET，这里不展开了）。-->
<input ....>
........
........
</form>
表单里有啥捏？
各种输入框、按钮<input type="text" name="" id="" value="">
type的值可以有很多：text（最常用输入姓名兴趣爱好神马的）；submit（提交按钮）；radio（单选按钮）：checkbox（复选框输入）；password(密码)；number(数字);
range(范围);color(颜色);date(日期);email（邮件地址）;tel（电话）;url（地址）;file(选取文件);应该就那么多吧，也是五花八门
*可以在input标签里加入placeholder属性（例如placeholder="请输入姓名"）这样框里面就会有提示，但鼠标一点击之后提示占位文本就会消失。
文本区<textarea name="" id="" cols="30" rows="10"></textarea>，一般用来提交建议或意见，评论神马的 cols属性和row属性分别是 列 和 行。
选择框<select name="characters" id="" multiple>
<!--可以增加布尔属性multiple，然后按住CTRL键就可以多选了，不加布尔值multiple就为单选>
<option value="abc">aaa</option>
<option value="aaa">bbb</option>
<option value="bbb">ccc</option>
</select>
*可以在任意的表单中加入required属性，<input type="text" name="" value="" required>像这样。在支持这个属性的浏览器中，如果没有为该属性的域指定一个值，提交表单时
就会得到一个错误信息，表单不会提交到服务器。
差点忘了个重要的东西：表单标签<label>。这个标签灰常重要，因为它可以帮助添加结构和增加表单的可用性和可访问性。顾名思义，这个元素用来在每个表单元素中添加有意义的描述性标签。在许多浏览器中，单机标签元素将导致相关联的表单元素获得焦点。使用标签的真正好处是增加了表单对于使用辅助设备的用户的易用性。如果表单使用标签，屏幕阅读器会正确地将表单元素表单元素和它的标签关联起来。（标签默认情况下是行内元素）
<fieldset>
<legend>身份信息</legend>
<div>
<label for="firstname">firstname:</label>
<input type="text" name="firstname" id="firstname"></div> <br>
<div>
<label for="lastname">lastname:</label>
<input type="text" name="lastname" id="lastname"></div>
</fieldset>
可以注意到，这个输入控件中包含name和id属性。在表单输入控件和标签之间创建关联需要id属性，而将表单数据发送回服务器需要name属性。id和name不必相同，但为保持一致，可以尽可能让他们相同。
如果使用for属性将标签和表单控件关联起来，那么久不要求这些控件和源代码中放在一起，他们可以在文档中的不同部分中。但从结构化得观点来看，把控件和它们的标签分开是不明智的，应该尽量避免这么做。
下面可以看看一些例子：
----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#formone{
display: table;
}
.tablerow{
display: table-row;
}
.tablerow p{
display: table-cell;
padding: 10px;
}
div.tablerow p:first-child{
text-align: right;
}
input[name="yourname"]{
width: 240px;
height:35px;
padding-left: 25px;
font-size: 1.8em
}
</style>
</head>
<body>
<div>
<form action="#" id="formone">
<div class="tablerow">
<p><label for="selection">Choose your beans</label></p>
<p><select name="charactic" id="" >
<option value="abc">aaa</option>
<option value="aaa">bbb</option>
<option value="bbb">ccc</option>
</select>
</p>
</div>
<div class="tablerow">
<p>Type:</p>
<p><input type="radio" name="whole bean">
<label for="whole bean">whole bean</label>
<br>
<input type="radio" name="ground">
<label for="ground">ground</label></p>
</div>
<div class="tablerow">
<p>Extras:</p>
<p><input type="checkbox" name="gift warp">
<label for="gift warp">Gift warp</label>
<br>
<input type="checkbox" name="order">
<label for="order">Include eatalog with order</label></p>
</div>
<div class="tablerow">
<p><label for="number">Number of bags</label></p>
<p><input type="number" min="1" max="20"></p>
</div>
<div class="tablerow">
<p><label for="date">date:</label></p>
<p><input type="date" name="date"></p>
</div>
<div class="tablerow">
<p>Ship to:</p>
<p></p>
</div>
<div class="tablerow">
<p><label for="yourname" >name</label></p>
<p><input type="text" name="yourname" placeholder="姓名"></p>
</div>
<div class="tablerow">
<p><label for="address">Address</label></p>
<p><input type="text" name="" > </p>
</div>
<div class="tablerow">
<p><label for="city">City</label></p>
<p><input type="text" name=""></p>
</div>
<div class="tablerow">
<p><label for="state">State</label></p>
<p><input type="text" name=""></p>
</div>
<div class="tablerow">
<p><label for="zip">Zip</label></p>
<p><input type="text" name=""></p>
</div>
<div class="tablerow">
<p><label for="tel">Phone</label></p>
<p><input type="tel" name="phone"></p>
</div>
<div class="tablerow">
<p><label for="submit"></label></p>
<p><input type="submit" name="submit" value="Order Now"></p>
</div>
<div class="tablerow">
<fieldset>
<legend>身份信息</legend>
<div>
<label for="firstname">firstname:</label>
<input type="text" name="firstname" id="firstname"></div><br>
<div><label for="lastname">lastname:</label>
<input type="text" name="lastname" id="lastname"></div>
</fieldset>
</div>
</form>
</div>
</body>
</html>
--------------------------------------------------------------------------------
为了对齐也是蛮拼的......尝试了下伪元素和属性选择器
div.tablerow p:first-child{
text-align: right;
}
input[name="yourname"]{
width: 240px;
height:35px;
padding-left: 25px;
font-size: 1.8em
}
并且尝试了下对这个<input>标签的样式改变
<div class="tablerow">
<p><label for="yourname" >name</label></p>
<p><input type="text" name="yourname" placeholder="姓名"></p>
</div>
-----------------------------------------------------------------------------
简单的表单布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background: #f8f8f8;
}
legend{
font-weight: bold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name:<em class="required">(Required)</em></label>
<input type="text" name="author" id="anthor">
</div>
<div>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</div>
<div>
<label for="url">Web Address:</label>
<input type="text" name="url" id="url">
</div>
</fieldset>
</form>
</body>
</html>
将标签定位在表单元素的上方实际上非常简单。标签在默认情况下是行内元素。但是，将他们的display属性设置为block会使他们产生自己的块框，迫使元素转到下一行。在不同的浏览器中，文本输入框的宽度不一样，因此为了一致，应该显式地设置文本输入框的宽度。在这里用em创建可伸缩的表单布局。
label{
display:block;
cursor:pointer;
}
input{
width:20em;
}
在这里把标签的光标样式改为pointer，这表明可以与标签交互。（把代码直接复制到sublime text里面好像不行~。~）
在这个示例中，通过在输入元素上应用宽度，定义了文本框的宽度。但是，输入元素包括其他表单控件（如复选框、单选按钮和提交按钮）和比较常用的文本输入框。因此，如果将元素设置为20em宽的话，所有输入元素都会变成20em宽。
解决这个问题的一种方法是，使用属性选择器寻找特定类型的表单元素。所以并不把所有输入元素都设置为20em，而是专门寻找文本输入元素：
祭出属性选择器(IE6别打我)imput[type="text"]{width:20em;}
what a pity....属性选择器只在比较现代的浏览器中可用。可以给他们分配一个类例如class="radio"
然后可以把单选按钮的宽度设置为auto，从而覆盖前面对输入元素的设置。对于复选框和提交按钮也可以这么做：
input.radio,input.checkbox,input.submit{width:auto;}
也可以给加点修饰
input[type="text"]:focus,textarea:focus{
background: #ffc;
}
这样一个简单的表单布局基本完成
------------------------------------------------------------------------------------------------------
复杂的表单布局
对于比较长的复杂的表单，垂直间距会造成问题，表单也不容易查看。为了便于浏览，减少使用的垂直空间，有必要将标签和表单元素水平布置，而不是垂直布置。
非常简单，把<label>元素的display:block取消掉，设置宽度为10em，然后让标签浮动
label{
float:left;
width:10em;
cursor: pointer;
}
如果表单标签可能跨多行，还应该清理div容器，这会避免他们干扰下一组标签和弄乱布局。
form div{
clear:left;
}
原文：http://www.cnblogs.com/notjustsoso/p/5002622.html