HTML表单的用法

1、form表单有什么作用??有哪些常用的input 标签,分别有什么作用?

form表单的作用是把用户输入的数据提交到后台;

<input name="username" type="text"> 用于输入文本信息
<input name="password" type="password"> 用于输入密码,输入的内容显示为圆点
<input name="sex" type="radio"> 单选框
<input name="hobby" type="checkbox"> 复选框
<input name="" type="hidden"> 隐藏域,用户看不到,用于暂存数据,或者安全性校验
<input type="submit" /> 提交输入
<input type="reset" value="Reset" /> 重置输入

2、post 和 get 方式的区别?

  • get是从服务器上获取数据,post是向服务器传送数据。
  • get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
  • get传送的数据量较小,不能大于2KB。post传送的数据量较大,它是等待服务器来读取数据,不过也有字节限制,这是为了避免对服务器用大量数据进行恶意攻击。
  • get安全性非常低,post安全性较高。get方式提交数据,会带来安全问题,比如一个登陆页面,通过 Get 方式提交数据时,用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问客户这台机器,就可以从历史记录获得该用户的帐号和密码,所以表单提交建议使用 post 方法。

3、在input里,name 有什么作用?

name 属性用于对提交到服务器后的表单数据进行标识,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

4、radio 如何分组?

通过name属性值的不同分组,同一组的name必须相同

5、placeholder 属性有什么作用?

在文本框中显示提示语。

6、type=hidden隐藏域有什么作用? 举例说明

隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式:

<input type="hidden" name="..." value="..."> 属性解释:

type=”hidden”定义隐藏域;

name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

value属性定义隐藏域的值

例如:

<input type=”hidden” name=”ExPws” value=”dd”> 其实说白了就隐藏域不在前台显视的,跟表单的元素一样.有名字有数值,只是在提交数据是不可见的

隐藏域的作用:

  • 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
  • 有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。
  • 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick=”document.form.command.value=”xx”“然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

QuickPager asp.net 分页控件、表单控件等自定义控件下载 和介绍 【2009.09.07更新】

最新下载地址: 自然框架的源代码、Demo、数据库、配置信息管理程序下载(2010.01.25更新) QuickControl web控件集包含的控件 Qu...

2036
来自专栏前端说吧

vuex - 项目结构目录及一些简单配置

932
来自专栏iKcamp

基于Koa2搭建Node.js实战项目教学(含视频)☞ 环境准备

文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await 等新语法,所以请保证 node 环境在 7.6 版本以上。 安装node...

3509
来自专栏web编程技术分享

第八节 - 部门管理模块(编写PHP程序)

31010
来自专栏Alice

cocos2d-x_下载游戏引擎并创建第一个项目

拖进命令行点击回车键 ,在安装的时候有三个选择路径的,因为我做的是ios开发所有全部就是直接点了回车。

943
来自专栏Hadoop实操

12.OpenLDAP管理工具Phpldapadmin的安装及使用

Fayson在前面的文章中有很多关于OpenLDAP的介绍,在文章中均使用的命令行的方式对OpenLDAP进行用户和用户组的添加,添加方式复杂且容易出错。本篇文...

1084
来自专栏web前端教室

1012-web前端零基础课【学习周报】

当调用this.setState()的时候,自动触发render()方法,更新页面。

501
来自专栏Ryan Miao

CentOS6 安装redis

1395
来自专栏从零开始学自动化测试

selenium+python自动化77-autoit文件上传

前言 关于非input文件上传,点上传按钮后,这个弹出的windows的控件了,已经跳出三界之外了,不属于selenium的管辖范围(selenium不是万能的...

3134
来自专栏前端说吧

vuex - 项目结构目录及一些简单配置

3486

扫码关注云+社区