IEでformタグ内にtemplateタグを使う方法

3069 ワード
HTML HTML5 IE HTML テキストリンク

概要

IEは<template>に対応していないため，<form>内に<input>を持つような<template>を配置してしまうと<template>内まで送信されてしまうことを回避する方法を紹介します．

状況

<form>
    <input type="text" id="input1">
    <template>
        <input type="text" id="input[_new]">
    </template>
</form>

この場合，IEでは<template>以下の<input type="text" id="input[_new]">まで送信されてしまいます．

回避方法

templateタグにdisabled属性を与える．

理由

IEでは，親タグがdisabled属性を持つと，disabled属性が子のタグまで伝搬する仕様を利用した手法です．
例えば

<div>
    <input type="text" value="input1">
    <input type="text" value="input2" disabled>
</div>
<div disabled>
    <input type="text" value="input3">
    <input type="text" value="input4" disabled>
</div>

のようなHTMLを書くと，Chromeなどでは

と，自身のdisabled属性の有無で判定されますが，IEでは

と，親タグのdisabled属性が伝搬してしまいます．したがって<template>にdisabled属性を与えれば，<template>以下の要素はすべて送信されなくなります．

まとめ

IEでも動く<form>内に<template>を置く方法を紹介しました．
この方法を用いると，<input>にrequired属性を加えていても動作するようになります．
しかし，この方法はIEの特殊な仕様を用いているため，注意が必要です．
そもそもIEが<template>に対応していればよいのですが...