2025年5月25日
formで使う名称
figmaでコンポーネントとかバリアントとか作る時にこういう名称がパッと出てこないのでいつも苦労するのでメモ。
アスキーアート風でGPTさんにつくってもらった
┌───────────────────────────────┐
│ 名前（label） │
│ ┌─────────────────────────┐ │
│ │ 例：Placeholder text │ ← input field
│ └─────────────────────────┘ │
│ ※ support text / message │
└───────────────────────────────┘
📋 基本構成要素
| 英語（英語表記） | 日本語 | 説明 |
|---|---|---|
| form | フォーム | 入力フィールドをまとめた構造 |
| label | ラベル、項目名 | 入力欄に対応する説明テキスト |
| input field | 入力欄、入力フィールド | ユーザーが情報を入力する場所 |
| placeholder | プレースホルダー | 入力欄に表示されるヒント的な例文 |
| support text | 補助テキスト、説明文 | 入力内容に関する説明、注意書きなど |
| hint text | ヒントテキスト | サポートテキストと同義で使われることも |
| fieldset | フィールドセット | 関連する入力項目のグループ化（HTMLタグ） |
| legend | フィールドグループの見出し | fieldsetのタイトル（HTMLタグ） |
🖊 入力タイプ別
| 英語（英語表記） | 日本語 | 説明 |
|---|---|---|
| text field | テキスト入力欄 | 短い文字列の入力用 |
| textarea | テキストエリア | 複数行入力用 |
| email field | メールアドレス欄 | メール形式の検証がある入力欄 |
| password field | パスワード入力欄 | 入力内容が伏せられる |
| number field | 数値入力欄 | 数字のみを入力 |
| date picker | 日付選択フィールド | カレンダーUIや年・月・日入力欄 |
| select dropdown | セレクトボックス（プルダウン） | 複数選択肢から一つを選ぶ |
| radio button | ラジオボタン | 複数選択肢から一つだけ選ぶ |
| checkbox | チェックボックス | 複数選択肢から複数選べる |
| file input | ファイル選択欄 | 画像やPDFなどのアップロード |
| range slider | スライダー | 数値をスライドで選ぶ |
🧭 状態・バリデーション
| 英語（英語表記） | 日本語 | 説明 |
|---|---|---|
| required | 必須 | 入力が必須であること |
| optional | 任意 | 入力してもしなくても良い |
| disabled | 無効 | 入力や選択ができない状態 |
| readonly | 読み取り専用 | 内容は表示されるが編集できない |
| valid | 有効 | 入力内容が正しい |
| invalid | 無効 | 入力内容が間違っている |
| error message | エラーメッセージ | 入力エラー時に表示される説明文 |
| validation | バリデーション | 入力内容を検証する処理 |
🔘 操作・ボタン
| 英語（英語表記） | 日本語 | 説明 |
|---|---|---|
| submit button | 送信ボタン | 入力内容を送信する |
| reset button | リセットボタン | 入力内容を初期化する |
| action | アクション（送信先） | データ送信時のURL |
| method | メソッド（送信方法） | GETまたはPOST など |
🧩 その他の関連用語
| 英語（英語表記） | 日本語 | 説明 |
|---|---|---|
| form group | フォームグループ | ラベル・入力欄・補助テキストのセット |
| autocomplete | 自動補完 | 入力履歴などを自動で表示する機能 |
| autofocus | 自動フォーカス | ページ表示時に入力欄に自動でカーソルを当てる |
| aria-label | アクセシビリティラベル | スクリーンリーダー用の補助情報 |
| tabindex | タブインデックス | キーボードでの移動順序の指定 |
どうもありがとう。
-
前の記事
