はじめに
inputタグのtype属性に複数の値を指定したらどうなるか気になったので検証してみた。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post" action='sample.php'>
<input type='text' name='sample1' value="text"><br>
<input type='hidden' name='sample2' value="hidden"><br>
<input type='password' name='sample3' value="password"><br>
<input type='url' name='sample4' value="http://url.url"><br>
<!-- ここからミックス -->
<input type='text hidden' name='sample5' value="text hidden"><br>
<input type='hidden text' name='sample6' value="hidden text"><br>
<input type='text password' name='sample7' value="text passowrd"><br>
<input type='password text' name='sample8' value="password text"><br>
<input type='text url' name='sample9' value="text url"><br>
<input type='url text' name='sample10' value="url text"><br>
<input type='hidden hidden' name='sample11' value="hidden hidden"><br>
<input type='text hidden passowrd url' name='sample12' value="text hidden password url"><br>
<button type='submit'>送信</button><br>
</form>
</body>
</html>
sample.php
<?php
echo('<pre>');
var_dump($_POST);
echo('</pre>');
結果
画面
ポスト値
考察
-
text hiddenが画面に表示されているのでhiddenは効いていない - 先頭に指定されているものが反映されるのか？と思い
hidden textにするもhiddenは効かず -
passwordの方も同様でpassword属性が効いていない（入力欄のものが●●●のような伏せ字になっていない） - 上記の状態で送信が行えるので
url属性も効いていない
結論
typeに複数の属性は指定できない
考えて見れば当たり前のことでtype='hidden'は用意されているがtype='hidden url'は用意されていないので、無効な属性と判断されデフォルト値になる。
inputのtypeのデフォルト値はtextなので組み合わせて指定したものは全てtextとしての挙動を示してることが分かる。
納得納得
参考
type属性一覧はこちらを参照した。