最近在做将input[type="file"] 改变其样式时,发现label的巨大潜力,特此记录一下。

1, label标签的作用

(1)为input元素定义标注(标记)

(2)不会呈现任何效果

(3)改变鼠标可用性。当用户选择label标签时,浏览器会自动将焦点转到和标签有关的表单控件上。

(4)label标签的for属性应当与相关元素的id属性相同。for属性将label绑到另一个元素上。

<label for="file">上传文件:&nbsp;</label>
<input type="file" id="file" name="file" class="input-file">

(5)label标签的form属性:规定label元素所属的一个或多个表单。

<form action="demo_form.php" id="form1">
<label for="label">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
</form> <label for="male" form="form1">Male</label>

 ==》》 

当鼠标点击下面的Male时,上面单选框的Male会被选中。

但是这里面存在一个问题,明明说是属于的一个或多个的form表单,但是却无法实现。

    <form id="form1">
<!-- <label for="male">Male</label> -->
<input type="radio" name="sex" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female">
</form>
<br>
<form id="form2">
<!-- <label for="male1">Male</label> -->
<input type="radio" id="male1">
</form>
<br> <label for="male male1" form="form1 form2">Male</label>

点击最下面的Male却无任何反应。在控制台,确定打印出对应的标签
   

不明白这里面的对应的一个或多个form表单的意思。

2,利用label改变丑丑的input[type="file"] 样式

参考博客:

原文 https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

中文译文 https://www.jianshu.com/p/07c27e576b26

张鑫旭大大的 http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/

正常的样式:

<label for="file">上传文件:&nbsp;</label>
<input type="file" name="file" id="file" class="inputfile" />

解决方法:

(1)让file类型的元素透明度为0,覆盖在好看的按钮上,然后去点击好看的按钮,实际上点击的还是file元素。

(2)label元素与file控件关联(已经引入bootstrap.css文件)

        <label class="btn btn-primary" for="xFile" style="margin:10px;">上传文件</label>
<form>
<input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">
</form>

扩展:显示文件名

已经引入bootstrap.css and jquery.js 文件

<form class="form-inline">
<label class="btn btn-primary" for="xFile" id="test" style="margin:10px;">上传文件</label>
<input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);" data-multiple-caption="{count} files selected" multiple>
<span class="fileName">未上传任何文件</span>
</form> <script type="text/javascript">
$( '#xFile' ).each( function() {
var $input = $( this ),
$label = $('.fileName'),
labelVal = $label.html(); $input.on( 'change', function( e ) {
var fileName = ''; if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else if( e.target.value )
fileName = e.target.value.split( '\\' ).pop(); if( fileName )
$( 'span' ).html( fileName );
else
$label.html( labelVal );
});
}); </script>
 未做任何处理/esc退出选择 显示一个文件的名字 可选多个文件上传

且支持esc退出文件上传选择对话框,且上传文件为空。

HTML——label标签的更多相关文章

  1. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  2. HTML label标签的一点理解

    label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...

  3. HTML <label> 标签

    定义:<label> 标签为 input 元素定义标注(标记). 用法: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本, ...

  4. label标签使用过程中遇到的问题

    最近在做东西时候使用到了label标签,由于之前很少使用label标签,所以就遇到一个很奇怪的问题.什么问题呢?下面来看一个效果 <!DOCTYPE html> <html> ...

  5. [Cocos2D-x For WP8]Label标签

    Label标签主要会用于在游戏中显示一些文字字符串类型的信息.那么在Cocos2D-x里面主要会有下面的一些创建标签的方式: 1.使用CCLabelTTF类生成系统文字的标签,编程语法如下: CCLa ...

  6. [HTML5]label标签使用以及建议

    for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...

  7. label标签跳出循环

    出场: 首先我们来说说为什么需要label标签,虽然我们已经知道有break,continue跳出循环,但如果是多重循环那么它们就显的无能为力了,所以就出现了label这个标签来为我们服务. 我们先来 ...

  8. 转:label标签的特殊用法

    容易被忽略的label标签 原始作用 label标签是HTML原生的标签,其原始的作用参考这里 label 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过 ...

  9. html之label标签

    label标签为input元素定义标注,label标签与相关元素通过id属性绑定在一起. 相关属性: for:规定label绑定到哪个表单元素 form:规定label字段所属的一个或多个表单 示例代 ...

  10. label标签的用法

    label 标签for属性 <h1>显式指定通过for(for的值就是对应radio的id的值)</h1> <form> <label for="m ...

随机推荐

  1. [apue] 一个查看当前终端标志位设置的小工具

    话不多说,先看运行效果: >./term input flag 0x00000500 BRKINT not in ICRNL IGNBRK not in IGNCR not in IGNPAR ...

  2. (树形DP)Strategic game POJ - 1463

    题意: 给你一棵树,树的每一个节点可以守护与其相连的所有边,问你最少用多少个节点可以守护这整棵树 思路: 仔细思考不难发现,要想守护一条边,边的两个端点必须有一个可以被选(两个都选也可以),然后这个问 ...

  3. 一文带你了解 HTTP 黑科技

    这是 HTTP 系列的第三篇文章,此篇文章为 HTTP 的进阶文章. 在前面两篇文章中我们讲述了 HTTP 的入门,HTTP 所有常用标头的概述,这篇文章我们来聊一下 HTTP 的一些 黑科技. HT ...

  4. JS实现 JSON扁平数据转换树状数据

    后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: '', level: 0}, {id:2 , parentId: 0, name: '', level: 0}, ...

  5. HTML 中清除浮动

    html中如何清除浮动   在html中,浮动可以说是比较常用的.在页面的布局中他有着很大的作用,但是浮动中存在的问题也是比较多的.现在我们简单说一下怎么去除浮动 首先我们先简单的看一下浮动: 首先我 ...

  6. mybatis 执行流程以及初用错误总结

    mappper 配置文件  头文件: 1.   <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" &q ...

  7. springIOC源码接口分析(八):AutowireCapableBeanFactory

    参考博文: https://blog.csdn.net/f641385712/article/details/88651128 一 接口规范 从宏观上看,AutowireCapableBeanFact ...

  8. CUDA学习(六)之使用共享内存(shared memory)进行归约求和(M个包含N个线程的线程块)

    在https://www.cnblogs.com/xiaoxiaoyibu/p/11402607.html中介绍了使用一个包含N个线程的线程块和共享内存进行数组归约求和, 基本思路: 定义M个包含N个 ...

  9. 毕业论文系列之基于WiFi的智能农业大棚管控系统设计代码

    #include <dht11.h>//dht11库 #include <MsTimer2.h>               //定时器库的 头文件 #include < ...

  10. 【原创】在 .NET Core 3.1 中使用 Senparc.Weixin.Work 企业微信 SDK —— 发送文本消息

    下面在控制台应用里展示一个简单的例子来实现发送文本消息. 本文目录: 创建控制台应用 添加SDK引用 命令行方式 进入项目目录 添加包引用 配置和使用SDK 添加appsettings.json文件 ...