input常用属性
对于input的使用,大家都很熟悉的,<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。下面总结下个人经常使用过的一些属性。
text 文本域
button 按钮
checkbox 复选
file 文件类型限制
hidden 隐藏域
password 密码域
radio 单选
reset 重置按钮
submit 确认按钮
type="text"
<input type="text" name="名称" disabled="disabled" value="禁用" maxlength="20" size="50">
<input type="text" name="名称" readonly="readonly" value="只读" maxlength="20" size="30">
效果图
name —— 定义 input 元素的名称。
disabled —— 当 input 元素加载时禁用此元素。
value —— 规定 input 元素的值。
maxlength —— 规定输入字段中的字符的最大长度。
size —— 定义输入字段的宽度。
type="file"
比如之前做的上传歌曲的demo,可以利用表单提交的方法。直接限制input type='file'的文件类型限制,通过accept属性进行设定,多个类型用逗号分隔开;multiple="multiple"是允许多个上传;然后将它隐藏,UI层按钮可以通过自定义一个标签来美化,可以写这句代码来触发它
$("#picker").on("click",function(){
$("#fi").get(0).click();
})
效果图:
具体的上传到服务器这些就不写了,自己写的比较粗糙,网上有现成的插件,效果都挺好的,具体是什么插件就百度吧,就不帮打广告了。
input常用属性的更多相关文章
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- HTML中强大的input标签属性
用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- 表单、框架结构的大概、CSS开头(选择器以及常用属性)
<!--为网页添加图标,写在头部--> <link rel="shortcut icon" href="favicon.ico(路径)" ty ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- jQuery常用属性方法大全 attr(),val()
@@@@属性篇: 写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统.到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的 ...
- Ext.form.ComboBox常用属性详解
Ext.form.ComboBox常用属性详解 标签: Extjs js combo js 代码 var combo = new Ext.form.ComboBox({ store : new Ext ...
- input常用输入框限制
input常用输入框限制 本篇 1.小写自动转换成大写: or 2.大写自动转换成小写 or 3.防止退后清空的TEXT文档 4.ENTER键可以让光标移到下一个输入框 5.只能为中文(有闪动) ...
- js进阶-9-3/4 form对象有哪些常用属性
js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...
随机推荐
- session的工作原理
asp中Session的工作原理:asp的Session是具有进程依赖性的.ASP Session状态存于IIS的进程中,也就是inetinfo.exe这个程序.所以当inetinfo.exe进程崩溃 ...
- java开发连接Oracle 12c采用PDB遇到问题记录
今天初次使用java连接Oracle 12c,遇到各种问题,为方便后续查询,在汇总了问题记录及解决方案如下. ORA-28040: No matching authentication protoco ...
- AWS-CDH5.5安装-安装
1.安装MySQL [root@ip---- mysql]# rpm -ivh MySQL-server--.el6.x86_64.rpm MySQL-client--.el6.x86_64.rpm ...
- AngularJS时间轴指令
是基于ion.rangeSlider.js,主要代码如下: <link rel="stylesheet" type="text/css" href=&qu ...
- HTML5与CSS3经典代码
1)全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; ...
- bootstrap的下载
http://files.cnblogs.com/files/eeroom/bootstrap3.3.zip http://files.cnblogs.com/files/eeroom/Bootstr ...
- (转)整体把握jQuery -jQuery 的原型关系图
整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...
- MFC之TreeCtrl控件使用经验总结
树形控件可以用于树形的结构,其中有一个根接点(Root)然后下面有许多子结点,而每个子结点上有允许有一个或多个或没有子结点.MFC中使用CTreeCtrl类来封装树形控件的各种操作.通过调用BOOL ...
- sql 日期格式输出 - 转
SELECT CONVERT(varchar(100), GETDATE(), 0) 05 9 2011 9:12AM SELECT CONVERT(varchar(100), GETDATE(), ...
- LCD相关知识点
1.LCD即液晶显示器,控制原理是控制其中的电子枪,在n行*n列的屏幕上投射不同颜色从而形成图像 2.编程步骤: ①打开LCD背光将LCD背光对应的GPIO设置为禁止上拉(GPxUP相应位写入1),选 ...