テキストボックスはテキストを入力する一般的なフォームです。文字を表示させないパスワード入力用や特定の文字だけを入力させるフォームなども用意されています。

フォームにreadonlyやdisabledという属性を付与すると入力できない状態になります。readonlyは書き換えはできませんがデータは送信されます。disabledはフォームそのものが無効になりデータも送信されません。

入力させたい内容に関する情報をフォームの中に表示したり、エラーがあった場合などに視覚的に分かるようにできます。

ラジオボタンやチェックボックスは一つ以上の選択肢から項目を選ぶフォームです。ラジオボタンは択一、チェックボックスは複数選択のときに使います。トグルスイッチのようなデザインにすることも可能です。

プルダウンも選択肢の中から一つ以上の項目を選択するフォームです。セレクトボックスなどと呼ぶこともあります。選択肢が多いときはプルダウンを使う方が画面がすっきりします。

レーティングはAmazonレビューの星みたいにアイコンを使って評価をつけるときなどに使います。

スライダーはつまみをスライドさせて数値を設定したり範囲を指定したりできる機能です。どういうときに使うのが良いかは……よく分かりません（汗）

ツールチップやポップオーバーはマウスカーソルを乗せたときに表示されるメッセージです。カーソルのないスマートフォンやタブレットでは若干使いにくい面もあります。

トーストは画面の上部などに現れる通知メッセージです。特定のタイミングでメッセージを表示したい場合などに使います。一定時間後に自動で消したりもできます。

モーダルは画面の最前面に出てくる小さなウインドウです。そのウインドウを閉じるまで他の箇所を操作することができなくなるため、ユーザーに特定の操作を強制させる場合などに使います。

テーブルはExcelの表のようなレイアウトです。最近のHTMLはtableの代わりにgridという機能を使ってテーブルレイアウトを作成することも多いです。

アコーディオンはクリックでパネルを垂直方向に開く機能です。Q&Aのような情報が多いページなどに利用することでページのスクロールを減らすことができます。

タブは複数の項目を切り替えて表示する機能です。アコーディオン同様に情報の多いページでスクロールを減らすなどの効果があります。

ここでは予定の作成や編集ができない設定にしていますが、Googleカレンダーのような動きを実装することも可能です。

フォントアイコンは画像ではなくテキストデータのアイコンです。テキストと同じように扱えるので簡単に大きさや色を変えたりできるのが特徴です。種類も豊富です。

JavaScriptで作成したグラフです。他にも折れ線グラフやレーダーチャートなどいろいろなグラフを作ることができます。

複数選択セレクトボックスの選択と未選択の両方の項目を一目で分かるようにしたフォームです。

ドラッグ&ドロップでHTMLの要素を入れ替えることができます。配置換えや並び替えを簡単に行えるのが特徴です。