我们先来设置一个简单的表单
<！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"