Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
<input> 无限制输入
type 限制输入 type = 如下类型

type 后还可以跟一些属性: 如<input type=text maxlength = 10> 限制文本的长度为10字节

list 可以用的时候再来查, list就是当一个建议值不够的时候添加到几个.
<form>
<input
type="text" name="usr" list="listfruit">
<datalist
id="listfruit">
<option>雪梨</option>
<option>香蕉</option>
<option>蜜瓜</option>
</datalist>
</form>
要记好几个东西 , 创建一个datalist,里面有多个option, datalist的id 指向input的list, 一对多通常是多的那边其id

password 显示非明文

placeholder 占位符,默认为空, 也可以输入提示语提示输入什么, 但真正输入的时候回消失.

number 限制输入数字
range 限制输入定义域数字



color date IE都不支持, 其实很好的, 就是让用户输入多元化, 能选颜色,日期.
checkbox 多选题,打钩


提交返回一个?music = 1 & sport =2 和后续的程序接轨从而调用这些id 的文本或者音乐
radio 单选题



image 按钮为图片的按钮……

email tel url 这些是要求用户输入正确的类别,但浏览器支持不是很好. 可能要用正则表达式规范
hidden 隐藏输入框, 要配合name 和value 编写, 提交后返回 name = value



file 上传控件


Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互的更多相关文章
- html5 填表 表单 form label input button legend fieldset
<form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性pos ...
- html5 填表 表单 input output 与表单验证
1.<output> Js计算结果 <form oninput="res.value = num1.valueAsNumber*num2.valueAsNumber ...
- 表单单选按钮input[type="radio"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- HTML5中的input type为file控件限制上传文件类型及扩展
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
- HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: <!doctype html> <html> <head></ ...
- HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- HTML5的表单input元素的新属性
知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...
- HTML5表单之Input 类型- Date Pickers(日期选择器)
HTML5 拥有多个可供选取日期和时间的新输入类型: date-选取日.月.年 month-选取月.年 week-选取周和年 time-选取时间(小时和分钟) datetime-选取时间.日.月.年( ...
随机推荐
- 数学规划求解器lp_solve超详细教程
前言 最近小编学了运筹学中的单纯形法.于是,很快便按奈不住跳动的心.这不得不让我拿起纸和笔思考着,一个至关重要的问题:如何用单纯形法装一个完备的13? 恰巧,在我坐在图书馆陷入沉思的时候,一位漂亮的小 ...
- DataTables复杂表头
工作上的需要,要做一个复杂的表头的DataTables thead如下 遇到的问题(详细问题可以浏览官网的答案 链接) 需自定义表头(thead),如果不自定义则会 Cannot read prope ...
- springboot自定义jmx对象
在使用springboot-admin对springboot项目进行监控的时候我们发现其是具有web访问jmx对象的功能的,那它内部是怎么实现的呢. Jolokia是一个JMX-http桥梁,它提供了 ...
- (转)MySQL主主互备结合keepalived实现高可用
MySQL主主互备结合keepalived实现高可用 原文:http://7424593.blog.51cto.com/7414593/1741717 试验环境: master:192.168.1.2 ...
- SVN linux 服务器端配置
一. SVN 简单介绍 Subversion(SVN) 是一个开源的版本号控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository ...
- javascript004_ECMA5数组新特性
•对于ECMAscript5这个版本的Array新特性补充: –位置方法:indexOf lastIndexOf –迭代方法:every filter forEach some ...
- 浅谈js中的垃圾两种回收机制
一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...
- Cloudera Manager安装之Cloudera Manager安装前准备(CentOS6.5)(一)
Cloudera Manager安装前准备 (一)机器准备 192.168.80.148 clouderamanager01 (部署ClouderaManager-server和Mirror se ...
- ubuntu18.04 安装docker
https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce-1Change "stable" ...
- Oracle 12c 创建用户
本文转载自 http://blog.itpub.net/29047826/viewspace-1453577/,侵删. 12c推出了可插拔库,管理用户也分为两种:本地用户和公用用户.本地用户是指在 ...