WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <input type="button"> 「一般ボタン」

<input type="button"> 「一般ボタン」

<input type="button">は、一般的にSUBMIT以外のボタンで使用されます。
たとえば、「住所検索」ボタンなど入力内容の送信より補助的なボタンとして使用されます。
<input type="button">をJavaScriptでSUBMITボタンの代替として使用することもできます。

HTML規格HTML4.01HTML5
使用可否
広告

<input type="button">の属性

【構文】
<input type="button" name="bt01" value="ボタン名" ・・・>
属性意味値のサンプルなど
name="固有名"入力に付ける固有名"text1"
value="値"サーバに送信する値・ボタンの表示する文字【必須】"ボタン"
disabled入力の無効化"disabled"
form="フォーム名"送信するフォームの関連付け
※HTML5で追加
"form01"
autofocusフォーカス(カーソル)を設定
※HTML5で追加
"autofocus"
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<input type="button">のサンプル

<input type="button" name="bt01" value="一般ボタン">

入力の無効化【disabled

<input type="button" name="bt01" value="一般ボタン" disabled>

フォーカスの初期設定【autofocus

<input type="button" name="bt01" value="一般ボタン" autofocus>
ページTOP

<input type="button">のスタイルシートサンプル

<style type="text/css">
<!--
.chk1 {border: 3px outset #0000cc;background-color:#99ffff;}
.chk2 {border: 3px outset #cc0000;background-color:#ffffcc;}
-->
</style>

<input type="button" name="bt01" value="実行1" class="chk1" id="chkid1">
<input type="button" name="bt02" value="実行2" class="chk2" id="chkid2">

スタイルシートを使用することで、色々な入力が可能となります。
ページTOP

<input type="button">を<a>「リンク」で代替

ボタンの代わりに<A>「リンク」を使用するケースが多くなっています。
<style type="text/css">
<!--
#bt1 {
background-image : url(../../../image/a_sample1a.gif);
background-position: top left;
background-repeat: repeat-x;
text-align:center;
width:120px;
}
#bt1 a {
display: block;
padding: 7px;
font-size: 11px;
font-weight: bold;
overflow: hidden;
}
#bt1 a:link {
color: #333;
text-decoration: none;
}
#bt1 a:visited {
color: #333;
text-decoration: none;
}
#bt1 a:hover {
color: #fff;
text-decoration: none;
background-image : url(../../../image/a_sample1b.gif);
background-position: top left;
background-repeat: repeat-x;
}
#bt1 a:active {
color: #fff;
text-decoration: none;
background-image : url(../../../image/a_sample1b.gif);
background-position: top left;
background-repeat: repeat-x;
}
-->
</style>

<div id="bt1"><a href="../../sample/link/">リンクボタン</a></div>

詳細は <A> を参照ください。
ページTOP

留意事項

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン