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

最終更新日:2018年02月01日  (初回投稿日:2013年08月28日)

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

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

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

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

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

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

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

次回予告

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

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.