IE、Edgeが動かない:タグlabel内に書いたinputが動作しない

2018/08/05PHPブラウザー,Explore,Edge

記事内に広告が含まれています。

IE、EdgeだけLabel内に書いたinputタグの挙動がちがう

inputタグの type="file" を利用してファイルアップロードを作成したのですが
その際に、他の情報も渡そうと思いinputタグ type="hidden"で情報の連携をおこないました。
ただ、今回のinputタグでは、標準のボタンではカッコ悪いのでbootstrapを用いて
ボタンの装飾をおこないました。

IE、Edgeだけinputタグが動かない

firefox、クロームでは動作するのに、IE、Edgeでは動いてくれない。
今回書いた処理は以下のものです。

01
02
03
04
05
06
<form id="file_up_form">
    <label class="btn btn-success btn-lg">
        <input type="hidden" name="main_folder" id="main_folder" value='aaa'>
        ファイルをアップロードする<input type="file" name="file_dat" style="display:none" onChange='fileUpLoad();return false;'>
    </label>
</form>

試行錯誤の結果inputタグ type="hidden"の記述場所が悪かったようです。

修正版

01
02
03
04
05
06
<form id="file_up_form">
    <input type="hidden" name="main_folder" id="main_folder" value='aaa'>
    <label class="btn btn-success btn-lg">
        ファイルをアップロードする<input type="file" name="file_dat" style="display:none" onChange='fileUpLoad();return false;'>
    </label>
</form>

なにも、Labelの中に書く必要はないので、外に出してあげれば、正常に動きました。
これが正しい記述方法なのでしょうか。
firefox、クロームは補正して動いてくれていたのでしょうか。

0
システムトラストでは一緒に働いていただける仲間を募集中です。
株式会社システムトラスト

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ