form表单标签及属性的介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。

一、 表单标签

  <form></form>

  常用属性

  Action 跳转到什么页面

  Method  以什么模式提交

  Get

  Url有长度限制

  IE6.0 url 最大长度 2083个字符 超过无法提交

  IE7.0 最大长度 2083个字符 超过最大长度仍然可以提交但是只能提交2083个字符

  Opera 9.52

  最大长度7648个字符 超过最大长度无法提交

  所有提交内容会显示到地址栏位置 很不安全

  a标签的跳转方式也是get方式传递

  Post

  大小不受限制 安全

  Enctype

  Multipart/form-data(有文件域的时候必须有这个的时候)

  Application/x-www-form-urlencoded

二、Input标签

   属性

  1.Name 必须有 否则数据无法传递

  2.type

  Text 文本框

  Submit 提交按钮

  Password 密码域

  Radio  单选框

  如果你认为是统一个选项那么他们的name值必须是一样的 否则就变成单独的单选框了

  注意如果是单选框就必须有value属性用来传递你要传递的值

  Checkbox 复选框

注意:如果是复选框那么你的name值就需要加上一个[] 用来传递至 这个东西你加上就好 当学php的时候你就知道[]是什么意思了

  必须要有value属性用来传递你选中了哪个的值

  Button 普通按钮

  Reset  重置按钮 清空表单中的所有内容

  Hidden 隐藏域

  隐藏域是给程序员来使用的用来传递内容和想要传递的信息但是不想让用户看见的内容 都使用隐藏域来传递

  他必须有name属性和value属性 用来你传递的是什么信息

Image  图片提交按钮

  使用图片提交按钮必须有src属性用于添加图片路径

  File 文件域

但是如果你使用文件域了那么你的form表单标签的属性就要多添加一个内容

  3.readonly 文本区只读

  4.Disabled  禁用

  5.Value 默认值 提示信息 传递值的作用

  6.Checked 默认选中 适用的属性有单选框和复选框

三、下拉列表标签

  1.<select></select>

  常用属性:

  Name 传递值 必须有

  Disabled 禁止

  Size 显示几个下拉

  Multiple 多选默认会显示所有  但是如果你设置了这个属性 那么你的名字属性就要在他的后面加上[]

  2.下拉项标签

  <option></option>

  常用属性:

  Value 提交的值 若没有则提交内容

  Selected 定义选中项

  Disabled 选项禁止

四、多行文本域

  <textarea></textarea>

  常用属性:

  Name 传递值 必须写

  Cols 可见宽度

  Rows 可见行数

  Readonly 文本区域只读

  Disabled 禁止

总结:

<form enctype="multipart/form-data" action="" method="post">

<table>

<tr>

<td><label for="txtname">账号:</label></td>

<td><input type="text" id="txtname" name="login_username" /></td>

</tr>

<tr>

<td><label for="txtpswd">密码:</label></td>

<td><input type="password" id="txtpswd" name="login_pswd" /></td>

</tr>

<tr>

<td colspan=2>

<input type="reset" />

<input type="submit" />

</td>

</tr>

</table>

</form>

表单主要用于向服务器传输数据;如常见的登录、注册页面。那么我们除了要了解表单标签以及表单标签属性外也需要理解怎么传输数据的。传输的方式及区别 get post

get方式

form表单里所填的值,附加在action指定的URL后面,做为URL链接而传递。

在上面的form代码中输入如下:

账号:admin

密码:123456

点击提交后:URL变为:

http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456

变量提交的样式为:html元素的name属性=提交的值。多个变量,以 & 符号隔开。

 post方式

form表单里所填的值,附加在HTML Headers上。

同上面get方式一样。

账号:admin

密码:123456

点击提交后:URL变为

http://localhost:4778/ashx/login.ashx

可看到只是action指定的URL,参数并没有附加在URL后面。

通过Fiddler软件,可以查看到HTML Header区域:有个名为WebKitFormBoundary2T7xmZEtMRQeAhNh 的对象

查看【Raw】区域,可看见里面包含了提交的变量

区别

1数据的查询:比如浏览论坛时,URL一般包含了分类、页码数、每页记录数等信息。 get 方式,能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息,不方便进行检验查询条件。

2敏感数据的提交(安全性):对一项记录,进行更改、添加操作时,比如注册用户、更改用户资料等。get 方式附加在URL上,会泄露掉敏感的消息。 post方式,能隐藏掉敏感的信息。

3大数据文本传递:get 虽然方便查询,但由于是附加在URL上,各浏览器对URL也有个长度限制。IE :2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。

时间: 2024-08-01 06:33:19

form表单标签及属性的介绍的相关文章

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

form表单标签的enctype属性的作用

Enctype是指定将数据回发到服务器时浏览器使用的编码类型,其编码类型有以下三种 一. application/x-www-form-urlencoded 这是通过表单发送数据时默认的编码类型.我们没有在from标签中设置enctype属性时默认就是application/x-www-form-urlencoded类型的.application/x-www-form-urlencoded编码类型会把表单中发送的数据编码为名称/值对.这是标准的编码格式.当表单的ACTION为POST的时候,浏览

SpringMVC&lt;from:form&gt;表单标签和&lt;input&gt;表单标签简介 转http://blog.csdn.net/hp_yangpeng/article/details/51906654

SpringMVC<from:form>表单标签和<input>表单标签简介 在使用SpringMVC的时候我们可以使用spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需要先在JSP中声明使用的标签,具体做法是在JSP文件的顶部加入以下指令: Jsp代码 <%@taglib uri="http://www.springframework.org/tags/fo

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识. 在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了. 这个我想对于我们来说,应该是个很新奇的玩意吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>form

form表单标签(非常重要,必须掌握)

表单标签:form(非常重要,必须掌握) form标签用于获取用户跟浏览器交互(包含输入,选择,上传文件等操作)的数据,并将数据打包发给服务端 属性 action:控制数据的提交路径 action="":默认向当前页面所在的地址提交数据 action="全路径":向当前的绝对路径的地址提交数据 action="/index/":后缀文件,将该后缀跟当前页面的地址进行拼接,并将数据提交到这个页面中 method:控制数据的提交方式(也就是请求首行中

form表单提交target属性使用

通过form表单提交刷新iframe <form action="doctor/selPackage" target="projectlistframe" id="frm"> <table width="80%" border="0" cellspacing="0" cellpadding="0" class="tableleft"

Form表单标签的Enctype属性的作用及应用示例介绍

Enctype :指定将数据回发到服务器时浏览器使用的编码类型.用于表单里有图片上传. 编码类型有以下三种: application/x-www-form-urlencoded: 在发送前编码所有字符(默认).这是标准的编码格式. multipart/form-data: 不对字符编码,在使用包含文件上传控件的表单时,必须使用该值. text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符. 例子: <form action="${pageContext.reque

Html辅助方法 之 Form表单标签

一.Html.BeginForm <form>标签 //视图代码 @using (Html.BeginForm("search", "home", FormMethod.Get),new { target="_black",@class="form1" }) { <input type="text" value="" /> } //生成的HTML代码 <fo

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte