Webパーツ辞典

入力・フォーム

ユーザーに値を入れてもらう部品。入力欄・プルダウン・チェックボックス・トグルスイッチなど。

  • テキストフィールドText field

    一行の文字を入れてもらう枠。名前やメールアドレスなど、短い値の入力に使う。

    • 基本
    • 入力

  • テキストエリアTextarea

    改行を含む長い文章を入れてもらう枠。問い合わせ本文や備考に使う。

    • 入力

  • セレクトボックスSelect

    押すと選択肢が下に開く入力欄。都道府県のように、選択肢が決まっていて数が多いときに使う。

    • 入力
    • 選択

  • チェックボックスCheckbox

    四角い枠を押して入と切を切り替える入力。当てはまるものを何個でも選べる。

    • 入力
    • 選択

  • ラジオボタンRadio button

    丸い印を押して1つだけ選ぶ入力。古いカーラジオの選局ボタン（1つ押すと他が戻る）が由来。

    • 入力
    • 選択

  • トグルスイッチSwitch

    つまみを左右に動かして入と切を切り替える部品。押した瞬間に設定が反映される場面で使う。

    • 入力
    • 状態

  • スライダーSlider

    つまみを左右に動かして数値を決める入力。正確な値より、だいたいの位置を決めたいときに向く。

    • 入力
    • 数値

  • ファイルアップロードFile upload

    パソコンやスマートフォンの中のファイルを選んで送る入力。枠の中へ放り込める形にすることが多い。

    • 入力
    • ファイル

  • 検索ボックスSearch box

    キーワードを入れて探す入力欄。虫眼鏡のアイコンと組で使われることが多い。

    • 入力
    • 探す

  • プレースホルダーPlaceholder

    入力欄が空のときだけ薄く出ている文字。入力の見本を示すもので、ラベルの代わりではない。

    • 入力
    • 補助

  • バリデーションメッセージValidation message

    入力の内容が条件に合わないときに、入力欄のそばに出す説明。何が違うのか、どう直せばよいのかを書く。

    • 入力
    • エラー

  • ステッパーStepper

    プラスとマイナスのボタンで数値を1つずつ増減させる入力。買い物かごの個数などに使う。

    • 入力
    • 数値

  • オートコンプリートAutocomplete

    入力しかけた文字から候補を下に出し、選ばせる入力欄。駅名や商品名のように、正しい書き方を思い出しにくい値に使う。

    • 入力
    • 探す

  • フォームのラベルと必須マークForm label / Required indicator

    入力欄に「何を入れるか」を示す名前と、埋めないと送れない欄の印。「必須」「任意」は文字で書き、色だけで区別させない。

    • 入力
    • 基本

  • 日付ピッカーDate picker

    日付を入れる欄に、月のカレンダーを開いて選べる仕組みを付けたもの。予約日のように、曜日を見ながら決めたい日付に使う。

    • 入力
    • 日付

  • チャットの入力欄Chat composer

    チャット画面の下にある、角の丸い入力の箱。書くほど縦に伸び、左に添付のクリップ、右に送信の矢印ボタンがある。Enter で送信する。

    • 入力
    • 会話

  • タグ入力Tag input

    文字を入れて Enter を押すと、その語が × 付きの小さな札になって枠の中に並ぶ入力欄。記事のタグやメールの宛先のように、短い語をいくつも入れてもらうときに使う。

    • 入力
    • 複数

  • カラーピッカーColor picker

    丸い色見本を並べて1つ選ばせ、その下にカラーコードの欄と自由に色を選ぶボタンを置いた入力。テーマ色やラベルの色のように、色そのものを決めてもらうときに使う。

    • 入力
    • 色

  • ワンタイムコード入力One-time code input

    SMS やメールで届いた6桁ほどの数字を入れる欄。1桁ずつ四角い枠が並んだ見た目にすることが多い。ログインや登録の本人確認で使う。

    • 入力
    • 認証

  • 連動プルダウンCascading select

    1つ目のプルダウンで選んだ値に応じて、2つ目の選択肢が入れ替わる組。都道府県を選ぶと市区町村が選べるようになる形が代表で、2つ目は1つ目を選ぶまで押せない。

    • 入力
    • 選択

  • 時刻ピッカーTime picker

    時刻を入れる欄に、「時」と「分」の列を並べた小さな一覧を付けた入力。15分刻みのように決まった間隔から選ばせる予約の時間などに使う。

    • 入力
    • 時刻

  • リッチテキストエディターRich text editor

    太字・斜体・箇条書き・リンクのボタンが上に並び、その下の入力欄で見たままの書式を付けながら書ける部品。ブログやメールの本文入力に使う。

    • 入力
    • 書式

  • 絞り込みパネルFilter panel

    価格帯やブランドなどの項目ごとにチェックボックスと件数を並べ、選んだ条件のチップと該当件数を上に出す箱。通販や検索結果の横に置く。

    • 入力
    • 絞り込み

  • 選択カードChoice card

    枠で囲んだカードを並べ、どれか1つを押して選ぶ入力。見出し・説明・料金がカードに入り、選んだカードは枠が太くなりチェックの印が付く。

    • 入力
    • 選択

  • パスワード入力（表示切り替え）Password input

    入れた文字が●で伏せられる入力欄の横に、目のアイコンの「表示する」ボタンが付いた部品。押すと打った文字が見え、もう一度押すと伏せ字に戻る。

    • 入力
    • 認証

  • 単位つき入力欄Input with prefix / suffix

    入力欄の枠の中の左や右に、円・kg・https:// のような単位や決まった文字が灰色の帯で添えてある欄。値だけを打てばよいことが一目で分かる。

    • 入力
    • 数値

  • 入力マスクInput mask

    数字を打つそばからハイフンやスラッシュが自動で入る入力欄。090-1234-____ のように、まだ埋まっていない桁を下線で見せることもある。

    • 入力
    • 書式

  • 残り文字数つき入力欄Character count

    複数行の入力欄の下に「あと 9 文字」のように残りの文字数が出る部品。上限を超えると「11 文字多すぎます」に変わり、枠が赤く太くなる。

    • 入力
    • 文字数

  • インライン編集Inline edit

    ふだんは値が文字で並んでいて、鉛筆のボタンを押すとその場所が入力欄と「保存」「キャンセル」に変わる。設定画面やプロフィールの項目を1つずつ直すのに使う。

    • 入力
    • 編集

  • 左右移動リストTransfer list

    左右に2つの一覧が並び、間の「→」「←」ボタンで選んだ項目を行き来させる部品。表に出す列やメンバーの割り当てを選ぶ画面で見かける。

    • 入力
    • 選択

  • 生年月日の入力Date of birth input

    「年」「月」「日」が別々の小さな数字の欄になった入力。前に「平成」「昭和」などの元号を選ぶ欄が付くこともある。生年月日のように覚えている日付に使う。

    • 入力
    • 日付

  • 期間選択Date range picker

    「開始日〜終了日」の2つの欄と、間の日が帯で塗られたカレンダーが組になった入力。「今月」「先月」のボタンで一度に選べることも。集計や宿泊の期間に使う。

    • 入力
    • 日付

  • 複数選択プルダウンMulti-select

    見た目はプルダウンだが、開くとチェックボックスつきの一覧が出て、いくつでも選べる。閉じると「3件選択」のように件数や選んだ名前がボタンに出る。

    • 入力
    • 選択

見分け方