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

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

１．ボタンの部品

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

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

▲目次へ戻る

２．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は”（シングルコーテーション）で囲みます。

▲目次へ戻る