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-选取时间.日.月.年( ...
随机推荐
- JS实现值复制
在JS中对象一般都是传地址,后续修改也会影响原始数据.例如这样. var a={ b:"b" }; var c=a; c.b="c"; console.log( ...
- Kali/Ubuntu无法和物理机之间复制粘贴解决办法
Vmware安装Linux,传统的vmtools已经被抛弃,当前建议使用Open-VM-tools 安装Open-VM-tools//Kali,Ubuntu: sudo apt install Ope ...
- Mac下用Launchd实现使用rc.local执行开机启动命令
其实原理很简单,使用Launchd创建一个开机启动的服务,然后这个服务关联/etc/rc.local文件,那么接下来操作rc.local就和Linux下一样的了. 当然,这种思路还可以直接使用在~/. ...
- springboot项目:Redis缓存使用
保存Redis 第一步:启动类中加入注解 @EnableCaching package com.payease; import org.springframework.boot.SpringAppli ...
- MIME类型是什么?包含哪些类型?
摘自:http://www.tuidc.com/idczixun/newsx/newsidc/3479.html 问:MIME类型是什么? 答:MIME(Multipurpose Interne ...
- ubuntu手动安装PhantomJS
1.切换到主目录:cd ~2.下载安装包:https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-Linux-x86_64.ta ...
- 深度学习(二)BP求解过程和梯度下降
一.原理 重点:明白偏导数含义,是该函数在该点的切线,就是变化率,一定要理解变化率. 1)什么是梯度 梯度本意是一个向量(矢量),当某一函数在某点处沿着该方向的方向导数取得该点处的最大值,即函数在该点 ...
- JDK1.7新特性(3):java语言动态性之脚本语言API
简要描述:其实在jdk1.6中就引入了支持脚本语言的API.这使得java能够很轻松的调用其他脚本语言.具体API的使用参考下面的代码: package com.rampage.jdk7.chapte ...
- Java SPI
一.什么是Java SPI? SPI的全名为Service Provider Interface.大多数开发人员可能不熟悉,因为这个是针对厂商或者插件的.在java.util.ServiceLoade ...
- 学会了ES6,就不会写出那样的代码
用let不用var ES6之前我们用var声明一个变量,但是它有很多弊病: 因为没有块级作用域,很容易声明全局变量 变量提升 可以重复声明 还记得这道面试题吗? var a = []; for (va ...