HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用66. input要素-1行テキスト、チェックボックス、ラジオボタン、送信、リセットの作成

      2018/02/22   hatano

input要素とは

form関連の要素で基本となるものです。type属性で種類を指定します。1行テキストボックス、チェックボックス、ラジオボタン、送信ボタン、リセットボタンの指定が可能です。終了タグはありません。初期値はdisplay: inline-block;です。

1行テキストボックス

1行のテキストが入力できるボックスを作成します。HTML5で追加されたものが多いのも特徴です。見た目の違いは一部を除きありません。複数行の入力はtextarea要素を使用します。入力された値の判定にはCSSやプログラムを利用します。判定を行わない場合は「type="text"」をメインに使用します。今回は基本形のものを紹介します。

  • text…テキストの入力
  • tel…電話番号の入力。HTML5から追加されました。
  • email…メールアドレスの入力。HTML5から追加されました。

1行テキストボックス

name属性

プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。

value属性

入力がない場合のデフォルト値の指定。省略可能です。

size属性

1行テキストボックスの幅の指定で値は文字数で指定します。フォントの種類やブラウザによって幅に違いがでます。CSSでwidthを指定することで幅を調整することもできます。省略可能です。

maxlength属性

入力できる最大文字数の指定です。指定文字数を超えたテキストはカットされます。省略可能です。

placeholder属性

入力欄に表示するテキストの指定で入力中は表示されません。省略可能です。HTML5で追加されました。
※IEでは表示されません。

特殊な1行テキストボックス

1行テキストボックスにコントロールボックスが追加されます。コントールボックスの見た目はブラウザに依存するため共通というわけではありません。またCSSでの見た目の変更はできません。

  • date…日付の入力。右にあるボタンをクリックするとカレンダーを表示します。HTML5で追加されました。
    ※2017年7月の段階でSafai, Firefox, IE11は対応していません。

    input dateの各ブラウザの対応状況
    Can I use -CSS3 Background-Date and time input types-

    フォーム日付
  • number…数値の入力。上下のボタンで数値を変更できます。HTML5で追加されました。
    ※2017年7月の段階でIE, Edgeは対応していません。 フォーム数値

name属性

プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。

value属性

入力がない場合のデフォルト値の指定。省略可能です。

チェックボックス・ラジオボタン

選択するボタンを作成します。ブラウザごとに見た目に違いがでます。

  • radio…ラジオボタン。選択肢から1つを選ぶボタンを表示します。
  • checkbox…チェックスボックス。複数選択ができるボタンを表示します。

name属性

プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。グループにする場合は同じ値で指定します。

value属性

送信する値を指定します。他のinput要素と違い必須です。

checked属性

初期で選択状態にする指定です。省略可能です。HTML5からは値も省略可能です。

HTML4.01XHTML1.0は値の省略は不可です。値はcheckedのみです。

ラジオボタン、チェックボックス

送信ボタン・リセットボタン

ボタンを表示します。value属性でボタンに表示するテキストを指定します。name属性は必須ではありません。

  • submit…入力した内容を送信する
  • reset…入力した内容を消去する

送信ボタン、リセットボタン

button要素-汎用ボタン

input type="submit"やinput type="reset"の代わりに利用できる要素です。input要素と違い終了タグがあるので画像やテキストを囲むことでボタンにできます。type属性で種類を変更できます。初期値はdisplay: inline-block;です。

  • submit…input type="submit"と同じ役割です。
  • reset…input type="reset"と同じ役割です。
  • button…入力フォームと連動しない汎用的なボタン。

button要素

まとめ

  • input要素はtype属性で種類を指定する
  • プログラムとの紐付けは、submit, reset以外はname属性が必須
  • radio, checkboxはvalue属性が必須
  • submit, resetはvalue属性でボタンのテキストを指定する
  • button要素は、submit, resetの代わりに使用できる

広告

 - HTML・CSS