あらすじ
とあるHTMLを書いているときに、凡ミスで <input type="submit"> に value 属性を付けるのを忘れてしまったのですが、WEBページ上ではこんなふうに[送信]という文言が表示されており、おや？と思いました。
value 属性書けば終わる話ですが、気になったので軽く調べてみました。
が、この value 属性を省略した場合はどうなるかというのはうまく情報が見つかりませんでした。結局 HTMLをブラウザがどう解釈するか、によるので定まった情報はないんですかね？
それなら
情報探すよりも実際にブラウザで確認するほうが早そうなので検証してみることにしました。
input タグの type が reset, submit, button の場合は value に設定したものがボタンのテキストとして使われるようなので、とりあえずこの3つでやってみたいと思います。
- For "button", "reset", and "submit" - it defines the text on the button
検証用ページ
検証用に value 属性の無い input タグを置いただけの簡単なページを用意しました。これをいろんなブラウザで開いてみます。
https://jpsern.github.io/gh-pages-test/input-test.html
説明するほどでもないですがコードも載せておきます。
検証 type の増減が楽なのでスクリプトで HTML を生成するようにしてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>value属性のデフォルト値検証ページ</title>
<script type="text/html" id="tpl-li">
<li>
<span>type={%type%}: </span><input type="{%type%}">
</li>
</script>
<script>
//対象の type 属性値
const types = [
"submit", "reset", "button"
];
//types 配列の要素分だけ input タグを生成する
document.addEventListener("DOMContentLoaded", function(event){
const inputs = document.getElementById("inputs");
types.forEach(function(value){
const tpl = document.getElementById("tpl-li").innerHTML;
inputs.innerHTML += tpl.split("{%type%}").join(value);
});
});
</script>
</head>
<body>
<h1>value属性のデフォルト値検証用HTML</h1>
<ul id="inputs"></ul>
</body>
</html>
検証結果
もっとバラけるかと思いましたが、IE、Edge以外はみんな同じでした。結局またいつものやつらか
PC
| type | Google Chrome | Mozilla Firefox | Internet Explorer11 | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| submit | 送信 | 送信 | クエリ送信 | クエリ送信 | 送信 |
| reset | リセット | リセット | リセット | リセット | リセット |
| button | なし | なし | なし | なし | なし |
スマートフォン
| type | Mobile Safari | Chrome for Android |
|---|---|---|
| submit | 送信 | 送信 |
| reset | リセット | リセット |
| button | なし | なし |
結論
ということで value 属性の値を省略した場合はブラウザによって挙動が異なる場合があるので、value 属性は忘れずに入れましょう(自戒
終わってみれば当たり前な話ですみません。
使用端末
- PC1(Windows7 Professional SP1 64ビット)
- PC2(Windows10 Professional 64ビット)
- iPhone6s(iOS 9.3.5)
- Nexus7(2012版)(Android 5.1.1)
なお、Chrome, FireFox, Opera の検証結果については2018/07/30時点の最新版によるものです。