【HTML】inputタグで指定できる入力用部品一覧

HTML のinputの種類一覧

text：
password：
file：
checkbox：
radio：
hidden：
submit：
reset：
button：
image：
search：
tel：
url：
email：
date：
time：
number：
range：
color：
datetime ：
datetime：
month：
week：

上記部品をHTMLにすると以下の通り、labelとbrは見易さのために付与している。

ポイントはinput typeにしているパラメータ

<form id="test">
<label>text：<input type="text" name="text1"></label><br>
<label>password：<input type="password" name="password1"></label><br>
<label>file：<input type="file" name="file1"></label><br>
<label>checkbox：<input type="checkbox" name="checkbox1"></label><br>
<label>radio：<input type="radio" name="radio1"></label><br>
<label>hidden：<input type="hidden" name="hidden1"></label><br>
<label>submit：<input type="submit" name="submit1"></label><br>
<label>reset：<input type="reset" name="reset1"></label><br>
<label>button：<input type="button" name="button1"></label><br>
<label>image：<input type="image" name="image1"></label><br>
<label>search：<input type="search" name="search1"></label><br>
<label>tel：<input type="tel" name="tel1"></label><br>
<label>url：<input type="url" name="url1"></label><br>
<label>email：<input type="email" name="email1"></label><br>
<label>date：<input type="date" name="date1"></label><br>
<label>time：<input type="time" name="time1"></label><br>
<label>number：<input type="number" name="number1"></label><br>
<label>range：<input type="range" name="range1"></label><br>
<label>color：<input type="color" name="color1"></label><br>
<label>datetime ：<input type="datetime " name="datetime 1"></label><br>
<label>datetime：<input type="datetime" name="datetime1"></label><br>
<label>month：<input type="month" name="month1"></label><br>
<label>week：<input type="week" name="week1"></label><br>

<!— 以下　電話のデフォルト設定例—>
<input id="work_phone" type="tel" required placeholder="(425) 555-0067">
<input type="tel" name="tel"  pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d"  title="enter a telephone number in   the format (xxx) xxx-xxxx"><br>

<!— 以下　日付のデフォルト設定例—>
<input type="date" name="example2" value="2012-02-16">
<p><input type="date" name="example" min="2012-01-01" max="2012-12-31" value="2011-01-01"></p>

</form>