<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. springboot第四篇:debug模式开发运用

    前提:项目是以maven project结构建立的,现状是无法进行断点调试的.怎么才能在eclipse里进行调试呢? 需要:①将项目打包部署到tomcat ②往项目加入dynamic web modu ...

  2. 配置不同站点不同版本PHP

    Apache 配置 1.常规手动部署apache方法(不会apache配置的请先移步看下Apache基本手工配置方法),解压fcgid,取其mod_fcgid.so至modules目录 2.打开htt ...

  3. SQL语句02(连表查询)

    ---恢复内容开始--- sql1992sql分类    1.笛卡尔积 (表乘表) 例:select * from emp,dept;    2.等值连接 表的连接条件使用“=” 例:select * ...

  4. 【笔记】AJAX基础

    [笔记]AJAX基础 Django AJAX  知识储备:JSON 什么是 JSON JSON 是轻量级的文本数据交换格式 JSON 独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编 ...

  5. POJ_3470 Walls 【离散化+扫描线+线段树】

    一.题面 POJ3470 二.分析 POJ感觉是真的老了. 这题需要一些预备知识:扫描线,离散化,线段树.线段树是解题的关键,因为这里充分利用了线段树区间修改的高效性,再加上一个单点查询. 为什么需要 ...

  6. [转] ELK 之 Logstash

    [From] https://blog.csdn.net/iguyue/article/details/77006201 ELK 之 Logstash 简介: ELK 之 LogstashLogsta ...

  7. OGNL取Map,List,Set的值

    用到的类有: 相应代码: public class Dog { private String name; public Dog(){ } public Dog(String name){ this.n ...

  8. Ubuntu双网卡不双待攻略

    特别不喜欢基于Windows的工作环境,这对一个Unix/Linux程序员来说,可以说是一种信仰.要不是电子邮件客户端被牢牢绑定在可恶的Outlook 2013上(因为加密邮件要求, 想使用Thund ...

  9. vue监听不到props中的值时

    已解决: watch: { data: { immediate: true, handler: function(newVal) { console.log(newVal); } } },

  10. 《Think Python》第17章学习笔记

    目录 <Think Python>第17章学习笔记 17.1 面向对象的特性(Object-oriented features) 17.2 打印对象(Printing objects) 1 ...