程序员web前端培训分享HTMLCSS之HTML表单标签：表单

1 ： 表单标签

<form></form>

属性：

action='接口地址'

method='get / post'

name='表单名称'

2 ： 表单控件

<input>

属性：

type='控件类型'

name：属性标识表单域的名称；

Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。

maxlength：控制最多输入的字符数，

Size：控制框的宽度（以字符为单位）

1）文本框

<input type="text" value="默认值"/>

2)密码框

<input type="password" />

3)提交按钮

<input type="submit" value="按钮内容" />

4)重置按钮

<input type="reset" value="按钮内容" />

5)空按钮

<input type="button" value="按钮内容" />

3：表单补充

1）单选按钮组

<input type=“radio” name=“ral” />男

<input type=“radio” name=“ral”

checked=“checked”/>(默认选中)女

2）复选框组

<input type="checkbox" name="" />

<input type="checkbox" name="" disabled="disabled" />

* disabled="disabled" (禁用)

* checked="checked" (默认选中)

3）下拉列表（菜单）：

<select >

<option>下拉选项1</option>

<option>下拉选项2</option>

…………

</select>

表示下拉列表，name属性不是必须的

默认选择项用selected属性；

4）表单域多行文本定义：

语法: <textarea name="" cols="" rows="" ></textarea>

多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。

阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）

5)上传文件：

语法：<input type="file">

4：表单标签补充

1）表单字段集

语法：<fieldset></fieldset>

?

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

?

2）字段级标题：

语法：<legend align="left/center/right/justify"></legend>

说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。

3)提示信息标签：

语法：<label for="绑定控件id名"></label>

?

说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

拓展：post/get

· (1). 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；

· (2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；

· (3). 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的 请求头 中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的 请求体 中。

· (4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。

· (5). 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。

.form 标签

1）作用

<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容

2）基本格式

<form action="服务器端地址（接受表单内容的地址）" name="表单名称" method="post|get">...</form>

3）常用属性

1.name

表单名称

2.method

传送数据的方式，分为post和get两种方式：

0. get方式：get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性。
1. post方式：post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制。

3.action

表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其属性为”no“。

4.enctype

设置表单的资料的编码方式。属性值：

0. application/x-www-form-urlencoded：在发送前编码所有字符（默认）
1. multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
2. text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

5.target

和超链接的属于类似，用来指定目标窗口。

2.input 标签

1）注意

input 标记没有结束标记。

2）基本语法

<input type="" name="" value="" size="" maxlength="">

3）属性

1.type属性

0. text：文本输入域
1. password：密码输入域
2. submit：提交按钮
3. reset：重置按钮
4. button：普通按钮
5. radio：单选按钮，可以使用”checked“属性来设置默认选中项
6. checkbox：复选框，可以使用”checked“属性来设置默认选中项
7. hidden：隐藏表单域
8. file：文件域

2.name属性

定义控件的名称

3.value属性

初始化值，打开浏览器时，文本框中的内容

4.size属性

设置控件的长度

5.maxlength属性

输入框中最大允许输入的字符数

3.textarea 标签

1）作用

使用 textarea 标记可以实现一个能够输入多行文本的区域。

2）语法格式

rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数；value指定传送到服务器上面的值。

<textarea name="name" rows="value" cols="value" value="value">... ... </textarea>

4.select 标签

1）作用

菜单下拉列表域，生成一个下拉列表。

2）option 标签

作用：

option 标记用来指定列表中的一个选项，需要放在 select 之间。

值：

0. value：给选项赋值，指定传送到服务器上面的值。
1. selected：指定默认的选项。

3）语法格式

<select name="" size="value" multiple>    <option value="value1" selected>选项1</option>    <option value="value2">选项2</option>    <option value="value3">选项3</option>    ... ... ...</select>

4)属性

0. multiple属性：multiple属性不用赋值，其作用是，表示用可以多选的下来列表，如果没有这个属性就只能单选。
1. size属性：设置列表的高度。
2. name属性：定义这个列表的名称。

5.label 标签

1）作用

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

2）语法

<label for="male">Male</label><input type="radio" name="sex" id="male">

6.举例

<form name="form" method="post" action="no" enctype="multipart/form-data">  <label for="male">账号：</label><input type="text" name="username" value="admin"  id="male"><br>  密码：<input type="password" name="password" size="50" maxlength="6"><br>  性别：<input type="radio" name="sex" value="男"> 男    <input type="radio" name="sex" value="女" checked="checked"> 女<br>  兴趣：<input type="checkbox" name="interest" value="篮球">篮球    <input type="checkbox" name="interest" value="足球" checked="checked">足球    <input type="checkbox" name="interest" value="羽毛球" checked="checked">羽毛球    <input type="hidden" name="hidden"><br>  头像：<input type="file" name="file"><br>  简介：    <textarea rows="10" cols="30">        </textarea><br>  城市：    <select name="city" multiple>      <option value="beijing">北京</option>      <option value="shanghai" selected>上海</option>      <option value="nanjing">南京</option>      <option value="guangdong">广东</option>    </select>  <br>  <input type="submit" value="注册">  <input type="reset">  <input type="button" value="普通按钮"></form>