HTML——label標簽

最近在做將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退出文件上傳選擇對話框，且上傳文件為空。