Input标签使用整理
0 写在前面
对于程序而言I/O是一个程序的重要组成部分。程序的输入、输出接口,指定了程序与用户之间的交互方式。对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能。
今天通过此博客来整理一下HTML与HTML5中的各种input标签的type类型以及其常用方法。
1 代码整理
1-1 表单提交
为了能够让input的数据表单内容成功提交到指定的url中,需要在input的外面套一层<form action=“#”> </form>。
其中,action后面填写的值为目的url。
1-2 HTML原有type类型
复选框checkbox:通过value的值来进行分组,在组内可以复选。
单选框radio:通过name值分组,组内选项互斥。单选框和复选框通常都搭配label使用,label的for通常与选项中的id相对应,这样鼠标点选范围更大,可以点击文字标签进行选择。
密码password:输入内容不显示给用户,在3-1节中会讲到如何显示密码。
上传文件file:可以从用户本地选择文件进行上传。
提交submit:将上述填写完毕的表单提交。
重置reset:将上述填写的内容重置成初始状态。
图片image:用src将一张图片放置在页面上,将提交鼠标点击该图片的坐标位置。
- <form action="#">
- <!-- HTML原有的type类型 -->
- 兴趣爱好:
- <input type="checkbox" id="阅读" value="提交">
- <label for="阅读">阅读</label>
- <input type="checkbox" id="写作" value="提交">
- <label for="写作">写作</label>
- <input type="checkbox" id="写代码" value="提交">
- <label for="写代码">写代码</label>
- <br>
- 性别:
- <input type="radio" name="sex" id="male"><label for="male">男</label>
- <input type="radio" name="sex" id="female"><label for="female">女</label>
- <br>
- 密码:
- <input type="password" id="pwd">
- <span id="showPwd">显示密码</span>
- <br>
- 上传照片:
- <input type="file" name="img">
- <br>
- <input type="hidden" name="avitor" id="1">
- <br>
- <input type="submit" id="submit">
- <input type="reset" value="重置">
- <!-- 可以点击图片,将点击位置传到后端 -->
- <input type="image" src="./PopStars/pic/0.png">
- </form>
1-3 H5新增type类型
上传时间date/time/week/datetime-local:用于选择时间。
数字number:会检查输入,只有有效的数字值才能被输入。
邮箱email:会检查输入,只有有效的邮箱地址才能被提交。
链接url:会检查输入,只有有效的网址才能被提交。
颜色color:可以输入颜色。
搜索search:可以记忆搜索历史。
- 范围range:通过min max设置范围数值。
- <form action="#">
- 选择时间:
- <input type="date">
- <input type="time">
- <input type="week">
- <input type="datetime-local">
- <br>
- 输入学号:
- <input type="number" name="number">
- <br>
- 输入邮箱:
- <input type="email" name="email">
- <br>
- 选择颜色:
- <input type="color" name="color">
- <br>
- 输入链接:
- <input type="url">
- <br>
- 搜索内容:
- <input type="search" name="search">
- <input type="submit" value="search">
- <br>
- 输入范围:
- <input type="range" min="0" max="100" name="range">
- </form>
1-4 注意事项
注意对于每项输入而言,需要为该元素设置一个name来标识。这是为了在提交表单数据的时候,能有效的定位到是哪个部分的输入了什么类型的数据值。
2 浏览器兼容情况
表格数据来源于w3school。由于浏览器技术发展迅速,现在一些浏览器的新版本已经可以支持上述的部分type类型了。
3 与JS交互
3-1 显示密码
为了实现密码显示功能,很简单,首先为显示密码的容器增加一个id,用JS为其绑定一个鼠标点击事件,当触发点击事件时,为密码input的类型由password改成text即可完成显示。
- <script>
- showPwd.onclick = function(e){
- pwd.type = 'text';
- }
- </script>
3-2 禁用默认的提交功能
两种方法,一是为点击事件return false; 二是为原对象e加上e.preventDefault()方法。
- <script>
- var submitBtn = document.getElementById('submit');
- submitBtn.onclick = function(e){
- console.log(pwd.value);
- e.preventDefault();
- return false;
- }
- </script>
Input标签使用整理的更多相关文章
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- HTML基本结构与标签总结整理篇
HTML基本结构与标签总结整理篇 前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~ 1.了解HTML 学习前端技术,必然涉及三个方面:html(结构).c ...
- 关于input标签和placeholder在IE8,9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- angular input标签只能单向传递数据的问题
angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
- 全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...
- input标签file的value属性IE兼容性问题
在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...
- 一个input标签搞定含内外描边及阴影的按钮~
自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
随机推荐
- Android 异步框架 RxJava2
观察者模式的概念 RxJava是android的异步框架,官方介绍是可观测的序列,组成异步基于事件程序的库.特点是观察者模式,基于事件流的链式调用,随着异步操作调度过程复杂的情况下,程序逻辑也变得越来 ...
- ORA-00471: DBWR process terminated with error案例
每年年底,系统管理员都要组织一次容灾方案的测试.演练.会在一个与生产环境网络隔离的DR环境中,启动各个"生产环境服务器",然后让各路人员参与其中测试.演练容灾方案是否可靠.这次演练 ...
- c/c++ 网络编程 UDP 改变网卡的硬件地址
网络编程 UDP 改变网卡的硬件地址 在程序里动态改变网卡的硬件地址 1,取得网卡的硬件地址 #include <stdio.h> #include <string.h> #i ...
- jQuery如何制作动画
下面为一组图片(四张)展示 1 2 3 4 页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- RHEL6 SoftRaid 更换故障硬盘
1.手工fail一块硬盘 #mdadm /dev/md0 -f /dev/sdb 2.移除损坏硬盘: #mdadm /dev/md0 -r /dev/sdb 3.添加新的硬盘到已有阵列 mdadm / ...
- 【Teradata】变更viewpoint web登录地址
1.使用root用户登录原viewpoint地址 ssh root@192.168.253.133 2.查看使用网卡(示例中为eth0) route Kernel IP routing table D ...
- Enterprise architect 类图加时序图
原文地址:https://segmentfault.com/a/1190000005639047#articleHeader2 新建一个Project 没什么好说的,“文件-新建项目”,然后选择保存位 ...
- springmvc中的类型转换器
在使用springmvc时可能使用@RequestParam注解或者@RequestBody注解,他们的作用是把请求体中的参数取出来,给方法的参数绑定值. 假如方法的参数是自定义类型,就要用到类型转换 ...
- 转://诊断 Grid Infrastructure 启动问题 (文档 ID 1623340.1) .
文档内容 用途 适用范围 详细信息 启动顺序: 集群状态 问题 1: OHASD 无法启动 问题 2: OHASD Agents 未启动 问题 3: OCSSD.BI ...
- 【vue】项目目录结构及使用多的知识点
项目目录: Node_modules/npm安装的该项目的依赖库 vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) router/文件 ...