input type="button"タグ
input（type="button"）タグは、汎用ボタンを作成するタグです。
解説
input type="button"タグを使用すると、押しても何も起きないボタンが作成されます。
ボタンに機能を付けたい場合は、onclickイベントハンドラー等で実装してください。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ |
| コンテキスト (親カテゴリ) | フレージング・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | なし |
属性
input（type="button"）タグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| name | 名前を指定する（submit時にこの名前で送信される） （例）name="btn01" |
| value | ボタンの表示名を指定する （例）value="ボタンです" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
| イベント | 説明 |
|---|---|
| onclick | クリック時に呼ぶ関数を指定する （例）onclick="alert('Hello!');" |
| ondblclick | ダブルクリック時に呼ぶ関数を指定する （例）ondblclick="alert('HelloHello!');" |
サンプル
ボタンを作る
<input type="button" name="btn01" value=" ボタン ">
押しても何も起こりません。
ボタンを押すとアラートを表示する
<input type="button" name="btn01" value=" ボタン " onclick="alert('押しましたね？');">
ボタンを押すとJavaScript関数「hoge」に引数2と3を引き渡して呼び出す
<input type="button" name="btn01" value="ボタン" onclick="hoge(2,3);">
備考
- ボタンを作成するには、buttonタグもあります。
buttonタグの方がボタンの見た目に画像やタグを使えるなど多機能です。
関連項目
- form：送信フォームを作成する
- input type="text"：テキスト入力欄を作成する
- input type="checkbox"：チェックボックス欄を作成する
- input type="date"：日付入力欄を作成する
- input type="time"：時刻入力欄を作成する
- input type="month"：月の入力欄を作成する
- input type="week"：週の入力欄を作成する
- input type="radio"：ラジオボタンを作成する
- input type="password"：パスワード入力欄を作成する
- input type="hidden"：隠しパラメータを作成する
- input type="file"：ファイル送信コントロールを作成する
- input type="button"：汎用ボタンを作成する
- input type="image"：画像ボタンを作成する
- input type="number"：数値入力欄を作成する
- input type="submit"：送信ボタンを作成する
- input type="reset"：リセットボタンを作成する
- input type="color"：色の入力欄を作成する
- input type="email"：e-mailの入力欄を作成する
- input type="url"：URLの入力欄を作成する
- input type="tel"：電話番号の入力欄を作成する
- input type="range"：スライダー入力欄を作成する
