整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
表单input：表单是用来收集信息的，由表单控件(表单元素)、提示信息、表单域构成。
input控件的属性及值：
除以上属性外，input元素type属性还有一个number属性值，此为仅可以填数字，默认是可以选择或者填写任意数字，但是当type属性为number属性值时，可以使用max和min属性来限制数字的取值范围，input更多属性见HTML5
<input type="number" min="0"> <!-- min属性限定最小值为0 -->label标签：
label标签是为input标签服务的，用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
<label> <!-- 1、直接使用label标签包裹要点击的元素获得焦点 -->
姓名：<input type="text">
</label>
<label for="name">姓名：</label> <!-- 2、使用label标签的for属性找input元素获得焦点 -->
<input id="name" type="text"/>表单域form：
form元素用于创建一个表单，form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮，如果form里面没有submit按钮，那么可以使用button中type属性为submit的button按钮，这个buttont按钮可能不在form表单中，此时可以给type属性值为submit的button添加form属性，值为form表单的id值，如：
<form action="" method="get" name="" id="userform"> <!-- action属性是指定表单提交给后端的地址，method属性设置提交方式，其属性值有post和get,name属性用来给表单域定义名字，用于区分表单域 -->
姓名：<input type="text">
年龄：<input type="number" min="0">
</form>
<button type="submit" form="userform">提交</button>文本域textarea：
input元素只能显示一行内容，textarea元素可以显示多行，一般做留言效果使用，常常被称为富文本域。
<!-- rows属性限定行数，当行数超过限定后会出现滚动条，cols属性限定的是列数，当超过限定后会换行。 -->
<textarea cols="20" rows="10"></textarea>UEditor：在实际开发中如果需要用到比较复杂的富文本域（类似word的，可以上传视频图片等功能）推荐使用第三方插件，这里推荐大家一款使用的富文本插件：UEditor,使用它可以在网页中实现类似word等编辑，如果想要了解更多及方法请查阅官方文档：http://fex.baidu.com/ueditor/，当然类似的富文本编辑器还有很多，如：CKeditor：https://ckeditor.com/等
富文本编辑器可以自己做，其原理是利用document的execCommand()方法，这个方法实际开发中很少用，已经废弃，所以一般很少有人了解，如果想要了解更多，可阅读官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
下拉列表(下拉菜单)select：
<body>
<select name="" id="">
<optgroup value="" label="分组1"><!-- optgroup标签用来分组 -->>
<option value="">
测试1
</option>
<option value="">
测试2
</option>
<option value="">
测试3
</option>
</optgroup>
<optgroup value="" label="分组2">
<option value="">选项1</option> <!-- select默认选择第一个option，当给option加selected属性时，则会选中此项显示 -->
<option value="" selected="selected">选项2</option> <!-- selected属性的selected属性值可以省略，其效果不变-->
<option value="">选项3</option>
</optgroup>
</select>
</body>块引用标签：
有的时候会引用名人名言等，此时建议使用引用标签，引用标签分为长引用和短引用两种，长引用标签效果是插入换行和外边距，短引用标签的效果是加上虚拟的引号。
<blockquote>海上生明月，天涯共此时。</blockquote><!-- 长引用标签 -->
<q>引号</q><!-- 段引用会给内容加上虚拟的引号，这个引号根本不存在。 -->提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan
例
带有两个输入字段和一个提交按钮的 HTML 表单：
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
（更多实例见页面底部）
浏览器支持
所有主流浏览器都支持 <form> 标签。
标签定义及使用说明
<form> 标签用于创建供用户输入的 HTML 表单。
<form> 元素包含一个或多个如下的表单元素：
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
HTML 4.01 与 HTML5之间的差异
HTML5 新增了两个新的属性：autocomplete 和 novalidate，同时不再支持 HTML 4.01 中的某些属性。
HTML 与 XHTML 之间的差异
在 XHTML 中，name 属性已被废弃。使用全局 id 属性代替。
属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） |
| accept-charset | character_set | 规定服务器可处理的表单数据字符集。 |
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| autocompleteNew | onoff | 规定是否启用表单的自动完成功能。 |
| enctype | application/x-www-form-urlencodedmultipart/form-datatext/plain | 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） |
| method | getpost | 规定用于发送表单数据的 HTTP 方法。 |
| name | text | 规定表单的名称。 |
| novalidateNew | novalidate | 如果使用该属性，则提交表单时不进行验证。 |
| target | _blank_self_parent_top | 规定在何处打开 action URL。 |
全局属性
<form> 标签支持 HTML 的全局属性。
事件属性
<form> 标签支持 HTML 的事件属性。
实例
带有复选框的表单
此表单包含两个复选框和一个提交按钮。
带有单选按钮的表单
此表单包含两个单选框和一个提交按钮。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
Button 对象
Button 对象代表 HTML 文档中的一个按钮。
该元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。
在 HTML 文档中 <input type="button"> 标签每出现一次，一个 Button 对象 就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个按钮，或者通过使用 document.getElementById()。
Button 对象属性
W3C: W3C 标准。
| 属性 | 描述 | W3C |
|---|---|---|
| disabled | 设置或返回是否禁用按钮。 | Yes |
| form | 返回对包含该按钮的表单对象的引用。 | Yes |
| name | 设置或返回按钮的名称。 | Yes |
| type | 返回按钮的表单元素类型。 | Yes |
| value | 设置或返回在按钮上显示的文本。 | Yes |
标准属性和事件
Button 对象同样支持标准的属性 和 事件。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
