autofocus属性

button要素のautofocus属性は、オートフォーカスさせる属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

<button type="ボタンのタイプ" autofocus>ボタン名</button>

autofocus属性は、論理属性である。

autofocus属性が存在する場合、ページ読み込み時にオートフォーカスする。

サンプルコード

送信ボタン

<button type="submit" autofocus>送信</button>

<button autofocus>送信</button>

リセットボタン

<button type="reset" autofocus>リセット</button>

汎用ボタン

<button type="button" autofocus>汎用ボタン</button>

サンプル

HTMLソースコード

<form action="sample-button.php" method="post" target="_blank">
	<p>
		<label>
			１行テキスト入力欄：
			<input name="sampleName">
		</label>
	</p>
	<p>
		<button>type属性なし</button>
		<button type="submit" autofocus>送信ボタン</button>
		<button type="reset">リセットボタン</button>
		<button type="button">汎用ボタン</button>
	</p>
</form>

実際の表示