超文本标记语言表单标签详解，教你如何合理利用表单收集用户信息
无论我们使用什么语言来完成web开发，都必然会用到HTML表单标签，HTML表单标签在开发中经常会被我们用来去收集我们想要得到的数据信息，基本上所有的网页都有表单的利用，表单合理的使用和布局是作为一个前端开发者所必须具有的基本技能。
表单标签结构树：
表单的基本构成元素
在网页开发中<form>标签代表一个表单，表单用于向服务器传输数据。
<form>标签能够包含<input>，通过更改<input>的属性值，可以空指<input>是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。学习表单很大程度程度上就是在学习<input>标签。
<form>常用属性:
name:用于定义表单的名称
action:用于规定提交表单时向何处发送表单数据。
method:用于规定提交的方式。一般取值 POST或GET
<input> 标签用于搜集用户信息，是表单中出现频率最高的标签。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<input>标签type属性值 :
text属性：
<input type=”text”>
定义为单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
常用属性:
name:定义标签名称
value:定义标签值
size:定义输入字段的长度
maxlength:定义可输入最大字符个数
password属性：
<input type=”password”>
定义密码字段。该字段中的字符被掩码.
常用属性:
name:定义标签名称
value:定义标签值
size:定义输入字段的长度
maxlength:定义可输入最大字符个数
密码输入框内输入信息被掩码
radio属性：
<input type=”radio”>
定义单选按钮。
常用属性:
name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radio的name值必须一样。
value:定义标签值
checked:定义该标签默认被选中。
只能选择男或女设置默认选择男
checkbox属性：
<input type=”checkbox”>
定义复选框。
常用属性:
name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。
value:定义标签值
checked:定义该标签默认被选中。
复选框，默认状态只选择足球
复选框，多选状态
file属性：
<input type=”file”>
定义输入字段和 \”浏览\”按钮，供文件上传。
常用属性:
name:定义标签名称
点击选择文件将选择文件上传
button属性：
<input type=”button”>
定义可点击按钮（大多数情况下，用于通过 JavaScript 启动脚本）
常用属性:
name:定义标签名称
value:按钮显示名称
submit属性：
<input type=”submit”>
定义提交按钮。提交按钮会把表单数据发送到服务器。
常用属性:
name:定义标签名称
value:按钮显示名称
reset属性：
<input type=”reset”>
定义重置按钮。重置按钮会清除表单中的所有数据。
常用属性:
name:定义标签名称
value:按钮显示名称
点击充值按钮表单信息被清空点击submit将提交数据
image属性：
<input type=”image”>
定义为图像形式的提交按钮。
常用属性:
name:定义标签名称
src:定义作为提交按钮显示的图像的url
alt:定义作用图像的替代文本。
这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片作为提交按钮。
点击图片与点击submit按钮作用效果一样
hidden属性：
<input type=”hidden”>
定义隐藏的输入字段。
常用属性:
name:定义标签名称
value:定义标签值
hidden所定义出来的输入框和值是在页面上看不到但却又真实存在的，在开发中常用来放入一些不希望用户看到，但却对开发过程很有帮助的数据。
<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
常用属性:
name:定义多行文本框名称
cols:定义多行文本框可见宽度
rows:定义多行文本框可见行数
wrap:规定多行文本框中文字如何换行。
5行30列文本域默认值是写在标签对之间的值
1.<select>
用于定义一个下拉列表
常用属性:
name:定义下拉列表的名称
size:定义下拉列表中可见选项的数目
multiple:定义可选择多个选项
2.<option>
用于定义下拉列表中的选项。
<option>需要位于<select>标签内部
常用属性:
value:定义送往服务器的选项值
selected:定义选项为选中状态。
设置默认选中状态为天津
注意：
关于POST与GET方式区别:
1. get方式只能少量数据,而post可以携带大数据。
2. get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。
在网页开发中，我们需要掌握的常用HTML标签有哪些？
如果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？
html5文档类型声明：<!doctype html>
html4文档类型声明：<!DOCTYPE html PUBLIC \”-//W3C//DTD XHTML 1.0 Transitional//EN\” \”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\”>
这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。
<html>
<head></head>
<body></body>
</html>
在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。
head头部有以下几种常用标签：
meta：主要提供有关页面的元信息。
link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。
title：页面标题的标签。
script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。
1、块级标签。
块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端页面显示的效果如下图：
常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、内联标签。
内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：
常用的内联标签有：span、a、b、strong、i、em 。
3、内联块级标签。
内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src=\”w5.jpg\” alt=\”\”>
<img src=\”w5.jpg\” alt=\”\”>
CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：
常用的内联块级标签有：img、input、textarea。
4、区域标签。
所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。
常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。
5、表单标签。
这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：
表单常用的标签有：form、input、select、option、textarea 。
以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
