開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

HTML:フォームの作成、徹底ガイド。サンプル集

最終更新:2017-08-18 by Joe

HTML5における、form(フォーム)要素と、関連するGUIとなるinput, select, button要素の使い方についてまとめます。

HTMLフォームとは?

HTMLフォームとは、ユーザがWEBページからデータを送信するためのGUI(グラフィカルユーザインターフェース)となるHTML要素です。form要素の中に、入力データに適したinput要素を内包します。

formの例

HTMLフォームの例

基本的なフォーム内の要素 -- input, select, button

Form内部で利用できるGUI要素は、HTMLにおいては、input要素、select要素、button要素などを利用して記述します。具体的には、下記のようなものがあります。

テキストフィールド

1行のテキストを入力します。placeholder属性に、未入力時に、代わりにうすく表示される一時テキストを挿入できます。

 

テキストエリア

複数行のテキストを入力します。入力可能なエリアの大きさを指定することができます。

ラジオボタン

複数の中から1つだけを選択するGUIです。

チェックボックス

複数の中から1つか、もしくは複数を選択するGUIです。何も選択しない事もできます。

プルダウン

複数の中から1つを選ぶGUIのです。特別な理由がない限り、ラジオボタンよりユーザビリティで劣ります。選択可能な要素群の一覧性が低く、また、選択するまでに少なくとも2回クリック(タップ)する必要が生じます。

逆に、選択可能な要素の数が多くなり、表示(レイアウト)上の問題があるのであれば、ラジオボタンでなく、こちらを選択するかもしれません。

送信ボタン

フォームの内容を送信します。これは、下記のボタンでも同じ働きを得られます。

ボタン

ボタンはほぼ上記の送信ボタンと同じ働きをします。ただし、<button>タグで囲みますので、他のHTMLを内包することもできます(実際そのようなことは稀です。)。

input要素のtype属性について

input要素のtype属性は、用途に応じて、適切に設定すると、おなじテキスト情報であっても、ユーザの入力歩補助するようなブラウザー実装を利用することができます。

テキスト系

  • text:テキスト
  • url:URLアドレス
  • email:メールアドレス
  • password:パスワード
  • search:検索ワード

時間、時刻系

  • time:時間
  • date:日付
  • week:週
  • month:月
  • datetime-local:日付と時刻

数字系

  • number:数字
  • color:色
  • tel:電話番号

その他

  • button
  • checkbox
  • radio
  • file
  • hidden
  • image
  • range
  • reset
  • submit
  • progress

フォームのサンプル集

いくつかのフォームのサンプルを紹介します。

[#1] 基本的なフォーム

最も基本的なinput要素を使ったフォームです。

See the Pen Basic Form (Basic) by Joe (@akajoe) on CodePen.0

[#2] fieldset, legendでマークアップ

HTML5で追加されたfieldset、legendを使ってマークアップします。フォーム要素に、セマンティックに説明を付与できます。同時に、ブラウザデフォルトのスタイルで、少しだけ見栄えが整えられるはずです。

See the Pen Basic Form (Fieldset) by Joe (@akajoe) on CodePen.0

フォームのデザインを、CSSで整える

最後にCSSでスタイルを指定し、デザインを整えた例です。フォームのレイアウトの調整にはいくつかのテクニックが必要です。最初は難しいかもしれません。

See the Pen Basic Form (Basic sample) by Joe (@akajoe) on CodePen.0