はじめに

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属性一覧はこちらを参照した。

http://honttoni.blog74.fc2.com/blog-entry-138.html