form表单详解

表单属性   属性                          值                                           描述 accept                 MIME_type               规定通过文件上传来提交的文件的类型 accept-charset     charset                     服务器处理表单数据所接受的字符集 enctype                MIME_type              规定表单数据在发送到服务器之前应该如何编码 method                get/post                  规定表单数据发送的方式，get方法和post方法 name                   name                       规定表单的名称

target                  _blank/_parent/_self/_top 规定在何处打开action URL

1、action指定该表单发送时接受操作的地址       2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。       3、enctype指定表单数据在发送的服务器之前如何编码，特别注意的是，当含有上传域时要设置编码方式为enctype="multipart/form-data"，否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候，也有个选项是以二进制方式上传。

enctype的三个选项

值                                                            描述 application/x-www-form-urlencoded   在发送前编码所有字符（默认） multipart/form-data                            不对字符编码。以二进制的方式发送数据，当表单含有上传域时，必须使用后台才能获取上传的文件。 text/plain                                             空格转换为 "+" 加号，但不对特殊字符编码。

属性 值 描述 DTD
accept mime_type 规定通过文件上传来提交的文件的类型。 STF
align
  • left
  • right
  • top
  • middle
  • bottom
 不赞成使用。规定图像输入的对齐方式。 TF
alt text 定义图像输入的替代文本。 STF
checked checked 规定此 input 元素首次加载时应当被选中。 STF
disabled disabled 当 input 元素加载时禁用此元素。 STF
maxlength number 规定输入字段中的字符的最大长度。 STF
name field_name 定义 input 元素的名称。 STF
readonly readonly 规定输入字段为只读。 STF
size number_of_char 定义输入字段的宽度。 STF
src URL 定义以提交按钮形式显示的图像的 URL。 STF
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
 规定 input 元素的类型。 STF
value value 规定 input 元素的值。 STF

HTML表单(Form)常用控件

表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)

[php] view plain copy

print?

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>测试8</title>
  6. </head>
  7. <body>
  8. <form action="8.1.php" method="post"  enctype="multipart/form-data" target="_blank">
  9. <table width="400" border="1" cellpadding="1" cellspacing="1" bgcolor="#999999" bordercolor="#FFFFFF">
  10. <tr bgcolor="#FFCC33">
  11. <td width="103" height="25" align="right">姓名</td>
  12. <!--文本框-->
  13. <td height="25" align="left"><input type="text" name="txtBox" value="textVal"></td>
  14. </tr>
  15. <tr  bgcolor="#FFCC33">
  16. <td width="103" height="25" align="right">密码</td>
  17. <!--密码框-->
  18. <td height="25" align="left"><input type="password" name="pswBox" value="psw"></td>
  19. </tr>
  20. <tr  bgcolor="#FFCC33">
  21. <td width="103" height="25" align="right">文本域</td>
  22. <!--文本域-->
  23. <td height="25" align="left">
  24. <fieldset>
  25. <legend>简介</legend>
  26. <textarea name="txtAreaA" cols="25" rows="5" wrap="off">我是一个兵，来自老百姓</textarea>
  27. </fieldset>
  28. </td>
  29. </tr>
  30. <tr  bgcolor="#FFCC33">
  31. <td width="103" height="25" align="right">性别</td>
  32. <td height="25" align="left">
  33. <!--单选按钮-->
  34. <label><input type="radio" name="radioSex" value="male">男人</input></label>
  35. <input type="radio" name="radioSex" value="female">女人</input>
  36. </td>
  37. </tr>
  38. <tr  bgcolor="#FFCC33">
  39. <td width="103" height="25" align="right">爱好</td>
  40. <td headers="25" align="left">
  41. <!--复选框-->
  42. <input type="checkbox" name="chkSport[]">篮球</input>
  43. <input type="checkbox" name="chkSport[]">足球</input>
  44. </td>
  45. </tr>
  46. <tr  bgcolor="#FFCC33">
  47. <td width="103" height="25" align="right">照片</td>
  48. <!--上传-->
  49. <td height="25" align="left"><input type="file" name="fileUpload" align="right" size="25"></td>
  50. </tr>
  51. <tr  bgcolor="#FFCC33">
  52. <td width="103" height="25" align="right">学历</td>
  53. <td height="25" align="left">
  54. <!--下拉列表-->
  55. <select name="selList" id="selList">
  56. <option value="0" selected="selected">专科</option>
  57. <option value="1">本科</option>
  58. <option value="2">研究生</option>
  59. </select>
  60. </td>
  61. </tr>
  62. <tr align="center"  bgcolor="#FFCC33">
  63. <td height="25" colspan="3">
  64. <!--重置按钮-->
  65. <input type="reset" name="resetBtn" value="重置">
  66. <!--提交按钮-->
  67. <input type="submit" name="submitBtn" value="提交">
  68. </td>
  69. </tr>
  70. </table>
  71. <!--隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在-->
  72. <input type="hidden" name="hiddenVal" value="不会显示的值"><br/>
  73. <!--按钮-->
  74. <input type="button" name="btn" value="确认"></input>
  75. </form>
  76. <?php
  77. echo nl2br($_POST[txtAreaA]);
  78. ?>
  79. </body>
  80. </html>

时间： 2024-10-15 21:06:53

form表单详解的相关文章

提交表单详解

阅读目录 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Ajax方式提交整个表单 以Ajax方式提交部分表单 使用JQuery,就不要再拼URL了! id, name 有什么关系 使用C#模拟浏览器提交表单 资源链接 Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net W

AngularJS开发指南6：AngularJS表单详解

表单控件(input, select, textarea )是用来获取用户输入的.表单则是一组有联系的表单控件的集合. 用户能通过表单和表单控件提供验证的服务,知道自己的输入是否合法.这样能让用户交互变得友好,因为用户能通过反馈来修正自己的错误.不过,虽然客户端的验证能够起到很大作用,但也很容易被绕过,所以不能完全依靠客户端验证. 要建立安全的应用,服务器端验证还是必不可少的. 了解AngularJS双向绑定的关键在于了解ngModel指令.这个指令通过动态将model和view互相映射,来实现

HTML5之表单详解

请在新版标准浏览器(Chrome/Opera/Firefox/Safari...)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙|∣ 时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTM

3 表单详解

html表单 为什么: 提交数据给后台 <form> <input> 元素是最重要的表单元素,每个<input>元素必须写一个 name 属性,不然不会被提交 组合表单元素<fieldset> <form action="action_page.php" method="GET> <fieldset>//组合表单的输入元素 <legend>Personal information:</l

react学习笔记（二）React表单详解

一.不可控组件和可控组件介绍 什么是不可控组件 <input type="text" defaultValue="Hello World" />var inputValue = ?var inputValue = React.findDOMNode(this.refs.input).value 什么是可控组件 <input type="text" defaultValue={this.state.value} /> var

ExtJs如何判断form表单是否被修改过详解

1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式)      相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submit 3.EXT的ajax提交,Ext.Ajax.request 2.EXT表单的非ajax提交 在我看来:采用第1,2种都很方便,关键是Ext.Ajax.request传递给后台是一个字符串形式的,需要Jason解析 2.记录代码问题: 1 SaveStudentDetails:function(b

jQuery实现ajax提交form表单（可以是提交json），用springmvc接收。图文详解

第一种方法(简单易用,防蚊虫): 1.1 从form表单到congtroller接收.1 是form表单,2 是ajax提交 3 springmvc接收 1.2 debug 看后台数据,看到了吧,userEO接收到数据了 1.3 有人想看看seralize和seralizeArray数据不同 seralize:id=1&name=xiaohua&age=18&sex=man seralizeArray[ id 1],[ name xiaohua],[ age 18],[ sex m

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

Django中Form表单之字段详解

Django中的Form表单 1.背景 平时我们在书写form表单时,经常都是手动的去写一些input标签,让用户输入一些功能,进行一些校验的判断,等等.Django中的form表单就能够帮我们去实现这些功能,比较便捷. 2.Django form表单的功能 1.生成页面可执行的HTML标签 2.对应户的数据进行校验 3.保留上次输入的内容 3.先用普通方式手写一个注册功能 1.views.py文件中 # 注册 def register(request): error_msg = ""