H5之input属性

文章目录

一、常用属性
- 1、信息提示框placeholder
- 2、单选框radio、多选框checkbox
- 3、提交 submit（需要在form标签里面使用）
二、不常用的（兼容性问题）
- （一）、Calender类（主要在form表单中使用）
- - 1、file 选择文件上传
  - 2、data 选择日期（兼容性：Chrome支持，Safari、IE不支持）
  - 3、time 选择时间（兼容性：Chrome支持，Safari、IE不支持）
  - 4、week 选择某年某周（兼容性：Chrome支持，Safari、IE不支持）
  - 5、datetime-local 选择年月日时间（兼容性：Chrome支持，Safari、IE不支持）
- （二）其他属性
- - 6、number 设置输入框只能输入数字（兼容性：Chrome支持，Safari、IE不支持）
  - 7、email 邮件，如果格式不规范会有提示错误（兼容性：Chrome、火狐支持，Safari、IE不支持）
  - 8、color 颜色选择器（兼容性：Chrome支持，Safari、IE不支持）
  - 9、range 一个可以设置最大值和最小值得滑动条（兼容性：Chrome、Safari支持，火狐、IE不支持）
  - 10、search 用户第一次输入过后，当她下次再输入的时候，会给用户弹出一个提示（兼容性：Chrome支持，Safari支持一点，IE不支持）
  - 11、url 输入完整的网址（兼容性：Chrome、火狐支持，Safari、IE不支持）

一、常用属性

1、信息提示框placeholder

在input框中，当你想要在框内有提示信息的时候，在没学习h5之前都会使用JS中onfocus事件，检查当前值，如果是默认值,就将value属性置空
在学习h5之后，我会选择设置placeholder属性，提示会在输入字段为空时显示，并会在字段获得焦点时消失。
设置placeholder="请输入账号或邮箱"的效果图如下

<input type="text" placeholder="请输入账号或邮箱">
<input type="password" placeholder="请输入密码">

placeholder和value属性的区别是,value属性设置的直接是文本框中的内容

2、单选框radio、多选框checkbox

（1）单选框一般选中后不能取消，如果定义checked是false，要不一直选不中，要不不能取消
（2）复选框选中后能取消重复选

        <input type="radio">男生<input type="radio">女生<br><input type="checkbox">苹果<input type="checkbox">香蕉<input type="checkbox">西瓜

效果图如下

3、提交 submit（需要在form标签里面使用）

二、不常用的（兼容性问题）

（一）、Calender类（主要在form表单中使用）

1、file 选择文件上传

      <input type="file">

页面展示效果

2、data 选择日期（兼容性：Chrome支持，Safari、IE不支持）

3、time 选择时间（兼容性：Chrome支持，Safari、IE不支持）

4、week 选择某年某周（兼容性：Chrome支持，Safari、IE不支持）

5、datetime-local 选择年月日时间（兼容性：Chrome支持，Safari、IE不支持）

（二）其他属性

6、number 设置输入框只能输入数字（兼容性：Chrome支持，Safari、IE不支持）

7、email 邮件，如果格式不规范会有提示错误（兼容性：Chrome、火狐支持，Safari、IE不支持）

8、color 颜色选择器（兼容性：Chrome支持，Safari、IE不支持）

9、range 一个可以设置最大值和最小值得滑动条（兼容性：Chrome、Safari支持，火狐、IE不支持）

10、search 用户第一次输入过后，当她下次再输入的时候，会给用户弹出一个提示（兼容性：Chrome支持，Safari支持一点，IE不支持）

11、url 输入完整的网址（兼容性：Chrome、火狐支持，Safari、IE不支持）

H5之input属性相关推荐

H5新增input属性值
地址:<input type="url" name="" id="" value="" /> <br ...
h5比html新增加的标签,HTML5（H5）新增属性和标签
一 H5的特点 H5就是在之前HTML的版本上新增了一些标签,所以用起来没有太多变化 01 H5的网页骨架非常简洁 02 H5的语法极其松散,很多标签可以省略,也可以只写开始不写结束 03 H5中新增 ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
iOS中 H5的input输入框focus()无法自动拉起键盘（解决方法）
iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法) 参考文章: (1)iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法) (2)https://www. ...
当 input 属性为 number，设置maxlength属性不生效的坑
当 input 属性为 number,设置maxlength属性不生效的坑一.现象 1. <input type="text" maxlength="11&quo ...
学生档案复习前面HTML5新增标签/属性/input属性
根据所学HTML5新增的标签.属性.input属性,把学生的姓名.手机.邮箱.职业.出生日期.成绩写出来代码如下: <!DOCTYPE html> <html lang=" ...
解决 H5 IOS input 聚焦时，软键盘将页面整个推上去，键盘收起页面未下移 BUG
目录问题描述解决方案问题描述近日在开发H5应用时,测试人员发现在IOS低版本中input,textArea等输入框聚焦时,软键盘弹起会将整个页面向上顶,收回键盘后,页面不会回弹恢复页面,导致页 ...
HTML的input属性
HTML的input属性之前我收集发表了表单元素和元素input的type值:这里主要讲解一下input的属性value值有哪些:其实也是超多. 其书写格式为:value="值" ...
前端input属性判断字段不能为空
input属性前言前端input属性required 前端input pattern属性前言前端判断字段我自己一般使用js判断,而input自带一些属性,可以直接进行判断例如required属 ...