ITコラム

businesswoman with computer touchscreen in office

ITコラム

2017.02.17

HTML【フォーム】5～input要素（10）ボタン（submit、reset、button）

今回は、input要素で作る部品の中で、データを送信するためのボタン（submit）とリセットボタン（reset）についてまとめます。

フォームについては、こちらのページもご参照下さい。

１．ボタンの部品

<input type=”submit”>を使うと、データを送信するためのボタンを作ることができます。
また、<input type=”reset”>は、入力データをリセットするためのボタンを作る際に使用します。
他に、<input type=”button”>で、次のページに遷移するボタンなど用途に応じたボタンを作ることができます。

	type属性の値	部品の種類
input要素で作るボタンの部品	type　=　”submit”	送信ボタン
	type　=　”reset”	リセットボタン
	type　=　”button”	用途に応じたボタン

ボタン部品も、type属性以外の属性を使って機能を追加することができます。

autofocus属性 HTML文書のロード後すぐにフォーカス（選択された状態に）する

form属性 form要素の外に出してレイアウトする

disabled属性使用不可の状態にする

formaction属性
（type=”submit”の場合のみ） form要素のaction属性を上書きする

formmethod属性
（type=”submit”の場合のみ） form要素のmethod属性を上書きする

formenctype属性
（type=”submit”の場合のみ） form要素のenctype属性を上書きする

formtarget属性
（type=”submit”の場合のみ） form要素のtarget属性を上書きする

formnovalidate属性
（type=”submit”の場合のみ） form要素でnovalidate属性を指定していない場合（バリデート有）に、送信ボタンでバリデート無しの状態にする

autofocus属性	HTML文書のロード後すぐにフォーカス（選択された状態に）する
form属性	form要素の外に出してレイアウトする
disabled属性	使用不可の状態にする
formaction属性（type=”submit”の場合のみ）	form要素のaction属性を上書きする
formmethod属性（type=”submit”の場合のみ）	form要素のmethod属性を上書きする
formenctype属性（type=”submit”の場合のみ）	form要素のenctype属性を上書きする
formtarget属性（type=”submit”の場合のみ）	form要素のtarget属性を上書きする
formnovalidate属性（type=”submit”の場合のみ）	form要素でnovalidate属性を指定していない場合（バリデート有）に、送信ボタンでバリデート無しの状態にする

▲目次へ戻る

２．submitでボタンを作成

●<input type=”submit”>で送信ボタンを作成すると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="submit">

submitは、単独で使う場合はname属性の指定は不要ですが、複数の送信ボタンを設定する場合は、必ずname属性で部品名を指定します。

value属性で、表示用のテキスト（上の例の「送信」の部分）を指定できます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="submit" value="ここを押すとデータが送信されます！">

●formnovalidate属性を指定しない場合は、必須入力項目に対してバリデート（入力チェック）が働き、アラートが表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<form>
ID：<input type="text" name="id" required>
<input type="submit">
</form>

input type=”text”で作成した入力欄は、required属性の指定があるので必須入力項目です。
form要素でもtype=”submit”を指定したinput要素でもnovalidate属性の指定をしていないので、デフォルトで設定されるバリデート（入力チェック）が働いて、必須入力項目の入力を促すアラートが表示されます。

▲目次へ戻る

３．resetでボタンを作成

type=”reset”で作成されるリセットボタンは、フォームの入力内容を全てリセットする機能を持っています。
ユーザが入力してくれた情報が一瞬にして消去されてしまうということを念頭に置いて、慎重に作成する必要があります。

<input type=”reset”>でリセットボタンを作成すると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="reset">

submitと同様に、value属性で表示用のテキストを指定できます。

下の記入欄に文字を入力して、リセットボタンを押してみて下さい。

上の表示に対するhtmlコードは、以下の通りです。

<form>
<input type="text" name="test" placeholder="こちらに文字を入力してリセットボタンを押してみて下さい！">
<input type="reset">
</form>

▲目次へ戻る

４．buttonでボタンを作成

データを送信する場合と、入力内容をリセットする場合以外にも、次のページへ遷移したり、ポップアップで簡単なメッセージを表示させたりするなど、特定の機能を持つボタンを作る際に、type=”button”を使用します。

type=”button”でボタンを作成する場合には、submit（送信）やreset（リセット）のようにデフォルトでボタンにテキストが表示されないので、value属性で表示用のテキストを指定します。

上の表示に対するhtmlコードは、以下の通りです。

<input type="button" value="トップページを表示する">

上のソースだけでは、ボタンを押しても何も起こりません。アクションを起こすには（トップページを表示するには）、例えばJavaScriptというスクリプト言語等を使って、アクションを起こす命令を記述する必要があります。

下のボタンを押してみて下さい。

上のボタンに対するhtmlコードは、以下の通りです。

<input type="button" value="トップページを表示する" onClick="location.href='https://programmercollege.jp/'">

「onClick=”location.href=’https://programmercollege.jp/'”」という記述が、JavaScriptです。
この記述の説明のみになりますが、「onClick=””」でボタンを押した時の処理を設定しており、「location.href=’URL’」はURLを読み込むための命令です。””（ダブルコーテーション）の中ですので、URLは”（シングルコーテーション）で囲みます。

▲目次へ戻る