cman.jpWEBページ作成
広告
<input type="button"> 「一般ボタン」
<input type="button">は、一般的にSUBMIT以外のボタンで使用されます。
たとえば、「住所検索」ボタンなど入力内容の送信より補助的なボタンとして使用されます。
<input type="button">をJavaScriptでSUBMITボタンの代替として使用することもできます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input type="button">の属性
【構文】
ページTOP
<input type="button" name="bt01" value="ボタン名" ・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| name="固有名" | 入力に付ける固有名 | "text1" | ||||||||
| value="値" | サーバに送信する値・ボタンの表示する文字【必須】 | "ボタン" | ||||||||
| disabled | 入力の無効化 | "disabled" | ||||||||
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" | ||||||||
| autofocus | フォーカス（カーソル）を設定 ※HTML5以降にグローバル属性に変更 | "autofocus" | ||||||||
| popovertarget | 関連付けするポップオーバー要素を指定 ※HTML5以降に追加 | "id名" ポップオーバー要素のidを指定 | ||||||||
| popovertargetaction="toggle","show","hide" | 関連付けしたポップオーバー要素の切り替え ※HTML5以降に追加 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<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>
<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">
<!--
.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">
スタイルシートを使用することで、色々な入力が可能となります。
<input type="button">を<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>
<!--
#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> を参照ください。
留意事項
- 特になし
広告