[49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)

<input type="submit">で （送信ボタン） を作ります。
また、<input type="reset">で （リセットボタン） を、
<input type="button">で    など色々な用途で使えるボタンを作ります。

	type属性の値	部品の役割
<input>要素で作る 送信ボタンなどの部品	type="submit"	送信ボタン
	type="reset"	リセットボタン
	type="button"	汎用のプッシュボタン

本日のINDEX

1. ほかの属性で機能を追加できます
2. type="submit" で「送信ボタン」を作ろう
   1. value属性で表示のテキストを変えられる
   2. formnovalidate属性で <form>要素のバリデート機能を無効にできる
3. type="reset" で「リセットボタン」を作ろう
4. type="button" で「汎用ボタン」を作ろう
   1. 戻る・進む などの「動作」は JavaScript を使います
5. javaScript でアラートを出そう（alert()メソッド）
6. javaScriptでキャンセルも（confirm()メソッド）
   1. リセットボタンを押した時のキャンセル
   2. 送信ボタンを押した時のキャンセル
   3. 汎用ボタンを押した時のキャンセル

<input>要素で作る送信ボタンには、もう１つ<input type="image"> があます。
これは「画像で送信ボタンを作る」部品のため、今回の3つとは違う専用の属性を使うので、次回に分けます。

また、ボタンを作る要素には、<input> の他に <button>要素というのもあります。

ほかの属性で機能を追加できます

今回の submit, reset, button も、type属性以外の属性を使って機能を追加できます。
（各属性については、それぞれのリンクで詳細をご覧ください。）

• 同時に複数の「送信ボタン」を使うときは、必ず name属性で部品名を指定しておきます。
• autofocus属性で、HTML文書のロード後すぐに「フォーカス（記入のための選択）」する
• form属性で <form>要素の外に出してレイアウトする
• disabled属性で「使用不可」にする

submit では、 <form>で指定した設定を上書きする属性があります。

• formaction属性で <form>の action属性を上書きする
• formmethod属性で <form>の method属性を上書きする
• formenctype属性で <form>の enctype属性を上書きする
• formtarget属性で <form>の target属性を上書きする
• formnovalidate属性で <form>で novalidate属性を使用していない（=バリデートする）状態のとき、送信ボタンのほうで「ノーバリデート（バリデート無し）」にする事ができます。

type="submit" で「送信ボタン」を作ろう

ではまず「送信ボタン」のデフォルト状態を見てみましょう。type属性以外に何も使っていない状態です。

<input type="submit">

value属性で表示のテキストを変えられる

value属性で表示用のテキストを指定できます。

<input type="submit" value="送信しよう！プッシュプッシュ！"> 

formnovalidate属性で <form>要素のバリデート機能を無効にできる

送信ボタンに formnovalidate属性を指定したものと、そうでないものを作ってみました。

お名前 (必須)：

（何も記入せずに、下のボタンを押して、試してみてください）

テキスト入力の部品（お名前 (必須) ）に required属性を指定しています。
ですので <form>要素にnovalidate属性を使用していない場合（=バリデートあり）なら、入力せずに送信ボタンを押すとアラートが出ます。

ですが、送信ボタンに「formnovalidate属性」を指定すれば、<form>要素のバリデート機能を上書きするのでバリデートしません。（required属性が無効になる）

<form> <!--formにnovalidate属性がないので、デフォルト (= バリデートする) 状態です-->
  <p>お名前 (必須)：<input type="text" name="onamae" required></p>
  <input type="submit" name="submit1" value="バリデートあり">
  <input type="submit" name="submit2" value="バリデートなし" formnovalidate>
</form>

ちなみに、<input type="submit"> は、単独で使うなら name属性は不要ですが、複数の送信ボタンを設定するときは、 name属性で部品名を指定する必要があります。

type="reset" で「リセットボタン」を作ろう

「リセットボタン」は、フォームの入力内容を全部リセットする機能。
コレを押すと、ユーザが書いた内容を全部リセットします。

下がデフォルト状態のサンプル。type属性以外に何も使っていません。

<input type="reset">

value属性で表示用のテキストを指定できるのは、submit と同じです。
name属性も使えますが、その値は送信されません。

記入欄：

（何か記入してからリセットボタンを押してみてください）

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <input type="reset" value="リセットする">
  <input type="submit" value="送信する">
</form>

type="button" で「汎用ボタン」を作ろう

フォームでは「送信」「リセット」だけじゃなく、「次へ」とか「戻る」などの操作ボタンが必要になる時もあります。
そのために用意されているのがこの type="button" です。

下がデフォルト状態のサンプル。type属性以外に何も使っていません。
デフォルトでテキストは表示されませので、小さい変なボタンになってますね。

<input type="button">

value属性で表示用のテキストを指定します。これはsubmit や reset と同じですね。

<input type="button" value="次へ進む">

戻る・進む などの「動作」は JavaScript を使います

上のソースだけでは何も起こりません。
type="button"で作る「汎用ボタン」は、自分では何にも動作できないので、javaScript で書き加える必要があります。

JavaScript（ジャバスクリプト）は、プログラミング言語のひとつ。ウェブブラウザ上で動作し、HTML・CSSだけではできない動作を指定することができます。

サンプルです。
★注意：
下のボタン↓を押すとホントにページ遷移をするので、ブラウザの戻るボタンとかで戻ってきて〜！

     

<input type="button" value="前へ戻る" onClick="history.back()">
<input type="button" value="次へ進む" onClick="history.forward()">
<input type="button" value="更新" onClick="location.reload()">
<input type="button" value="トップページへ" onClick="location.href='http://honttoni.blog74.fc2.com/'">

サンプルの JavaScript の説明をざっくりと。
「onClick=""」でボタンをクリックしたときの処理を指定します。（onClickイベントといいます）
「history オブジェクト」の history.back() で1つ履歴を戻り、history.forward() で1つ進みます。
「location オブジェクト」の location.reload() は現在のページのリロードをし、location.href はURLを読み込みます。URLは文字列なので「 ' ' (シングルクォート)」で囲みます。

javaScriptでアラートを出そう（alert()メソッド）

Javascriptでアラート表示もできます。
★注意：「次へ進む」ボタンを押すと ↓ ホントにページ遷移する場合があるので、ブラウザの戻るボタンとかで戻ってきてね。

   

複数のアラートを出したければ、alert() を「;（セミコロン）」で区切って複数書けばOK。

<input type="submit" value="送信" onClick="alert('この内容で送信します');alert('ありがとうございました！')">
<!--複数のアラートは↑「; (セミコロン)」で区切ります-->

<input type="reset" value="リセット" onClick="alert('リセットします')">
<input type="button" value="次へ進む" onClick="alert('次のページに進みます。');history.forward()">

javaScriptでキャンセルも（confirm()メソッド）

上の Javascriptの「alert()メソッド」は一方的な警告を出すだけで、ユーザは「OK」を押すことしかできません。
アラートを見て「やっぱりやめーた」と思っても、後戻りできないんだよね。

Javascriptの「confirm()メソッド」は、ユーザに「OK」か「キャンセル」か選んでもらえます。

リセットボタンを押した時のキャンセル

まずは、いちばんキャンセルが必要そうな「リセットボタン」のサンプルです。

記入欄：

（何か記入してからリセットボタンを押してみてください）

javaScriptと HTMLソースです。

<script>
function checkReset(){
  if(window.confirm('入力していただいた内容が全て削除されます。\n本当にリセットしますか？')){ 
    return true; 
  }
  else{window.alert('キャンセルします。\n引き続き入力内容を編集していただけます'); 
    return false; 
  }
}
</script>

<form onReset="return checkReset()">
<p>記入欄：<input type="text" name="name"></p>
<p>（何か記入してからリセットボタンを押してみてください）</p>
<input type="reset" value="リセットする">
</form>

<script>要素の中に JavaScriptを書いてます。

<script>要素については [44] scriptでスクリプトを読み込む or HTMLに直接書く をご覧ください。

function名は任意。ここでは「checkReset」にしました。
function checkReset( ) の「 { } 」の中に、具体的な動作を書きます。
ここでは「if〜else文」を使っています。これは「もし○○だったら {●●} して、○○でなかったら {＊＊} しなさい」という命令です。
「confirm()メソッド」は、alert() と違って、ユーザにOKかキャンセルか確認（コンファーム）をします。
「OK」がクリックされると true 、「キャンセル」をクリックすると false が返るようになっているんです。
で、上のサンプルだと、最初に質問の文言を表示し、OKかキャンセルのボタンも出す。
そこでOKならリセット。キャンセルならキャンセル用のアラートを出し、リセットを止めます。
confirm() や alert() の「( )」中の文言は自由に変えてください。
ちなみに「\n」（バックスラッシュ + n）は「改行」です。

さて、<form>要素のほうですが（12行目）「onReset="return checkReset()"」と入れて、上に書いた function checkReset( ) を呼び出しています。
フォームの部品はそのまま普通に書けばOK。onResetでリセットボタンにだけ反応します。

送信ボタンを押した時のキャンセル

次は「送信ボタン」。
上と同様に「confirm()メソッド」を使ったサンプルです。

記入欄：

<script> 
function checkSubmit(){
  if(window.confirm('送信しますか？')){ 
    return true; 
  }
  else{window.alert('キャンセルします'); 
    return false; 
  }
}
</script>

<form onSubmit="return checkSubmit()">
<p>記入欄：<input type="text" name="name"></p>
<input type="submit" value="送信する">
</form>

JavaScriptは、さきほどのリセットボタンのときと同様に function名は任意につけ（ここでは checkSubmit）、最初の質問文、キャンセルのときの文を指定。

<form>要素で「onSubmit="return checkSubmit()"」で呼び出します。
リセットのときは「onReset=" "」でしたよね。
onSubmitは「送信ボタン」にだけ反応します。

もうお分かりかと思いますが、
onResetは「リセットボタン」にだけ反応し、 onSubmitは「送信ボタン」にだけ反応するので、 両方一緒に使うのも簡単です。
<form onReset="return checkReset()" onSubmit="return checkSubmit()">と、半角スペース区切りで並べて書けばOK。

汎用ボタンを押した時のキャンセル

最後に「汎用ボタン」。「トップページへ」ボタンで、キャンセルさせてみましょう。

JavaScript を <script>要素で書かずに、<input>要素の中に仕込む方法で書いてます。

<input type="button" value="トップページへ" 
  onClick="rsp=confirm('トップページに戻ります');
  if(rsp==true){location.href='http://honttoni.blog74.fc2.com/'} 
  else {alert('キャンセルしました')}">

「onClickイベント」を使っていますよ。上のソースは見やすいように改行してますが、本来は1行で書いてます。
「rsp」は変数名で 任意です。（ここでは レスポンス（response）を短くして rsp にしました）
変数rspに confirm() を代入し、 if〜else文を使っています。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「送信ボタン・リセットボタン・汎用ボタン」の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

いかがでしたか？
急に JavaScriptがでてきてしまいましたが、JavaScript 無しだと せっかくのボタンの用途が狭くなるので、基本的なことだけメモっておきました。

次回は、今回の <input>要素で作るボタンの見た目を CSSで変えてみましょう。