我们先来设置一个简单的表单
<！doctype html>
<html>
<head> <meta charset="utf-8"> <title>一个简单的表单</title> </head> <body> <form> 姓： <input type="text" name="lastname"> <br/> 名： <input type="text" name="firstname">
</form>
</body>
</html>
form是表单的标签。input是输入的意思。type是类型的意思。text是文本的意思
type=text代表一个文本框，可以输入文字字母等。
框内的属性
name在着表单中是表单内的意思
name=lastname在文本框输入姓
name=firstname在文本框输入名
<!doctype html> <html> <head> <meta charset="utf-8"> <title>输出密码试试看</title> </head> <body> <form> 用户： <input type="text" name="user" placeholder="用户名"> <br /> 密码： <input type="password" name="password" placeholder="密码"> </form> </body> </html>
将password设置到类型处，所输入的文本就是隐藏的了。大多数的浏览器中文本区域最多输入20个字符。这里英文type类型不一样所以会导致表单长度不一样。 placeholder后面是显示在空格内的字符。提示用户输入。
<!doctype html> <html> <head> <meta charset="utf-8> <title>选项式表单x</title> </head> <body> <form> <input type="radio" name="sex" value="male" />male <br /> <input type="radio" name="sex" value="female" />famale </form> </body> </html>
type=radio类型等于单项选择的意思，name="sex"等于性别的意思。value="选项内容"
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多项选择表单</title> </head> <body> <p>你喜欢什么？</p> <form> <input type="checkbox" name="代码"/> 我喜欢代码 <br/> <input type="checkbox" name="上网"/> 我喜欢上网 <br/> <input type="checkbox"name="跑步"/> 我喜欢跑步 </form> </body> </html>
type="checkbox"这是多项选择表单。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格的动作属性和确认按钮</title>
</head>
<body>
<form name="input" action="后端地址" meahod="get">
用户名：
<input type="text" name="user"/>
<input type="submit" value="提交">
</form>
</body>
</html>
action链接后端的地址。meahod=get从服务器获取数据.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>带有预选值的下拉列表</title> </head> <body> <form> <select name="汽车"> <option value="奔驰'>奔驰</option> <option value="宝马">宝马</option> <option value="奥迪"selected="selected" >奥迪</option> <option value="法拉利">法拉利</option> </form> </body> </html>
select是选择的意思，制作下拉列表表单。option是列表中选项的意思。selected是列表预选的意思。在打开下拉列表选项时它会优先选择。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于表单的文本域以及按钮</title>
</head>
<body>
<form>
<textarea rows="10" cols="30">
在这个区域可以输入的文本将没有限制
</textarea>
<input type="button" value="我是按钮快来点我">
</form>
</body>
</html>
其中：textarea=文本 rows等于文本域长度cols等于文本域的宽度。
type是按钮的意思，value=按钮内容。
这张图最上面的手机号注册背景class="zbar"