版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
表单：
格式：
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
method：规定如何发送表单数据，常用值为：get|post
action：表示向何处发送表单数据（里面是一个网址）
注意：
在实际网页开发中通常采用post方式提交表单数据
input 后面的
- type是元素类型
- name是元素名称
- value是元素值
input后边的属性：
文本框：
<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
type：文本框
name：文本框名称
value：文本框初始值
size：文本框长度
maxlength：文本框可以输入的最多字符
密码框：
<input type="password " name="pass" size="20" />
单选按钮：
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
checked 默认值
复选框：
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
checked 默认选中
列表框：
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
selected 默认选中
按钮：
重置，提交，普通按钮：
<input type="reset" name="butReset" value="reset按钮"> 重置
<input type="submit" name="butSubmit" value="submit按钮"> 提交
<input type="button" name="butButton" value="button按钮"/> 普通按钮
value： 是体现在按钮上的文字
图片按钮：（将图片当作为按钮）
<input type="image" src="images/login.gif" />
将图片作为一个按钮
多行文本域：
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
textarea 文本域
cols 显示的列数
rows 显示的行数
文件域：
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
需要在form表单里面添加enctype属性
类型为 file
邮箱：
<p>邮箱:<input type="email" name="email"/></p>
会自动的验证（必须带有@，以及前后必须有字符）
网址：
<p>请输入你的网址:<input type="url" name="userUrl"/></p>
会自动验证URL地址格式是否正确（必须有http://）
数字：
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>
min 和 max是设置数字的最大值和最小值
step 步长，可以设置小数实现number的小数
value 默认值
滑块：
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
与上边的数字类似
搜索框：
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
会自动提供一个叉号，取消填写的内容
隐藏、只读和禁用：
- hidden：隐藏
- readonly：只读
- disable：禁用
标记元素（点击汉字，可以进行操作）：
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
示例：
<label for=" male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
label的for名字要和id命名相同
表单的初级验证：
表单验证的好处
- 减轻服务器的压力
- 保证数据的可行性和安全性
有三种：
placeholder 提示文本框输入内容提示
required 内容不能为空
pattern 正则表达式