type属性

input要素のtype属性は、データ入力用ユーザーインターフェースのタイプを指定する属性。

ブラウザ対応

構文

<input type="入力用ユーザーインターフェースのタイプ">

入力用ユーザーインターフェースのタイプ

全てのブラウザが、全てのキーワードに対応しているわけではない。

キーワード 説明 実際の表示
text １行テキスト入力欄。初期設定値。
search 検索用テキスト入力欄。
tel 電話番号入力欄。
url URL入力欄。
email メールアドレス入力欄。
password パスワード入力欄。
date 日付入力欄。
time 時間入力欄。
number 数値入力欄。
range レンジ入力欄。
color カラー入力欄。
checkbox チェックボックス。
radio ラジオボタン。
file ファイル入力欄。
submit 送信ボタン。
image 送信用画像ボタン。
reset リセットボタン。
button 汎用ボタン。
hidden 隠しデータ欄。

サンプルコード

１行テキスト入力欄

１行テキスト入力欄： <input name="sampleName">

１行テキスト入力欄： <input type="text" name="sampleName">

検索用テキスト入力欄

検索用テキスト入力欄： <input type="search" name="sampleName">

電話番号入力欄

電話番号入力欄： <input type="tel" name="sampleName">

URL入力欄

URL入力欄： <input type="url" name="sampleName">

メールアドレス入力欄

メールアドレス入力欄： <input type="email" name="sampleName">

パスワード入力欄

パスワード入力欄： <input type="password" name="sampleName">

サンプル

HTMLソースコード

<p>
	<label>
		１行テキスト入力欄：
		<input name="sampleText">
	</label>
</p>
<p>
	<label>
		検索用テキスト入力欄：
		<input type="search">
	</label>
</p>
<p>
	<label>
		電話番号入力欄：
		<input type="tel" value="00-000-0000">
	</label>
</p>
<p>
	<label>
		URL入力欄：
		<input type="url" value="http://hoge.tld">
	</label>
</p>
<p>
	<label>
		メールアドレス入力欄：
		<input type="email" value="info@hoge.tld">
	</label>
</p>
<p>
	<label>
		パスワード入力欄：
		<input type="password" value="サンプル">
	</label>
</p>
<p>
	<label>
		日付入力欄：
		<input type="date" value="2014-05-15">
	</label>
</p>
<p>
	<label>
		時間入力欄：
		<input type="date" value="12:34">
	</label>
</p>
<p>
	<label>
		数値入力欄：
		<input type="number" value="50">
	</label>
</p>
<p>
	<label>
		レンジ入力欄：
		<input type="range" value="50">
	</label>
</p>
<p>
	<label>
		カラー入力欄：
		<input type="color" value="#ff0000">
	</label>
</p>
<p>
	<label>
		チェックボックス：
		<input type="checkbox" value="sampleCheckboxValue">
	</label>
</p>
<p>
	<label>
		ラジオボタンＡ：
		<input type="radio" name="sampleRadio" value="sampleRadioValueA">
	</label>
	<br>
	<label>
		ラジオボタンＢ：
		<input type="radio" name="sampleRadio" value="sampleRadioValueB">
	</label>
</p>
<p>
	<label>
		ファイル入力欄：
		<input type="file">
	</label>
</p>
<p>
	<label>
		送信ボタン：
		<input type="submit" value="送信">
	</label>
</p>
<p>
	<label>
		画像ボタン：
		<input type="image" src="input-type-image.png" value="#ff0000">
	</label>
</p>
<p>
	<label>
		リセットボタン：
		<input type="reset">
	</label>
</p>
<p>
	<label>
		汎用ボタン：
		<input type="button" value="汎用ボタン">
	</label>
</p>
<p>
	<label>
		隠しデータ欄：
		<input type="hidden" value="隠しデータ">
	</label>
</p>

実際の表示