HTML关于表单Form_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML关于表单Form_html/css_WEB-ITnose,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5071字,纯文字阅读大概需要8分钟。
内容图文
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源。掌握表单(Form)有以下几个要点:
重要form属性
form常用控件
form提交方式
§ 重要form属性
action {URL}:规定表单提交时向何处发送数据。
enctype :规定在发送表单数据之前如何对表单数据进行编码。(值如下)
application/x-www-form-urlencoded :在发送前编码所有字符(默认为此方式)。
multipart/form-data :不对字符编码。 注:使用包含文件上传控件的表单时,必须使用该值。
method:指定表单以何种方法发送。
get :from表单里所填的值,附加在action指定的URL后面,做为URL链接而传递。(可以在地址栏看见表单的提交信息)
post :from表单里所填的值,附加在HTML Headers上。(不可以在地址栏看见表单的提交信息)
§ form常用控件
建议:每一个表单元素的文字描述都使用(两标签之间的内容即为对绑定的表单控件的文字描述)
注意:每个表单元素应当分配 name 属性 和 id 属性。( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)
name 属性:用来将数据提交到服务器;
id 属性:用来在客户端做相应的操作;如:
文本输入框:
1)、input type="text" 单行文本框
2)、textarea 多行文本框
说明: maxlength 规定文本区域的最大字符数;如果在
密码输入框:
定义密码字段。(字符会被遮盖)
单选框:
设置单选按钮 以及获取选中的单选按钮的值
//获取选中的单选值
注意:
1)、在客户端,Javascript 对表单及表单元素的操作,更常用其name 属性而不是id属性。因为,对于某些特定的表单元素(如:单选按钮等),使用其name 属性更易于获得元素值,也更方便向服务器传送数据!
2)、保证同一组单选按钮的name 属性值相同。
复选框:
复选框的“全选”、“全不选”、“反选”功能 以及 所选复选框值的获得功能
注意:保证同一组复选框按钮的name 属性值相同。
下拉框:
下拉框的重要属性:
multiple 属性:用于设置下拉表框的类型(多选还是单选)
type 属性:JS根据type 属性的值获得下拉列表框select 控件的类型。
type 属性的值为:select-multiple(多选) 或 select-one(单选)
下拉列表框默认只能选中一项,若要设置为可以多选,则设置
size属性:定义可见选项的数目。size="3",即下拉框内可以显示三个可选选项。
提示:
在不同操作系统中,选择多个选项的差异:
由于上述差异的存在,同时由于需要告知用户可以使用多项选择,对用户更友好的方式是使用复选框。
§ form提交方式
表单的提交方式由method属性的取值决定,所以form提交方式有以下两种:
get 方式:
表单数据将会追加action指定的URL后面,做为URL链接而传递(以查询字符串的形式提交到服务端)。
变量提交的样式为:html元素的name属性=提交的值。多个变量,在URL链接后面以 & 符号隔开。
post方式:
表单数据将附加在请求体(HTML Headers)上被发送出去,并不附加在URL链接后面。
建议:表单通常还是以post方式提交比较好,这样可以不破坏URL,况且URL还有长度限制。
get 与 post 的区别:
1)、get是从服务器上获取数据;post是向服务器传送数据
2)、数据的查询:比如浏览论坛或博客时,URL一般包含了分类、页码数、每页记录数等信息。 get 方式,能一目了然的看到所要查询的信息; post 因为隐藏掉了这些信息,不方便进行查询。
3)、数据安全性:对一项记录,进行更改、添加操作时,get 方式附加在URL上,会泄露数据;post 方式,能隐藏数据,保证数据的安全性。
4)、数据传输量:get 虽然方便查询,但由于是附加在URL上,使得其传送的数据量较小,不能大于2KB;post传送的数据量较大,一般被默认为不受限制。
资源链接
html代码热搜
- 关于type="file"的input框样式修改小结
- HTMLcellpadding与cellspacing属性图文详解
- 详解HTML编程的标记与文档结构
- 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
- 在网页上调用桌面exe程序的简单方法
- html借助marquee实现文字左右滚动
- 关于分割线hr在各浏览器中的差异
- a标签的target链接指向iframe的方法
- 使用overflow:hidden来禁用页面滚动条
- 使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案
- 如何使用图片按钮作为重置(reset)表单按钮
- 超链接的宽度和高度直接设置不起作用的解决方法
- textarea的disabled与readonly属性具体用法介绍
- 空格在Html中如何表示( 有什么含义)
- 在js或css后加?v=版本号不让浏览器缓存
- 块级元素和内联元素及可变元素汇总
- HTML的结束标签问题与w3c标准
- iframe框架在IE浏览器下将白色背景设为透明色
- AdobeBrackets简单使用图文教程
- 如何去除表单的回车即提交即回车!=提交
- Readonly和Disabled之间的微小区别详解
- 如何设置select只读不可编辑且select的值可传递
- html中radio值的获取、赋值、注册事件示例详解
- textarea标签大小不可变不能通过鼠标拖动的方式来拖动
- HTML中select标签单选多选用法详解