html 复选框name值,HTML(5)表单元素以及对各个表单元素的name、value属性的理解

我在学习表单元素的时候感觉很混乱,特别是 name value这两个属性,没有真正理解它们是干什么的,所以需要梳理一下。

HTML表单元素主要有

HTML5新增的表单元素有三个

下面梳理一下这些表单元素的用法并指出各元素的name、value属性含义

1.

元素元素定义HTML表单,收集用户输入。

属性主要有 action和method;

action定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮(type为submit的元素);如果省略该属性,则action会被设置为当前页面。

method属性规定在提交表单时所用的HTTP方法(HTTP方法有GET和POST两种,这里只说一下两者的主要区别:GET方法会使表单数据在页面地址栏是可见的,而POST方法不可见,所以POST方法安全性更佳)。

form elements...

2. 元素

元素很常用(为行内元素,在“去哪儿”找实习面试的时候被问到过,当时都答错......),根据不同的type属性,可以变化为多种形态。

type的取值有text radio checkbox password submit button;HTML5又新增了type类型email url search number range color date pickers(date month week...),这些新类型提供了更好的输入控制和验证。

对于元素,除了type属性,常用的就是name和value属性:

name属性----想要被正确地提交,每个输入字段必须设置一个name属性。

value属性----为元素设定值,对于不同的type,value属性的含义也不同。

type="submit"、"button"、"reset" ——定义按钮上显示的文本

type="text"、"password"、"hidden" ——定义输入字段的初始值

type="radio"、"checkbox"、"image" ——定义与输入相关联的值

type="file" ——无法与value属性一起使用

这里只具体介绍type为radio checkbox的元素。

radio定义单选钮,允许用户在有限数量的选项中选择一个。

你喜欢谁?

杨洋

许嵩

吴彦祖

效果图如下

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

当选择“许嵩”,点击“提交”按钮后,看到页面地址栏里表单数据的内容如下图所示。

注意:单选钮的各个name属性值要完全一致,否则会不只选中一个选项

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

checkbox是复选框,允许用户在有限数量的选项中选择零个或多个选项。

你喜欢谁?

杨洋

许嵩

吴彦祖

效果图如下

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

当我全选时(好像暴露了什么),name和value值表现如下

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3. 元素- -下拉列表

定义下拉列表,需要配合使用,定义待选择的选项;通常会把首个选项显示为被选选项;可通过selected属性来定义预定义选项。

apple

pineapple

mango

grape

效果图如下:

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

打开下拉列表,选择"mango"这一项,并点击"提交"按钮,因为method设置为了get,所以在地址栏中可看到数据:分别取自中的name属性值和被选项的value属性值。

当value的属性值是空的时候,会取的内容值作为表单数据提交。

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

4. 元素

定义多行输入字段(文本域)

Just Do It!

效果如下图

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

地址栏数据如下图所示。当文本域为空时,提交的表单数据也为空;改变文本域的值,再次提交,则表单数据也会相应的改变。

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

5. 元素

元素的type属性有三个可能的值button submit和reset;这里只介绍属性值button

type为button时,定义可点击的按钮

click

效果如下图

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

点击后出现

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

6. 元素

规定输入域的选项列表;需要配合元素一起使用,该元素定义列表项;如需把datalist绑定到输入域,需要把输入域的list属性值设置为datalist的id值;元素必须要设置value属性。

效果图如下

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

当选择第三项,并点击"提交"按钮后,地址栏数据如下

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

7. 元素

提供一种验证用户的可靠方法。

元素是密钥对生成器(key-pair generator)。当提交表单时会生成两个键,一个是公钥,一个是私钥。私钥存储于客户端,公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

目前浏览器对该元素糟糕的支持程度不足以使其成为有用的安全标准。

效果图如下

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

点击第一项并提交后,地址栏的数据为

file:///C:/Users/wxf/Desktop/imooc/home/test4.html?security=MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCiOHLvFmlmZKNDwqFZ8ie7mSP%2FmRRVSxhgtvH3ORHEoAl63sO9mZWVEPs8ZrcgCLW5z1TFGs9hadvhL%2BafxUs%2FN6lXYWDpoM7juZLuRDbK%2BdF4WAMWDbgX3NzK5fj2t2J5oMiLaBh8slUUByCAENCktHXeEBCs%2BuaFqxZN%2B458BBTz%2Fg%2BYoQ5AUj3jv0lzfwUZ46xxd2yUyUVYpnYy8PMUQMwV4vZ2hNQEzM%2BW7HKHkBDTD8OQFDwmSuizLq5DO34x%2BInnvS9lpiJOkUHCUdciYITtLS2lw45JZnjkuJdeWGSwXmBdboBix99u6jZ6NGEtTQ2Pb%2BqNQFeutzLzrEEpAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAHe4OWmRmaxhQxUPQnwY9W8kWwMMtEKZJ%2B28qVmZILOiBUJWYDiEXo2VJy9fUUuOL7gdrlc1exPNRMOIQSK2n221foHJ%2BKWmecnZ9jVwWr46eHASrrRKUHDANePwDxrUQ0bxr26vdcpGPZBFlvqf5RehkATlrYtt3Aij9txjzE%2FNss4d%2BL%2BtAOyY4KdgHRTjmn8HdA9%2BDgflroHyQ8frO3jvprojyDX3Jhko5o6XxScXJDKX3QO51PLOPcVsJLBElU8QPKZybO9GpCuj36TvX74CxP22wtsGkuRAGeqOyjjyyGBmKio83b1HudL6KEh31T2xyntk6STyqO%2FlxEdIRpQ%3D%3D

8. 元素

用于不同类型的输出,如计算或脚本输出。

+1

10 =

function resCalc(){

numA=document.getElementById("num_a").value;

numB=document.getElementById("num_b").value;

document.getElementById("result").value=Number(numA)+Number(numB);

}

效果如下图

8b365ef76ae0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

通过总结对这些元素的认识更加深刻了,所以要经常整理!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html中一张a4是多少pt,CSS设置A4纸张尺寸

我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome)。我设置元素的大小为21厘米x 29.7厘米,但当我发送打印(或打印预览)它剪辑我的页面。HTMLPage 1/2Page 2/2CSSbody {margin: 0;padding: 0;background-color: #F…

html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...

使用版本 layui-v2.3.0修改:打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部//获得数据Class.prototype.pullData function(curr, loadIndex){var that this,options that.config,request options.request,response options.response,so…

首页图标九宫格 html5,html5九宫格布局的网格菜单代码

特效描述:html5 九宫格布局 网格菜单代码。今天我们想和大家分享一个九宫格菜单动画。这个想法的灵感来自于视频中的效果,html5全屏展开网格布局菜单,点击全屏背景切换显示代码。代码结构1. 引入CSS2. 引入JS3. HTML代码Grid MenuarrowdropTo…

html数据摘要算法,js 摘要算法 base64加密解密 以及字符串编码

js 摘要算法 base64加密解密 unescape()和escape()对字符串进行编码 encodeURI()和decodeURI()编码 encodeURIComponent()和decodeURIComponent()编码base64:双向加密方式。1.GitHub中下载base64https://github.com/dankogai/js-base642.对应的HTML中调用//加密var …

html中日期格式化函数,JavaScript日期时间格式化函数分享

这个函数经常用到,分享给大家。函数代码:Date.prototype.format function(format){var o {"M" : this.getMonth()1, //month"d" : this.getDate(), //day"h" : this.getHours(), //hour"m" : this.getMi…

苹果6怎样打开html,苹果iPhone的Safari浏览器使用技巧图解

  大多数的 iPhone 用户们都是用的 iOS 系统自带的 Safari 浏览器,不过很多用户们对 Safari 浏览器却不是很熟悉,因为 Safari 毕竟没有国产浏览器这么动我们!这厢脚本之家小编给大家介绍一些 iOS Safari 浏览器的一些你所不知道…

华为p9 html尺寸,华为P9的屏幕尺寸是多少?

华为P9的屏幕尺寸是多少华为P9的屏幕尺寸是5.2英寸。针对华为P9的屏幕尺寸是多少的问题,配置方面,华为P9搭载了麒麟955处理器,麒麟955基于台积电16nm FinFET Plus制程工艺打造,比FinFET拥有更强的性能。架构方面,麒麟9…

美国款游戏计算机,美国一程序员设计计算机游戏 悼念早逝爱子(图)

据美国《今日》网站4月25日报道,美国科罗拉多州的程序员赖安•格林(Ryan Green)设计了一款叫做“癌症:那条猛龙”的游戏,以此纪念爱子约耳(Joel)短暂的一生。2010年,1岁的约耳被诊断出患有致命的脑癌,赖安希望游戏玩家…

计算机专业知识是什么范围,计算机基础知识考题

计算机技术在我国得到了快速发展,计算机应用范围越来越广泛,普及计算机知识已迫在眉睫。那么你对计算机基础知识了解多少呢?以下是由小编整理关于的内容,希望大家喜欢!1、电子计算机主要是以***B***划分发展阶段的。A、集成电路 B、电子元件…

html json to table,javascript - HTML - Convert json to table - Stack Overflow

Im trying to convert JSON to a table, but it doesnt. Everything seems fine, but I cannot see the values ​​in my table.My code that converts JSON to table:$(function() {var my_data ;$.each(JSON.parse(sonuc.response) , function(key, item){my_data ;my_dat…

html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性

文本1//首先获取标签对象var p document.getElementById("text1");//通过对象自带的style方法设置不同的样式p.style.backgroundColor "black";p.style.fontSize "20px";//上面是给p标签设置两个样式,背景颜色和字体大小说明&…

北京科技大学计算机硕士,北京科技大学计算机专业硕士只有面授上课吗

北京科技大学计算机专业硕士比较热门,目前有意接受北京科技大学计算机专业硕士教育的学员,对其是否只有面授上课还比较疑惑。下文可供大家参考:一、只有面授上课北京科技大学计算机专业硕士只有面授上课,有周末班和集中班两种上课…

中国石油计算机文化基础答案,中国石油大学17年秋《计算机文化基础》第二次在线作业答案...

中国石油大学17年秋《计算机文化基础》第二次在线作业答案 (8页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!4.90 积分第二次在线作业窗体顶端单选题 (共40道题)1.(2.5分) Word不具有的功能是()。 …

计算机硬盘中病毒以后怎么办,计算机中病毒,格式化整个硬盘后还有?怎么办?...

计算机中病毒,格式化整个硬盘后还有?怎么办?來源:互聯網 2009-07-23 13:40:47 評論分類: 電腦/網絡 >> 反病毒問題描述:好象是一种播放器带来的病毒,会在开机时自动运行程序(kuzhan . kubao . IEbar . 桌面媒体 . 中文官方…

计算机兴趣班记录,计算机兴趣班活动记录.doc

计算机兴趣班活动记录计算机二课活动记录周次三应 到人 数实 到人 数缺席者及原因活动内容创作练习:设计贺卡记录人陈美馨活动过程记录1、启动“画图”软件:解说并演示启动“画图”软件的要领与操作步骤。2、解说并演示画图软件的窗口组成。3、请同学们完成好自己的…

计算机辅助抗体设计,计算机辅助设计提高单克隆抗体亲和力的研究

摘要:增强抗体亲和力对于提高其检测灵敏度,延长解离时间,降低药物使用剂量和增强药效都具有非常重要的意义.到目前为止,提高抗体亲和力的方法主要是以原亲本单抗为改造模板,通过构建其突变体抗体库(如核糖体展示,酵母双杂交,噬菌体展示抗体库等)进行筛选,最终获得更…

计算机排版技能会操方案,实验九 Word的高级排版技巧.pdf

《微机操作》实验九 课件一、实验要求通过本节学习,要求熟练掌握下列操作技能(1) 能够适时适地插入页码、分页符、分节符;(2) 能够编辑相同页眉、页脚,也能建立不同节奇偶页不一样的页眉、页脚;(3) 在Word 2003 文档中能够使用超链…

北大元培计算机,北大元培计算机模拟

《北大元培计算机模拟》由会员分享,可在线阅读,更多相关《北大元培计算机模拟(17页珍藏版)》请在人人文库网上搜索。1、1题目 - 满足条件的数累加 来源 元培-From Whf 描述 将正整数 m 和 n 之间(包括 m 和 n)能被 17 整除的数累加。其中,m i…

oftc注册服务器占用,golang服务器程序运行过程中崩溃,报错:fatal error: runtime: out of memory...

用golang编写的游戏服务器程序,在接受来自客户端的链接请求时有一定概率崩溃,崩溃时的打印如下:fatal error: runtime: out of memoryruntime stack:runtime.throw(0x81b890, 0x16)/usr/local/go/src/runtime/panic.go:527 0x90runtime.sysMa…

联想服务器重装2008,联想ThinkSystem机器安装2008R2详细教程

联想ThinkSystem机器安装2008R2详细教程猫先生 • 2019 年 04 月 13 日自联想发布新品服务器以来,关于新品机器能否安装2008的声音此起彼伏尤其是阵列卡的驱动让众多尝试安装的人折了腰,现在我将整个安装过程做个详细的教程,希望能帮到各位工…