Frontend Academy · レッスン

フォームコントロール: input type、select、textarea

text、email、number、date、checkbox、radio、range、file、colorの各inputと、select、textarea要素を使います。

「フォームコントロール: input type、select、textarea」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

入力タイプの全パレット

HTML5では、text以外にも多くの専用入力タイプが導入されました。それぞれがブラウザーに期待されるデータの種類を伝えるため、ネイティブの入力検証、モバイルで適切なキーボード、プラットフォーム標準のUIコントロールを利用できます。

Text、Search、URL入力

type="text"は通常のテキスト用のフォールバックです。type="search"は検索向けに最適化されたキーボードを示し、多くの場合クリアボタンも表示します。type="url"はURL形式を検証し、モバイルではURL用キーボードを表示します。

<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">

Email と Tel

type="email"はメールアドレスの形式を検証し、@キーのあるメールアドレス向けキーボードを表示します。type="tel"は電話番号用のテンキーを表示します（電話番号の形式は国によって異なるため、形式の検証は行いません）。

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

Number、Range、Dateタイプ

数値データには、min/max/stepを指定したtype="number"を使います。スライダーにはtype="range"を使います。type="date"、type="time"、type="datetime-local"は、ネイティブのピッカーで日付や時刻などの時間データを扱います。

<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">

Checkbox と Radio

チェックボックスは独立した切り替えです。同じグループ（同じ name）のラジオボタンでは、1つだけ選択できます。それぞれに対応するラベルが必要です。

<fieldset>
  <legend>Notification preferences</legend>
  <label><input type="checkbox" name="email_notif" value="1"> Email</label>
  <label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

Color、File、Hidden

type="color"はネイティブのカラーピッカーを表示します。type="file"はファイルダイアログを開きます。accept属性を使うとファイルタイプを制限できます。type="hidden"はUIコントロールを表示せずにデータを送信します。

<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">

selectのドロップダウン

<select>要素はドロップダウンを作成します。複数選択にはmultipleを使います（ユーザー体験の面で適していることはほとんどありません）。長いリストでは、<optgroup>で選択肢をグループ化します。

<select name="country">
  <option value="">Select a country...</option>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="Americas">
    <option value="us">United States</option>
  </optgroup>
</select>

Textarea

<textarea>は複数行のテキスト入力を作成します。初期サイズにはrowsとcolsを使い、より細かく制御する場合はCSSを使います。終了タグは必須で、タグの間に記述した内容がデフォルト値になります。

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
  placeholder="Write something about yourself..."></textarea>

Datalist — オートコンプリートの候補

<datalist>は、自由入力を制限せずに入力候補のリストを提供します。list属性とid属性を使って入力欄とdatalistを関連付けます。

<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
  <option value="JavaScript">
  <option value="TypeScript">
  <option value="Python">
  <option value="Rust">
</datalist>

value属性とname属性

nameはフォーム送信時に送られるキーです。valueは初期値を設定します。チェックボックスとラジオボタンでは、チェックされたときに送信される値です。テキスト入力では、あらかじめ入力された内容です。

inputのサイズ設定とplaceholder

placeholderは入力欄が空のときにヒントテキストを表示します。フォーカスすると消えるため、目に見えるラベルの代わりにはなりません。sizeは表示幅を文字数で設定しますが、サイズ指定にはCSSを使用することをおすすめします。

確認問題

モバイルで数字キーボードを表示し、入力値が有効な数値であることを検証する入力タイプはどれですか？

まとめ：フォームコントロール

意味に合った入力タイプを使います。メールアドレスにはemail、数値にはnumber、日付にはdateを使います。固定された選択肢にはselect、候補を示すオートコンプリートにはdatalist、複数行のテキストにはtextareaを使います。送信には必ずname属性を含め、必要に応じてvalue属性も指定します。

よくある質問

「フォームコントロール: input type、select、textarea」レッスンは無料ですか？

はい。「フォームコントロール: input type、select、textarea」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「フォームコントロール: input type、select、textarea」で何を学びますか？

text、email、number、date、checkbox、radio、range、file、colorの各inputと、select、textarea要素を使います。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「フォームコントロール: input type、select、textarea」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る