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将一张图片放置在页面上,将提交鼠标点击该图片的坐标位置。  

  1. <form action="#">
  2. <!-- HTML原有的type类型 -->
  3. 兴趣爱好:
  4. <input type="checkbox" id="阅读" value="提交">
  5. <label for="阅读">阅读</label>
  6. <input type="checkbox" id="写作" value="提交">
  7. <label for="写作">写作</label>
  8. <input type="checkbox" id="写代码" value="提交">
  9. <label for="写代码">写代码</label>
  10. <br>
  11. 性别:
  12. <input type="radio" name="sex" id="male"><label for="male"></label>
  13. <input type="radio" name="sex" id="female"><label for="female"></label>
  14. <br>
  15. 密码:
  16. <input type="password" id="pwd">
  17. <span id="showPwd">显示密码</span>
  18. <br>
  19. 上传照片:
  20. <input type="file" name="img">
  21. <br>
  22. <input type="hidden" name="avitor" id="1">
  23. <br>
  24. <input type="submit" id="submit">
  25. <input type="reset" value="重置">
  26. <!-- 可以点击图片,将点击位置传到后端 -->
  27. <input type="image" src="./PopStars/pic/0.png">
  28. </form>

1-3 H5新增type类型

  • 上传时间date/time/week/datetime-local:用于选择时间。

  • 数字number:会检查输入,只有有效的数字值才能被输入。

  • 邮箱email:会检查输入,只有有效的邮箱地址才能被提交。

  • 链接url:会检查输入,只有有效的网址才能被提交。

  • 颜色color:可以输入颜色。

  • 搜索search:可以记忆搜索历史。

  • 范围range:通过min max设置范围数值。
  1. <form action="#">
  2. 选择时间:
  3. <input type="date">
  4. <input type="time">
  5. <input type="week">
  6. <input type="datetime-local">
  7. <br>
  8. 输入学号:
  9. <input type="number" name="number">
  10. <br>
  11. 输入邮箱:
  12. <input type="email" name="email">
  13. <br>
  14. 选择颜色:
  15. <input type="color" name="color">
  16. <br>
  17. 输入链接:
  18. <input type="url">
  19. <br>
  20. 搜索内容:
  21. <input type="search" name="search">
  22. <input type="submit" value="search">
  23. <br>
  24. 输入范围:
  25. <input type="range" min="0" max="100" name="range">
  26. </form>

1-4 注意事项

  注意对于每项输入而言,需要为该元素设置一个name来标识。这是为了在提交表单数据的时候,能有效的定位到是哪个部分的输入了什么类型的数据值。

2 浏览器兼容情况

  表格数据来源于w3school。由于浏览器技术发展迅速,现在一些浏览器的新版本已经可以支持上述的部分type类型了。

3 与JS交互

3-1 显示密码

  为了实现密码显示功能,很简单,首先为显示密码的容器增加一个id,用JS为其绑定一个鼠标点击事件,当触发点击事件时,为密码input的类型由password改成text即可完成显示。

  1. <script>
  2. showPwd.onclick = function(e){
  3. pwd.type = 'text';
  4. }
  5. </script>

3-2 禁用默认的提交功能

   两种方法,一是为点击事件return false; 二是为原对象e加上e.preventDefault()方法。

  1. <script>
  2. var submitBtn = document.getElementById('submit');
  3. submitBtn.onclick = function(e){
  4. console.log(pwd.value);
  5. e.preventDefault();
  6. return false;
  7. }
  8. </script>

Input标签使用整理的更多相关文章

  1. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  2. HTML基本结构与标签总结整理篇

    HTML基本结构与标签总结整理篇 前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~ 1.了解HTML 学习前端技术,必然涉及三个方面:html(结构).c ...

  3. 关于input标签和placeholder在IE8,9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  4. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  5. 全面剖析 <input> 标签 ------ HTML\HTML5

    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...

  6. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...

  7. 一个input标签搞定含内外描边及阴影的按钮~

    自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...

  8. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  9. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

随机推荐

  1. Android 异步框架 RxJava2

    观察者模式的概念 RxJava是android的异步框架,官方介绍是可观测的序列,组成异步基于事件程序的库.特点是观察者模式,基于事件流的链式调用,随着异步操作调度过程复杂的情况下,程序逻辑也变得越来 ...

  2. ORA-00471: DBWR process terminated with error案例

    每年年底,系统管理员都要组织一次容灾方案的测试.演练.会在一个与生产环境网络隔离的DR环境中,启动各个"生产环境服务器",然后让各路人员参与其中测试.演练容灾方案是否可靠.这次演练 ...

  3. c/c++ 网络编程 UDP 改变网卡的硬件地址

    网络编程 UDP 改变网卡的硬件地址 在程序里动态改变网卡的硬件地址 1,取得网卡的硬件地址 #include <stdio.h> #include <string.h> #i ...

  4. jQuery如何制作动画

    下面为一组图片(四张)展示 1 2 3 4 页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  5. RHEL6 SoftRaid 更换故障硬盘

    1.手工fail一块硬盘 #mdadm /dev/md0 -f /dev/sdb 2.移除损坏硬盘: #mdadm /dev/md0 -r /dev/sdb 3.添加新的硬盘到已有阵列 mdadm / ...

  6. 【Teradata】变更viewpoint web登录地址

    1.使用root用户登录原viewpoint地址 ssh root@192.168.253.133 2.查看使用网卡(示例中为eth0) route Kernel IP routing table D ...

  7. Enterprise architect 类图加时序图

    原文地址:https://segmentfault.com/a/1190000005639047#articleHeader2 新建一个Project 没什么好说的,“文件-新建项目”,然后选择保存位 ...

  8. springmvc中的类型转换器

    在使用springmvc时可能使用@RequestParam注解或者@RequestBody注解,他们的作用是把请求体中的参数取出来,给方法的参数绑定值. 假如方法的参数是自定义类型,就要用到类型转换 ...

  9. 转://诊断 Grid Infrastructure 启动问题 (文档 ID 1623340.1) .

    文档内容   用途   适用范围   详细信息   启动顺序:   集群状态   问题 1: OHASD 无法启动   问题 2: OHASD Agents  未启动   问题 3: OCSSD.BI ...

  10. 【vue】项目目录结构及使用多的知识点

    项目目录: Node_modules/npm安装的该项目的依赖库 vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) router/文件 ...