<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 各种输入, 各种用户选择,上传等等泛输入用户交互的更多相关文章

  1. html5 填表 表单 form label input button legend fieldset

      <form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性pos ...

  2. html5 填表 表单 input output 与表单验证

    1.<output>     Js计算结果 <form oninput="res.value = num1.valueAsNumber*num2.valueAsNumber ...

  3. 表单单选按钮input[type="radio"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

  5. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  6. HTML5之表单新增类型介绍

    1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: <!doctype html> <html> <head></ ...

  7. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  8. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  9. HTML5表单之Input 类型- Date Pickers(日期选择器)

    HTML5 拥有多个可供选取日期和时间的新输入类型: date-选取日.月.年 month-选取月.年 week-选取周和年 time-选取时间(小时和分钟) datetime-选取时间.日.月.年( ...

随机推荐

  1. 数学规划求解器lp_solve超详细教程

    前言 最近小编学了运筹学中的单纯形法.于是,很快便按奈不住跳动的心.这不得不让我拿起纸和笔思考着,一个至关重要的问题:如何用单纯形法装一个完备的13? 恰巧,在我坐在图书馆陷入沉思的时候,一位漂亮的小 ...

  2. DataTables复杂表头

    工作上的需要,要做一个复杂的表头的DataTables thead如下 遇到的问题(详细问题可以浏览官网的答案 链接) 需自定义表头(thead),如果不自定义则会 Cannot read prope ...

  3. springboot自定义jmx对象

    在使用springboot-admin对springboot项目进行监控的时候我们发现其是具有web访问jmx对象的功能的,那它内部是怎么实现的呢. Jolokia是一个JMX-http桥梁,它提供了 ...

  4. (转)MySQL主主互备结合keepalived实现高可用

    MySQL主主互备结合keepalived实现高可用 原文:http://7424593.blog.51cto.com/7414593/1741717 试验环境: master:192.168.1.2 ...

  5. SVN linux 服务器端配置

    一. SVN 简单介绍 Subversion(SVN) 是一个开源的版本号控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository ...

  6. javascript004_ECMA5数组新特性

    •对于ECMAscript5这个版本的Array新特性补充: –位置方法:indexOf      lastIndexOf –迭代方法:every  filter   forEach   some   ...

  7. 浅谈js中的垃圾两种回收机制

    一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...

  8. Cloudera Manager安装之Cloudera Manager安装前准备(CentOS6.5)(一)

    Cloudera Manager安装前准备 (一)机器准备 192.168.80.148   clouderamanager01 (部署ClouderaManager-server和Mirror se ...

  9. ubuntu18.04 安装docker

    https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce-1Change "stable" ...

  10. Oracle 12c 创建用户

    本文转载自 http://blog.itpub.net/29047826/viewspace-1453577/,侵删.   12c推出了可插拔库,管理用户也分为两种:本地用户和公用用户.本地用户是指在 ...