.HTML中表单元素的基本概念

HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合,因此是制作动态网站很重要的内容.

表单一般用来收集用户的输入信息

2.表单工作原理

访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交,这些信息通过网络传送到服务器上.服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误.当数据完整无误后,服务器反馈一个输入完成的信息

3.表单的功能

功能:表单用于向服务器传输数据,从而实现用户与WEB服务器的交互表单能够包含input系统标签,比如文本字段,复选框,单选框,提交按钮等表单还可以包含textarea,select,fieldset,label标签.

4.表单的常用类型及说明

1.表单常用的类型有:

2.表单属性：

3.文本输入框(text)：

当用户要在表单中输入字母,数字内容时,就会用到文本域

代码如下:

注意,表单本身并不可见.同时,在大多浏览器中,文本域的缺省宽度是20个字符.

在密码域中输入的字符,浏览器将使用项目符号来代替这些字符.

4.单选按钮(radio)：

当用户从若干给定的选择中选取一个选项时,就会用到单选框.

代码如下:

当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态.

5.复选框(checkboxes)

当用户需要从若干给定的选择中选取一个或多个选项时,就会用到复选框

代码如下:

6.重置按钮(reset)

重置按钮会清除当前页面上的用户输入的所有数据,把当前页面恢复到打开时的样子.

代码如下:

<form><p><input type="reset"></p></form>

7.提交按钮

会在当前页面生成一个提交按钮,用户点击此按钮,浏览器就会把当前页面用户输入的数据传送到服务端

代码如下:

<form><p><input type="button" value="按钮"/></p></form>

8.提交文件

当需要把客户端的文件发送到服务端时,需要用到提交文件按钮

代码如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上传文件注意两点: 请求方式必须是post enctype="multipart/form-data"

9.下拉菜单

当需要用户从很多选项中选择一个或多个选项时,也可以使用下拉列表.

代码如下:

代码如下:

OPTION

selected="selected"

10.表单属性

1.action属性的说明:

使用action选项来指定服务端的脚本来处理被提交的表单

<form action="/index/" method="post">

如果省略action属性,则action会被设置为当前页面

2.method属性的说明:

method属性规定在提交表单时所用的http方法(POST或GET)

<form action="/index/" method="post">

或

<form action="/index/" method="get">

3.get方法或post方法的使用方式说明:

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息.

当使用get方法时,表单的数据在页面地址栏中是可见的

因此,get最适合少量数据的提交,浏览器会设定容量限制

如果表单正在更新数据,或者包含敏感信息(比如密码)时应该使用post,post的安全性更好.

因为在页面地址栏中被提交的数据是不可见的.

切图 qietu(.com)

TML表单元素

<form.../>元素用于生成输入表单，该元素不会生成可视化部分。在HTML5规范以前，其他表单控件，如单行文本框，多行文本域、单选按钮、复选框等都必须放在<form.../>元素之内。

<form.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。除此之外还可以指定如下几个属性。

1、action：指定当单击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性即可指定一个绝对地址，也可指定一个相对地址。该属性必填。

2、method：指定提交表单时发送何种类型的请求，该属性值可谓get或post，分别用于发送GET或POST请求。通常建议发送POST请求。该属性必填。

3、enctype：指定对表单内容进行编码所使用的字符集。

4、name：指定表单的唯一名称，建议该属性值与id属性保持一致。

5、target：指定使用哪种方式打开目标URL（提交请求会打开另一个URL资源），与超链接的target可接受的属性值完全一样，该属性值可以是_blank、_patent、_self和_top四个值中之一。

欢web前端网页开发和python开发的、请加下企鹅群：526929231 内有大量案例和学习教程，对python、和web感兴趣的朋友可以加下哦

form表单域

所有的控件(表单元素都写在form表单标签中)

<form>
 使用form标签建立表单域，当提交数据的时候会收集表单域里面的数据然后发送给服务器</form>

input表单控件元素

赋予不同的type值可实现不同的表单控件

下拉列表框

<select>
 <option value="music">听音乐</option>
 <option value="running">跑步</option>
 <option value="study">学习</option>
 <option value="coffee">找小姐姐一起喝咖啡</option></select><!-- selected="selected"默认选中 --><!-- size="2" 现实两行下拉项 --><!-- disabled 禁止选择 -->

selected默认选择一项

多行文本输入框(文本域) textarea

<textare cols="30" rows="10"></textarea>

clos显示多少列，rows现实多少行

按钮

单独使用没有效果，一般配合js点击按钮的时候执行什么操作

<input type="button" value="自定义按钮标题" />

重置按钮

回到表单初识状态

<input type="reset" value="重置表单" />

隐藏域

目的在于收集或发送信息 页面上面没有任何效果 CSRF跨域攻击在此作用

<input type="hidden" value="ABCD1234" />

label元素

为input元素定义一个标记，label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果你在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签是，浏览器就会自动將焦点转到和标签相关的表单控件上

<input id="man" type="radio" /><label for="man">男</label>

form表单属性

提交方式

格式化文本

• pre可定义预格式化的文本。

• pre元素中的文本通常会保留空格和换行符。

  主要用于在网页上显示代码，比如在网页当中显示html模板