備忘録的プログラミングリファレンス

<input type="button">

 <input type="button">は、以下の表示例のような汎用のボタン作成する HTML タグエレメントです。FORMの部品として利用します。
 ユーザーインターフェイスのボタン部品としての使用もできます。

<input type="buttom">
<input type="button" name="example_buttom" value="example" onclick="alert('example ボタンがクリックされました')" />
表示例

 value 属性でボタンの名称が付きますので、ほとんどの場合は <label> エレメントは使いません。

 汎用のボタンとしては <button> エレメントもあります。 <button> エレメントはデフォルトでsubmitボタンとして機能します。
 <form> 内で <button> がクリックされると送信が実行されます。 送信させないためには <button type="button" > とします。

 装飾を前提としないシンプルなボタンはこちらの <input type="button"> を使うとよいかもしれません。

- ad -

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
classcssに使います。同名のclassは同じスタイルが適応されます。
type 扱うデータタイプまたはinputタグの形状
value buttonボタン名として表示。値を指定しない場合はブラウザによる名称。

ブラウザでの見え方

 無効化するには disabledグローバル属性 を指定します。

関連typeについて

  • button... 汎用ボタン。scriptに利用する
  • checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
  • color... カラーピッカー。色選択に使用します。
  • date... 日付け
  • datetime-local... 日付けと時刻(ローカルタイムゾーン)
  • email... emailアドレス
  • file... ファイルのアップロード
  • hidden... 画面に表示しないがサーバーに送信するデータ
  • image... 任意の画像を利用したカスタム用ボタン
  • month... 年度と月度
  • number... 数値
  • password... パスワード入力
  • radio... 選択肢が必要な場合
  • range... 調整バーによる数値入力
  • reset... リセットボタン。入力データをクリア
  • search... 検索用
  • submit... 送信ボタン
  • tel... 電話番号
  • text... テキスト入力。改行を含む場合は<textarea>を
  • time... 時刻
  • url... URL
  • week... 年度の第何週目か

- ad -