[50] button要素で送信・リセット・汎用ボタンを自由に作ろう

<button>要素は、フォームの ボタン専用の要素 です。

<input>要素のボタンとの大きな違いは、終了タグ</button>があること。
<input>要素は空要素で、終了タグはありませんでしたよね。
このため<button>〜</button>の間に、テキストや<img><span>などのインラインの要素を自由に入れる事ができます。で、それぞれにCSSを指定できるので、デザイン的にも自由度アップ。

<input>要素と同じで、「type属性」でボタンの機能を指定します。
type=submit（送信）、reset（リセット）、button（汎用ボタン）の3つとも揃っています。

使用する要素	<button> 〜 </button>

buttonの属性 （一覧はこちら）	type	：ボタンの機能を指定。デフォルトは"submit"
	name	：<button>に固有の名前をつける
	value	：初期値。nameの値と一緒に送信される
	disabled	：使用不可の状態にする
	form	：親の<form>のID名を呼び出して関連づける
	autofocus	：ロード後、自動的にフォーカスする
	formmethod	：<form>要素のmethodの設定を上書き
	formaction	：<form>要素でのactionの設定を上書き
	formtarget	：<form>要素でのtargetの設定を上書き
	formnovalidate	：<form>で無指定でもバリデートをオフにする
	foamenctype	：<form>要素でのenctypeの設定を上書き

本日のINDEX

1. <button>要素で「テキスト」のボタンを作ろう
   1. 属性を何も使わない基本形
   2. 「送信ボタン」を複数置くなら name属性と value属性が必要
   3. テキストの一部を<span>要素で囲みCSSを指定
2. <button>で「画像」を使ったボタンを作ろう
   1. <img>要素だけを置いてみる
   2. <img>要素とテキストを置いてみる
   3. デフォルトスタイルの枠をCSSで消す
3. <button>の見た目をCSSで指定しよう
   1. マウスオーバー時の変化を追加
   2. 画像を img要素でなく CSSで背景に仕込む
4. javaScriptでキャンセルも（confirm()メソッド）
5. <button>要素の属性一覧

<button>要素で「テキスト」のボタンを作ろう

まずは<button>〜</button>の中に、テキストを入れてみましょう。

属性を何も使わない基本形

ボタンの内容がテキストなので、見た目は<input>要素で作ったボタンとあまり変わりませんね。

記入欄：

送信する

HTMLはこちら。

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <button>送信する</button>
</form>

<button>〜</button>の間に書いたテキスト「送信する」が、ボタンの表示になっているところが<input>との大きな違いです。（<input>要素では「 value属性の値」が表示になっていましたね）
<button>のtype属性のデフォルトは「submit」なので、このサンプルのように、type属性を指定しなければ「送信ボタン」になります。
<button> も <button type="submit"> も同じ「送信ボタン」になるってこと。

「リセットボタン」にしたければ、type属性で <button type="reset">と指定します。
「汎用ボタン」なら、<button type="button"> とします。

「送信ボタン」を複数置くなら name属性と value属性が必要

「送信ボタン」を複数置く場合は、name属性とvalue属性を書きます。

記入欄：

新規登録 登録変更

HTMLはこちら。

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <button name="submit1" value="new">新規登録</button>
  <button name="submit2" value="change">登録変更</button>
</form>

サンプルでは type属性を省略しているので、これは submit（送信ボタン）。
プログラムが2つのボタンを識別するために、nameとvalue属性が必要です。押されたボタンの nameとvalue値がセットで送信されます。

テキストの一部を<span>要素で囲みCSSを指定

テキストの一部を <span>要素で囲み、<span>要素に CSSを指定したサンプルです。

記入欄：

この内容で送信します

HTMLはこちら。
このように<button>要素の中は他のインラインのHTML要素を入れられます。

<form class="sample">
  <p>記入欄：<input type="text" name="memo"></p>
  <button>この内容で<span>送信</span>します</button>
</form>

CSSはこちら。<span>にスタイルを指定しています。

.sample span {
    font-size:140%;
    color:#f69;
    font-weight:bold;
    padding-left:0.5em;
    letter-spacing:0.5em;
}

<button>で「画像」を使ったボタンを作ろう

次に<button>〜</button>の中に、<img>要素を入れてみましょう。

<img>要素だけを置いてみる

単純に<img>要素だけを置いてみましょう。
<button>のデフォルトスタイルの「枠」などが残り、そこに画像が表示されます。

記入欄：

HTMLはこちら。

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <button><img src="../image/sample.jpg"  alt="送信する" width="200" height="40"></button>
</form>

iOS Safari では、<button>要素のボタンは、下のように見えてしまいます。

デフォルトスタイルの角丸とグラデーションがしつこく残るんだよね。
<img>要素で指定した width・height属性も無視されるし。

コレを解消するには、<button>要素に CSSで「-webkit-appearance: none」と指定します。下は iOS Safari でも、まともに表示されてるはず。

記入欄：

CSSはこちら。

button {
	-webkit-appearance: none;
	}

<input>要素で作るボタンでも同じ指定をしましたね。
→ [49-10-2] input要素で作るボタンの見た目を CSSで変えよう

<img>要素とテキストを置いてみる

次は、<img>要素とテキストを一緒に入れてみましょう。
デフォルトの「枠」のなかに、それぞれが表示されます。

記入欄：

内容をご確認の上、送信してください

HTMLはこちら。

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <button><img src="../image/sample.jpg"  alt="送信する" width="200" height="40"><br>
  <b>内容をご確認の上、送信してください</b></button>
</form>

<style>
button {
	-webkit-appearance: none;
	}
</style>

デフォルトスタイルの枠をCSSで消す

デフォルトの枠や背景色などは、CSSを上書きします。
ついでに、PCブラウザでのマウスオーバー時のカーソルも、指先型に変化するように指定しましょう。

CSSはこちら。<button>のスタイルを初期化しています。

button {
    cursor:pointer; /*←PCブラウザ用にカーソルを指先型に変化させます*/
    border: none;   /*デフォルトの枠を消します*/
}

この場合「-webkit-appearance: none」が無くても「border: none」だけで iOS Safari でちゃんと表示されるようです。（が、念のため 書いといたほうがいいかも）

<button>の見た目をCSSで指定しよう

<input>要素のボタンと同じく <button>要素も CSSでスタイルを編集してみましょう。

マウスオーバー時の変化を追加

<button>要素のデフォルトスタイルでは、マウスオーバー時の変化は定められていないので、CSSを使って追加してみましょう。
下は テキストだけのボタンです。

送信

HTMLはこちら。

<button class="sampleBtn2">送信</button>

CSSはこちら。

.sampleBtn2 {
	cursor:pointer;/*カーソルをポインターに（PCブラウザ用）*/
	-webkit-appearance:none;/*iOS Safariのデフォルトスタイルをクリア*/
	border:none;/*デフォルトのボーダーをクリア*/
	font-size:130%;
	font-weight:bold;
	color: #fff;
	margin:1em 0;
	letter-spacing:0.5em;
	padding:.4em 0 .4em .5em;
	width:150px;
	background:#69f;/*背景色を指定*/
	-webkit-border-radius: 5px;/*iOS Safari用のボックスの角丸の指定*/
	border-radius: 5px;/*ボックスの角丸の指定*/
	-webkit-box-shadow: 0 2px 2px 0 #666;/*iOS Safari用ボックスシャドウ*/
	box-shadow: 0 1px 1px 0 #666;/*ボックスシャドウ*/
	text-shadow: 1px 1px 2px #000; /*テキストシャドウ*/
}
/*↓マウスオーバー時の変化。ここでは背景色だけ変更*/
.sampleBtn2:hover {
	background-color: #3e6dcc;
}

また、CSS3で背景をグラデーションにする事もできます。
CSSの background: の部分を書き換えるだけ。

送信

CSSはこちら。HTMLは上のサンプルと同じです。

.sampleBtn3 {
	cursor:pointer;/*カーソルをポインターに（PCブラウザ用）*/
	-webkit-appearance:none;/*iOS Safariのデフォルトスタイルをクリア*/
	border:none;/*デフォルトのボーダーをクリア*/
	font-size:130%;
	font-weight:bold;
	color: #fff;
	margin:1em 0;
	letter-spacing:0.5em;
	padding:.4em 0 .4em .5em;
	width:150px;
	-webkit-border-radius: 5px;/*iOS Safari用のボックスの角丸の指定*/
	border-radius: 5px;/*ボックスの角丸の指定*/
	-webkit-box-shadow: 0 2px 2px 0 #666;/*iOS Safari用ボックスシャドウ*/
	box-shadow: 0 1px 1px 0 #666;/*ボックスシャドウ*/
	text-shadow: 1px 1px 2px #000; /*テキストシャドウ*/
/*ここまで↑はさっきと同じ。↓背景だけグラデーションにしています*/
	background:#0f3a83;/*背景色を指定（オールドブラウザ用）*/
	background: -webkit-linear-gradient(top #2db6c1, #0f3a83 50%, #2db6c1) #0f3a83;/*古めのグラデ指定*/
	background: linear-gradient(#2db6c1, #428000 50%, #2db6c1) #0f3a83;/*モダンブラウザ用*/
}
/*↓マウスオーバー時の変化。ここでは透明度だけ変更*/
.sampleBtn3:hover {
	opacity: 0.8;
}

CSSについて、詳細は下記をご覧ください。
●グラデーション 「 [13-3] サイトの背景にCSS3でグラデーションをつけてみよう」
●角丸ボックスは 「 [18-1] CSS3で、ボックス要素を角丸にしよう（border-radius）」
●ボックスシャドウ 「 [18-2] CSS3で、ボックス要素にシャドウをつけよう（box-shadow）」
●テキストシャドウ 「 [18-3] CSS3で、テキストにシャドウをつけよう（text-shadow）」

画像を img要素でなく CSSで背景に仕込む

画像をCSSで背景として仕込んだサンプルです。

Submit

CSSはこちら。HTMLは上のサンプルと同じです。

.sampleBtn4 {
	cursor:pointer;/*カーソルをポインターに（PCブラウザ用）*/
	-webkit-appearance:none;/*iOS Safariのデフォルトスタイルをクリア*/
	border:none;/*デフォルトのボーダーをクリア*/
	font-size:0;/*テキストを非表示に*/
	margin:1em 0;
	background-image:url(image/image1.jpg);/*背景画像1を指定*/
	width:200px;
	height:40px;
}
/*↓マウスオーバー時の変化。*/
.sampleBtn4:hover {
	background-image:url(image/image2.jpg);/*背景画像2を指定*/
}

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

JavaScript の confirm()メソッドを使ってユーザに「OK」か「キャンセル」か確認できます。これは <input>要素のボタンで指定したものと同じです。

汎用ボタン（3つ目の goto TOP）は「OK」すると、ホントに当サイトのトップページに飛ぶので、戻るボタンかなんかで戻ってきてね。

記入欄：

Submit Reset goto TOP

javaScript と HTML はこちら。

<script> 
function checkSubmit(){    // ←送信ボタン用
  if(window.confirm('送信しますか？')){ 
    return true; 
  }
  else{window.alert('キャンセルします'); //アラート不要なら window.alert('キャンセルします'); を削除 
    return false; 
  }
}
function checkReset(){     // ←リセットボタン用
  if(window.confirm('入力していただいた内容が全て削除されます。\n本当にリセットしますか？')){ 
    return true; 
  }
  else{window.alert('キャンセルします。\n引き続き入力内容を編集していただけます'); 
    return false; 
  }
}
function checkButton(){     //←汎用ボタン用
  if(window.confirm('トップページに戻ります')){ 
    location.href='http://honttoni.blog74.fc2.com/';
  }
  else{window.alert('キャンセルしました'); 
    return false; 
  }
}
</script>
<!-- ↓ form要素に、送信用・リセット用の動作を指定 -->
<form action="#btnjs" onSubmit="return checkSubmit()" onReset="return checkReset()" class="sampleBtn5">
  <p>記入欄：<input type="text" name="memo"></p>
  <button type="Submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" onClick="checkButton()">goto TOP</button>
  <!-- ↑ 汎用ボタン用は、該当するbutton要素に動作を指定 -->
</form>

CSSはこちら。

.sampleBtn5 { margin:1em 0; padding:1em; border:solid 1px #ccc}
.sampleBtn5 p { margin:.5em 0}
.sampleBtn5 button {
	cursor:pointer;/*カーソルをポインターに（PCブラウザ用）*/
	-webkit-appearance:none;/*iOS Safariのデフォルトスタイルをクリア*/
	border:none;/*デフォルトのボーダーをクリア*/
	font-size:130%;
	font-weight:bold;
	color: #fff;
	margin:.5em .5em .5em 0;
	padding:.5em 0;
	width:150px;
	background:#f6a4a7;/*背景色を指定*/
	-webkit-border-radius: 5px;/*iOS Safari用のボックスの角丸の指定*/
	border-radius: 5px;/*ボックスの角丸の指定*/
	-webkit-box-shadow: 0 2px 2px 0 #666;/*iOS Safari用ボックスシャドウ*/
	box-shadow: 0 1px 1px 0 #666;/*ボックスシャドウ*/
	text-shadow: 1px 1px 2px #000; /*テキストシャドウ*/
}
/*↓マウスオーバー時の変化。ここでは背景色だけ変更*/
.sampleBtn5 button:hover {
	background-color: #ce6e6a;
}

<button>要素の属性一覧

<button>要素で使える属性は、<input>要素のボタンと同じです。

type="部品の種類"

submit（送信ボタン）、reset（リセットボタン）、button（汎用ボタン）の3つ。
デフォルトは「submit」なので、typeを指定しなければ送信ボタンになります。
<input>要素の type属性と同じです。

<button type="submit">送信する</button>
<button type="reset">リセット</button>
<button type="button">トップページへ</button>

name="部品の名前（任意のテキスト）"
value="初期値（任意のテキスト）"

name属性は、複数の送信ボタンを置いて、クリックされたボタンによってプログラムの処理を振り分ける必要がある時に、ボタンを識別するためにつけます。
nameの値とセットでvalue属性の値が送信されます。

<button type="submit" name="submit" value="new">新規登録</button>
<button type="submit" name="submit" value="change">登録変更</button>
<!--この例では「submit = new」か「submit = change」で送信されます-->

disabled（または「disabled=""」「disabled="disabled"」 ）　

「使用不可」になります。クリックできない状態です。

<button type="submit" value="送信" disabled>

●これ以降は、HTML5からの新しい属性です。

autofocus（または「autofocus=""」「autofocus="autofocus"」 ）　 new

HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
● autofocus属性は、1つのHTML文書に1つだけ。（そりゃそうだ！）

<button type="submit" autofocus>送信する</button>

form="<form>要素のID"　 new

form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<button>要素が<form>要素の外に出ていても機能します。

<form method="post" action="sample.cgi" id="ex1">
<p>お名前：<input type="text" name="name"></p>
</form>
<button type="submit" form="ex1">送信する</button>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

formmethod="post または get（HTTPメソッド）"　 new
formaction="URL"　 new
formtarget ="_blank"（または _self　_parent　_top　ウィンドウ(フレーム)名）　 new
formnovalidate（または「novalidate=""」「novalidate="novalidate"」 ）　 new
foamenctype="送信時のデータ形式（MIMEタイプ）"　 new

これらはすべて<form>要素での設定を上書きします。
● type属性の値が「submit」のときだけ使えます。送信ボタンにだけ使えるってこと。

<form method="post" action="ex1.cgi" target="_top">
<button type="submit" formmethod="get" formaction="ex2.cgi" formtarget="_self" 
formnovalidate>送信する</button>
</form>

<!-- enctype属性は、method="post" のときだけ使えます-->
<form method="post" action="ex3.cgi" enctype="multipart/form-data">
<button type="submit" value="送信する" formenctype="application/x-www-form-urlencoded">
送信する</button>
</form>

このほかグローバル属性も使います

当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

ここまで <input>要素や <button>要素によるボタンを見てきましたが、
・「送信ボタン」になるものはどれとどれ？　
・どれが画像を使えるんだっけ？　
などを、次回は一旦整理してみます