无论我们使用什么语言来完成web开发，都必然会用到HTML表单标签，HTML表单标签在开发中经常会被我们用来去收集我们想要得到的数据信息，基本上所有的网页都有表单的利用，表单合理的使用和布局是作为一个前端开发者所必须具有的基本技能。

表单标签结构树：

form标签

在网页开发中

标签代表一个表单，表单用于向服务器传输数据。

标签能够包含，通过更改的属性值，可以空指是文本字段，复选框，单选框或提交按钮等。还可以包含 <select>等。学习表单很大程度程度上就是在学习<input>标签。<form>常用属性:name:用于定义表单的名称action:用于规定提交表单时向何处发送表单数据。method:用于规定提交的方式。一般取值 POST或GET<h1 class="pgc-h-arrow-right" data-track="14">input种类</h1><input> 标签用于搜集用户信息，是表单中出现频率最高的标签。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。<input>标签type属性值 :text属性：<input type=”text”>定义为单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。常用属性:name:定义标签名称value:定义标签值size:定义输入字段的长度maxlength:定义可输入最大字符个数password属性：<input type=”password”>定义密码字段。该字段中的字符被掩码.常用属性:name:定义标签名称value:定义标签值size:定义输入字段的长度maxlength:定义可输入最大字符个数<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><form action="" name="myform" method="get"> 姓名：<input type="text" name="username" value="zhangsan" /> 密码：<input type="password" name="password" /> </form></code></pre> radio属性：<input type=”radio”>定义单选按钮。常用属性:name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radio的name值必须一样。value:定义标签值checked:定义该标签默认被选中。<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>性别：<input type="radio" name="gender" value="male" checked="checked"/>男 <input type="radio" name="gender" value="female"/>女 </code></pre> checkbox属性：<input type=”checkbox”>定义复选框。常用属性:name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。value:定义标签值checked:定义该标签默认被选中。<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>爱好：<input type="checkbox" name="hobby" value="football" checked="checked"/>足球 <input type="checkbox" name="hobby" value="basketball"/>篮球 <input type="checkbox" name="hobby" value="paiqiu"/>排球 </code></pre> file属性：<input type=”file”>定义输入字段和 "浏览"按钮，供文件上传。常用属性:name:定义标签名称<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>上传头像：<input type="file" name="bigheadphoto"/> </code></pre> button属性：<input type=”button”>定义可点击按钮（大多数情况下，用于通过 JavaScript 启动脚本）常用属性:name:定义标签名称value:按钮显示名称submit属性：<input type=”submit”>定义提交按钮。提交按钮会把表单数据发送到服务器。常用属性:name:定义标签名称value:按钮显示名称reset属性：<input type=”reset”>定义重置按钮。重置按钮会清除表单中的所有数据。常用属性:name:定义标签名称value:按钮显示名称 <pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><input type="reset" value="重置"/> <input type="button" value="button"/> <input type="submit" value="submit"/></code></pre>image属性：<input type=”image”>定义为图像形式的提交按钮。常用属性:name:定义标签名称src:定义作为提交按钮显示的图像的urlalt:定义作用图像的替代文本。这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片作为提交按钮。<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><input type="image" src="bookimages/buybutton.gif"/> <input type="submit" value="submit"/></code></pre> hidden属性：<input type=”hidden”>定义隐藏的输入字段。常用属性:name:定义标签名称value:定义标签值<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><input type="hidden" name="hide" value="xxx"/></code></pre>hidden所定义出来的输入框和值是在页面上看不到但却又真实存在的，在开发中常用来放入一些不希望用户看到，但却对开发过程很有帮助的数据。<h1 class="pgc-h-arrow-right" data-track="160">textarea标签：</h1><textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)常用属性:name:定义多行文本框名称cols:定义多行文本框可见宽度rows:定义多行文本框可见行数wrap:规定多行文本框中文字如何换行。<pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>备注： <textarea name="ta" cols="30" rows="5">我是textarea

select与option标签

1.标签内部

常用属性:

value:定义送往服务器的选项值

selected:定义选项为选中状态。

地址：

注意：

关于POST与GET方式区别:

1. get方式只能少量数据,而post可以携带大数据。

2. get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。

达永编程网

程序员技术分享与交流平台

超文本标记语言表单标签详解，教你如何合理利用表单收集用户信息

form标签

select与option标签