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

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

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

●type="button" に動作の機能を付ける
type="button"で作る「汎用ボタン」は、自分では何にも動作をする機能が無いので、javaScript で書き加えてあげる必要があります。詳細は下の「type="button"」で。

●アラート文や、キャンセルボタンを出す

ボタン部品は、この ↑ ようにアラート(注意を促す表示)を出す事もできます。
また、ユーザに「本当にリセットしますか?」などと確認し、キャンセルさせる事も可能です。
これらも javaScript で指定します。作り方は記事の後半部分に書いています。

●ボタンのスタイルをCSSで変更する

<input>要素で作るボタンは、ブラウザごとに独自のスタイルが決められているので、どのブラウザでも同じ外観にしたい場合は CSS を使います。作り方は記事の最後に書いておきます。

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

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

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

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

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

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

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

ではまず「送信ボタン」のサンプルを見てみましょう。

●サンプル1
これがデフォルト。type属性以外に何も使っていない状態です。

<input type="submit">

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

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

●サンプル2
formnovalidate属性を指定した送信ボタンと、そうでない送信ボタンを作ってみました。
テキスト入力の部品(お名前 (必須) )に required属性を指定していますが、送信ボタンにこの formnovalidate属性を指定すれば、バリデートしません。(required属性が無効になる)

お名前 (必須):

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

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

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 というスクリプトを使います。
(注意:下のボタン↓を押すとホントにページ遷移をするので、ブラウザの戻るボタンとかで戻ってきて〜!)

<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、コピペでOKなんですが、一応ざっと説明を。
JavaScriptの「onClick=""」でボタンをクリックしたときの処理を指定しています。(onClickイベントといいます)
「history オブジェクト」の history.back() で1つ履歴を戻り、history.forward() で1つ進みます。
「location オブジェクト」の location.reload() は現在のページのリロードをし、location.href はURLを読み込みます。URLは「 ' ' (シングルクォート)」で囲むのを忘れずに!

このURLは絶対でも相対でもOK。「絶対URL、相対URL」については「[10] 絶対URL と 相対URL」をご覧ください。

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

今回の submit, reset, button 全部に共通して、このように Javascriptでアラート表示もできます。
(注意:「次へ進む」ボタンを押すと ↓ ホントにページ遷移する場合があるので、ブラウザの戻るボタンとかで戻ってきてね)

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

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

Javascriptの「alert()メソッド」を使っていますが、これは一方的な警告を出すだけです。
コレと違って「confirm()メソッド」は、ユーザにOKなのかキャンセルなのか尋ねる事ができます。
次はそれを使ってみましょう。

javaScriptでキャンセルもできるようにしよう(confirm()メソッド)

上のソースでは、アラート表示の「OK」しか出ないので「やっぱりやめーた」と思っても後戻りできなくて、意味無いよね。そこで「キャンセル」もできるようにしましょう。

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

記入欄:

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

ソースです。

<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>〜</script>の中に JavaScriptを書いてます。
<script>要素のtype属性は、デフォルトが "text/javascript" なので省略可能です。
関数の名前は任意。ここでは「checkReset」にしました。
function checkReset( ) の「 { } 」の中に、具体的な動作を書きます。
ここでは「if〜else文」を使っています。これは「もし○○だったら {●●} して、○○でなかったら {**} しなさい」という命令です。
confirm()メソッド」は、alert() と違って、ユーザにOKかキャンセルで選択させて同意(コンファーム)を得ます。「OK」がクリックされると true 、「キャンセル」をクリックすると false が返る仕様になっているんです。
で、上のサンプルだと、最初に質問の文言を表示し、OKかキャンセルのボタンも出します。
そこでOKならリセット。キャンセルならキャンセル用のアラートを出し、リセットを止めます。
confirm() や alert() の「( )」中の文言は自由に変えてください。
ちなみに「\n」(バックスラッシュ + n)は「改行」です。

さて、フォームのほうですが、<form>要素に「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のほうは、さきほどのリセットボタンのときと同様に、関数名は任意につけ(ここでは checkSubmit にしました)、最初の質問文、キャンセルのときの文を指定します。

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

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

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

これは、先ほどまでのように JavaScript を別に書かずに<input>要素の中に仕込む方法です。

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

上のソースは見やすいように改行してますが、本来は1行で書いてます。
「onClickイベント
」を使っていますよ。さきほど type="button"のところで一度見てますね。
rsp」は変数名で、任意です。ここでは「レスポンス(response)」を短くして rsp にしました。
で、変数rspに confirm() を代入し、confirm() 内で if〜else文を使ってます。
先ほどのリセット・送信ボタンでは「function(関数)」を使いましたが、その代わりに「変数」を使っているわけです。 if〜else文を見ると、同じことをやってるのがわかりますね。

CSSを使ってボタンの見た目を変えてみよう

<input>要素で作るボタンは、ブラウザによって独自のスタイルが設定されています。
それでブラウザごとに見た目が違ってしまうんです。
そこで、そのスタイルをCSSで設定して変えちゃいましょう。

今回ちょっと、本文が長過ぎなので、別ファイルでサンプルを作りました。
HTML、CSSのソースも、そちらでご覧ください。
★下の画像をクリックするとサンプルが、別ウィンドウで開きます。

背景色や角丸、シャドウを指定したもの。ロールオーバーで背景色が変化します。

背景をグラデーションに。

背景に画像を指定することもOK。もちろんロールオーバーで画像を変化させます。

★JavaScriptの記述位置について★
このブログでは便宜上、<script>要素をHTMLの本文中に置いていますが、コレ、本来はあんまりよくない。
JavaScript は CSSと同じで、HTML文書の本文中に大量に書くのは非推奨になってます。
JavaScript を外部ファイルにして、使用するページの<head>部分に<script>要素で読み込むのが正統派。
外部ファイルに「.js」と拡張子をつけて、
<head>
<script type="text/javascript" src="../js/○○○.js"></script>
</head>
といった具合で読み込みます。
<script>要素については「 [44] scriptでスクリプトを読み込む or HTMLに直接書く」をご覧ください。

次回予告

いかがでしたか?急に JavaScriptがでてきましたが、まずはコピペで使ってみてください。
JavaScript 無しだと、せっかくのボタンの用途が狭くなるので、必要なことをメモっておきました。
また、CSSを使えば、ブラウザのスタイルに依存すること無く、かなり自由にデザインできますね。

次回は、今回使った submit と同じ「送信ボタン」になる、
画像で送信ボタンを作れる <input type="image"> を使ってみましょう。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 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 29 30 31 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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