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

最終更新日:-0001年11月30日  (初回投稿日:2013年09月10日)

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

<input>要素との大きな違いは、終了タグ</button>があること。
<input>要素は空要素で、終了タグはありませんでしたよね。
このため<button>〜</button>の間に、テキストや<img><span>などのHTML要素も自由に入れる事ができます。で、それぞれに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の設定を上書き

ただし、<button>要素は IE7以下でバグがあるそうです。残念! (詳細は各サンプルで)

システムの人に「button 使わないで input にして」と言われた理由が、今さらですが分かった気がします。。。

これらのバグはIE8から改善されているそうです。

<input>のボタン部品は大昔からあるのですが、<button>要素は比較的新しいんです。HTML4くらいで登場したと思います。
なので、古めの IE は対応していないんでしょうね。我が道を行ってた時期ですから。

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

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

●サンプル1
まずは属性を何も使わない場合。
ボタンの内容がテキストなので、見た目は<input>要素で作ったボタンとあまり変わりませんね。

記入欄:

HTMLソースはこちら ↓

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

間に書いたテキスト「送信する」が、ボタンの表示になっているところが<input>との大きな違いです。(<input>要素では「 value属性の値」が表示になっていましたね)
<button>のtype属性のデフォルトは「submit」なので、このサンプルのように、type属性を指定しなければ送信ボタンになります。
記入欄に何か書いてボタンを押すと、ブラウザのアドレスバーで、送信されている事が確認できます。

*ただ、IE7以下ではデフォルトが「button」になってしまって何も起こりません。確認はIE8以上でしてください。
 IE7以下で<button>を送信ボタンとして使う場合は、キチンとtype="submit"と書く必要があります。

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

記入欄:

<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値が送信されます。

IE7以下ではデフォルトが「button」になってしまうので、キチンとtype="submit"と書く必要があります。
IE7以下では name & value値を指定しても value値が送信されないバグもあります。
IE6だとこの name & value値を2つのボタンの両方のぶんを送るので識別不可能
 IE7以下も対象にするサイトで「複数の送信ボタンを設置する」場合は、<button>でなく<input>を使うのが無難です。

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

記入欄:

HTMLのソース。このように<button>要素の中はHTML要素を自由に組む事ができます。

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

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

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

でもこれ、「枠」や「背景色」がデフォルトのままですね。
これは各ブラウザごとのスタイルなので、ブラウザによって見た目が違います。
どのブラウザでも同じボタンに見せるためには、<button>の「枠」や「背景色」のCSSを変更しなければなりません。これは、サンプル6 を参考にしてみてください。

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

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

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

記入欄:

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

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

記入欄:

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

●サンプル6
デフォルトの枠や背景色などは、ブラウザのスタイルに依存しているので、ブラウザによって見た目が違います。コレを消して、画像だけにしたいですよね。
<button>要素のデフォルトの枠を消すには、デフォルトのスタイルを上書きして、枠が表示されないようにします。
ついでに、ロールオーバー時のカーソルも、指先型に変化するように指定しましょう。

←これは画像です。
クリックでサンプルを開きます(別ウィンドウで開く)

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

button {
cursor:pointer;     /*←これでカーソルを指先型に変化させます*/
background:none;     /*これ以降はデフォルトの枠を消す指定です*/
border:0;
width: auto;
overflow:visible;
padding:0;
font-size:0;
line-height:0;
}

<button>をCSSで指定しよう

<button>要素のデフォルトではロールオーバー時に変化するスタイルは定められていません。
なので、サンプル6までのように画像やテキストを<button>〜</button>で囲んだだけだと、何も変化しないので、ボタンなのか分かりにくい。
というわけで、CSSを使って、ロールオーバー時に背景色が変化するようにしてみましょう。

●サンプル7
<button>要素にCSSを指定したサンプルです。

←これは画像です。
クリックでサンプルを開きます(別ウィンドウで開く)

HTMLのソース。

<form>
<p>記入欄:<input type="text" name="memo"></p>
<button class="smp4">送信</button>
</form>

CSSはこちら。画像を使わなくてもCSSでかなり見た目を変える事ができます。

button.smp4 {
	cursor:pointer;     /*←これでカーソルを指先型に変化させます*/
	font-size:130%;
	font-weight: bold;
	letter-spacing:0.5em;
	padding: 5px 1.5em 5px 2em;
	margin:0.3em 0;
	border-style:none;
	color: #fff;
	background:#69F;     /*←ロールアウト時の背景色*/
	-webkit-border-radius: 5px;     /*←ここから3行は角丸の指定*/
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 3px 1px #666;     /*←ここから3行はボックスシャドウ*/
	-webkit-box-shadow: 2px 2px 3px 1px #666;
	box-shadow: 2px 2px 3px 1px #666;
	text-shadow: 1px 1px 2px #000;      /*←これはテキストシャドウ*/
}
button.smp4:hover {     /*← :hover でロールオーバー時の指定*/
	background-color: #A3C3FF;     /*←ココでは背景色だけ変えてます*/
}

また、CSS3で背景をグラデーションにする事もできます。
上のCSSソースの background: の部分を下記のように書き換えてます。
←これは画像です。クリックでサンプルを別ウィンドウで開きます。

/* ↓ 「background」の部分のみ抜粋しています*/
background: -moz-linear-gradient(top, #2db6c1, #0f3a83 50%, #2db6c1);
background: -webkit-gradient(linear, left top, left bottom, from(#2db6c1), color-stop(0.5, #0f3a83), 
to(#2db6c1));
background: -o-linear-gradient(top, #2db6c1, #0f3a83 50%, #2db6c1);
background: linear-gradient(top, #2db6c1, #0f3a83 50%, #2db6c1);
/* ↓ ロールオーバー時は、透明度を変化させています。
もちろんグラデーションで指定してもOK(面倒くさいから opacity にしちゃった)*/ button.smp4gra:hover { opacity: 0.8; }

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

●サンプル8
画像をCSSで背景として仕込めば、ロールオーバーで画像が変化するようにできます。

 変化→ 

↑ これは画像です。
クリックでサンプルを開きます(別ウィンドウで開く)

<form>
<p>記入欄:<input type="text" name="memo"></p>
<button class="smp7">Submit</button>
</form>
button.smp7 {
	display:block;
	cursor:pointer;
	font-size:0;     /*←テキストを非表示に*/
	line-height:0;     /*←テキストを非表示に*/
	border-style:none;
	padding:0;
	background-image:url(../img/image1.jpg);     /*←背景画像1を指定します*/
	width:200px;
	height:40px;
}
button.smp7:hover {     /*←ロールオーバー時*/
	background-image:url(../img/image2.jpg);     /*←背景画像2を指定します*/
}

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

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

●サンプル9

クリックでサンプルを開きます(別ウィンドウで開く)

javaScript と HTML のソースはこちら。

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

★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に直接書く」をご覧ください。

<button>の属性一覧

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

type="部品の種類"
submit(送信ボタン)、reset(リセットボタン)、button(汎用ボタン)の3つ。
デフォルトは「submit」なので、typeを指定しなければ送信ボタンになります。

*ただ、IE7以下ではデフォルトが「button」になります。
IE7以下で<button>を送信ボタンとして使う場合は、キチンとtype="submit"と書く必要があります。

<button type="submit">送信する</button>
<button type="reset">リセット</button>
<button type="button">トップページへ</button>
name="部品の名前(任意のテキスト)"
value="初期値(任意のテキスト)"
name属性は、複数の送信ボタンを置いて、クリックされたボタンによってプログラムの処理を振り分ける必要がある時に、ボタンを識別するためにつけます。
nameの値とセットでvalue属性の値が送信されます。

IE7以下では name & value値を指定しても value値が送信されないバグもあります。
IE6だとこの name & value値を2つのボタンの両方のぶんを送るので識別不可能
 IE7以下も対象のサイトで送信ボタンを複数設置する場合は、<button>でなく<input>を使うのが無難

<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グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は、<select>要素を使ってセレクトメニューを作りましょう。
フォームでよく目にする、クリックすると選択肢が出てくるコレです。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

button の存在意義

いつも分かりやすい解説有難うございます。参考にいています。
button は input で置き換えられる様で、button の存在意義について悩んでいます。

上記の例から
・CSS を施したラベル付きのボタンを作れること
・画像とテキストを混在させたボタンを簡単に作れること
よく分かりました。

端的には「ボタンのデザインがしやすい」というのが利点なのでしょうか?

よろしくお願いします。

Re: button の存在意義

初心者T さん
記事の冒頭でも触れていますが、<button>要素は「終了タグがある」ことが最大の特徴です。

<input>要素は終了タグが無いので「テキストだけ」か「画像だけ」のボタンになります。

<button>要素なら、<button>〜</button>のなかに、テキストだけじゃなく他のHTML要素も入れることができるよね?
ですので、文法的に意味を持つ要素(strong とか ins や del など)もボタン内に使える。よりセマンティックに使えるということです。

単にデザインのしやすさだけなら、<input>要素のボタンでも同じかな。デザインはCSSでやるので。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.