HTML

<button> <input> ボタン

詳細を開く 詳細を閉じる

HTMLコード

ボタンとは

  • <form>の中のボタンについて、解説します。
  • ボタンの「機能」には3種類あります。
    1. 送信ボタン
    2. リセットボタン(キャンセルボタン)
    3. 一般のボタン
  • また、ボタンの「見た目」には2種類あります。
    1. 文字ボタン
    2. 画像ボタン
  • これらのボタンを作るコントロールは2種類あります。
    1. <button>要素
    2. <input>要素type属性が「submit」、「reset」、「button」、「image」のもの。
  • ということで、3種類×2種類×2種類=12種類のボタンがあり得ますね。
  • その12種類をまとめたのが以下の表です。
機能 見た目 <button> <input>
送信 文字 submit submit
画像 submit image
リセット 文字 reset reset
画像 reset 不可
一般 文字 button button
画像 button 不可

<button><input>の違い

  • <input>要素では「画像」の「リセット/一般」のボタンが作れません。(上記表中で「不可」となっている部分。よって、実際にできるのは12種類ー2種類の10種類)
  • 終了タグの有無。
    • <button>要素には、終了タグがあります。そのため「送信」などボタン上の文字や、画像ファイルの指定は、開始タグと終了タグの間で行います。
    • <input>要素には、終了タグがありません。そのため「送信」などボタン上の文字や、画像ファイルの指定は、属性(valuesrc)で行います。
  • 以下に、10種類のボタンのサンプルを掲載しました。
  • なお、<button><input>の両要素はインライン要素です。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<input name="text">
	
	<fieldset>
		<legend>&lt;button&gt; 6種類</legend>
		
		<!-- button要素 : 文字のボタン -->
		<button type="submit">送信</button>
		<button type="reset">リセット</button>
		<button type="button">一般</button>
		<br><br>
		
		<!-- button要素 : 画像ボタン -->
		<button type="submit">
			<img src="../img/submit1.png" alt="送信">
		</button>
		<button type="reset">
			<img src="../img/reset1.png" alt="リセット">
		</button>
		<button type="button">
			<img src="../img/button1.png" alt="一般">
		</button>
		
	</fieldset>
	
	<fieldset>
		<legend>&lt;input&gt; 4種類</legend>
		
		<!-- input要素 : 文字のボタン -->
		<input type="submit" value="送信">
		<input type="reset" value="リセット">
		<input type="button" value="一般">
		<br><br>

		<!-- input要素 : 画像ボタン -->
		<input type="image" src="../img/submit2.png" alt="送信">
		
	</fieldset>
</form>

送信ボタン : submit

  • クリックすると、(テキストボックスなどの)他の入力用のコントロールに入力されたデータを、サーバに送ります。
  • <button>要素
    • button 1 : type属性に「submit」を設定すると送信ボタンになります。ボタン上に表示される文字列は、開始タグと終了タグで挟みます。
    • button 2 : type属性のデフォルトは「submit」なので、何も指定しなくても送信ボタンになります。
  • <input>要素
    • input 1 : type属性に「submit」を設定すると送信ボタンになります。ボタン上に表示される文字列はvalue属性で指定します。
    • value属性を指定しない場合、自動的に「送信」という文字が表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<input name="text" placeholder="送信ボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	
	<button type="submit">button 1</button>

	<button>button 2</button>
	
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	
	<input type="submit" value="input 1">
	
	<input type="submit">
	
</fieldset>
	 
</form>

リセットボタン : reset

  • クリックすると、(テキストボックスなどの)他の入力用のコントロールに入力された内容が消され、初期化されます。
  • <button>要素
    • button 1 : type属性に「reset」を設定するとリセットボタンになります。ボタン上に表示される文字列は、開始タグと終了タグで挟みます。
  • <input>要素
    • input 1 : type属性に「reset」を設定するとリセットボタンになります。ボタン上に表示される文字列はvalue属性で指定します。
    • value属性を指定しない場合、自動的に「リセット」という文字が表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<input name="text" placeholder="リセットボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	
	<button type="reset">button 1</button>
	
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	
	<input type="reset" value="input 1">
	
	<input type="reset">
	
</fieldset>
	 
</form>

一般のボタン : button

  • 通常、JavaScriptなどと組み合わせて使います。しかし、JavaScriptの開始に必要な訳ではないので、最近ではあまり使われません。
  • 以下のサンプルではJavaScriptを使って、ダイアログボックスを表示しています。
  • <button>要素
    • button 1 : type属性に「button」を設定すると一般のボタンになります。ボタン上に表示される文字列は、開始タグと終了タグで挟みます。
  • <input>要素
    • input 1 : type属性に「button」を設定すると一般のボタンになります。ボタン上に表示される文字列はvalue属性で指定します。
    • value属性を指定しない場合、ボタン上には何の文字も表示されません。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<input name="text" placeholder="一般のボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	
	<button type="button" onClick="alert('button 1');">button 1</button>
	
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	
	<input type="button" onClick="alert('input 1');" value="input 1">
	
	<input type="button" onClick="alert('input 2');">
	
</fieldset>
	 
</form>

画像ボタン : image

見た目 機能 <button> <input>
画像
ボタン
送信 submit
image
リセット reset
不可
一般 button
  • <button>要素
    • 開始タグと終了タグの間に<img>要素を追加します。
    • 画像ファイルは、「境界の無い透過PNG」ファイル等が良いでしょう。
  • <input>要素
    • type属性は「image」に設定します。ボタンは「送信」ボタンとなります。
    • <input>要素では、「リセットボタン」「一般のボタン」の画像ボタンを作ることはできません。
    • 画像ファイルはsrc属性で指定します。
    • 画像ファイルは「境界を持つ」ファイルが良いでしょう。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<input name="text" placeholder="画像ボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	<button type="submit">
		<img src="../img/submit1.png" alt="送信">
	</button>
	<button type="reset">
		<img src="../img/reset1.png" alt="リセット">
	</button>
	<button type="button" onClick="alert('一般');">
		<img src="../img/button1.png" alt="一般">
	</button>
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	<input type="image" src="../img/submit2.png" alt="送信">
</fieldset>
	 
</form>
  • <button>要素に「境界あり」の画像を使うと、境界が2重にあるようになります。
  • <input>要素に「境界なし」の画像を使うと、境界が無くなります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<input name="text" placeholder="画像ボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	<button type="submit">
		<img src="../img/submit2.png" alt="送信">
	</button>
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	<input type="image" src="../img/submit1.png" alt="送信">
</fieldset>
	 
</form>
  • なお、画像ファイルのリンク切れに備えて、alt属性は指定しましょう。
  • 以下の例では、画像ファイルをリンク切れにするため、src属性を空白にしています。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<input name="text" placeholder="画像ボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	<button type="submit">
		<img src="" alt="送信">
	</button>
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	<input type="image" src="" alt="送信">
</fieldset>
	 
</form>
  • 以下は、alt属性を指定していない例です。
  • <input type="image">要素の場合、alt属性を指定を指定しなくても、自動的に「送信」という文字が表示されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<input name="text" placeholder="画像ボタン"><br><br>
	
<fieldset>
	<legend>&lt;button&gt;</legend>
	<button type="submit">
		<img src="">
	</button>
</fieldset>
	
<fieldset>
	<legend>&lt;input&gt;</legend>
	<input type="image" src="">
</fieldset>
	 
</form>

CSSコード

元のHTMLファイル

  • <button>/<input>要素のclass属性にCSSを設定しています。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<input name="text">
	
	<fieldset>
		<legend>&lt;button&gt; 6種類</legend>
		
		<!-- button要素 : 文字のボタン -->
		<button class="btn" type="submit">送信</button>
		<button class="btn" type="reset">リセット</button>
		<button class="btn" type="button">一般</button>
		<br><br>
		
		<!-- button要素 : 画像ボタン -->
		<button class="btn" type="submit">
			<img src="../img/submit1.png" alt="送信">
		</button>
		<button class="btn" type="reset">
			<img src="../img/reset1.png" alt="リセット">
		</button>
		<button class="btn" type="button">
			<img src="../img/button1.png" alt="一般">
		</button>
		
	</fieldset>
	
	<fieldset>
		<legend>&lt;input&gt; 4種類</legend>
		
		<!-- input要素 : 文字のボタン -->
		<input class="btn" type="submit" value="送信">
		<input class="btn" type="reset" value="リセット">
		<input class="btn" type="button" value="一般">
		<br><br>

		<!-- input要素 : 画像ボタン -->
		<input class="btn" type="image" src="../img/submit2.png" alt="送信">
		
	</fieldset>
</form>

ボタンの色を変更 : color/background


別ウィンドウで表示
/* CSSファイル */
.btn {
	color:			brown;
	background:		khaki;
}

ボタンの色を変更(フォーカス時) : color/background

  • フォーカス時に色を変えます。

別ウィンドウで表示
/* CSSファイル */
.btn:hover {
	color:			brown;
	background:		khaki;
}

ボタンの枠線を変更 : border


別ウィンドウで表示
/* CSSファイル */
.btn {
	border:	2px solid blue;
}

ボタンの枠線を変更(丸く派手に)


別ウィンドウで表示
/* CSSファイル */
.btn {
	border-radius:	10px;
	box-shadow:		-2px  2px 5px green,
					 2px  2px 5px yellow,
					 2px -2px 5px red,
					-2px -2px 5px blue;
}

ボタン上のフォント変更


別ウィンドウで表示
/* CSSファイル */
.btn {
	font-size:      large;
	font-weight:    bold;
}

ボタンの大きさ変更 その1 : padding


別ウィンドウで表示
/* CSSファイル */
.btn {
	padding:	10px;
}

ボタンの大きさ変更 その2 : height/width

画像ボタンの場合、

  • <button> : 比率は変更されずに、長さが足りないとはみ出る。
  • <input> : 比率が変更される。

別ウィンドウで表示
/* CSSファイル */
.btn {
	width:		100px;
	height:		30px;
}

フォーカスしたときに、カーソルをポインタに変更 : cursor

  • ちなみに<input type="image">要素のみ、なにも設定しなくてもフォーカス時にカーソルがポインタになります。

別ウィンドウで表示
/* CSSファイル */
.btn:hover {
	cursor:	pointer;
}
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ