HTMLでは、様々な種類の入力フィールドを作成することができます。このページでは、それぞれの入力フィールドについて詳しく解説し、具体的な例を示します。

• テキスト入力フィールド
• パスワード入力フィールド
• 数値入力フィールド
• メールアドレス入力フィールド
• URL入力フィールド
• 複数行入力フィールド
• チェックボックス
• ラジオボタン
• ドロップダウンリスト
• ファイルアップロード
• 日付ピッカー
• 範囲スライダー
• カラー選択
• 隠しフィールド

テキスト入力フィールド

シンプルな文字列を入力するためのフィールドです。

<input type="text" name="username" placeholder="ユーザー名を入力">

パスワード入力フィールド

パスワードを入力するためのフィールドで、入力した文字が隠されます。

<input type="password" name="password" placeholder="パスワードを入力">

数値入力フィールド

数値のみを入力するフィールドで、値の範囲やステップを指定できます。

<input type="number" name="age" min="0" max="100" step="1" placeholder="年齢">

メールアドレス入力フィールド

メールアドレスを入力するフィールドで、入力内容の形式チェックが自動で行われます。

<input type="email" name="email" placeholder="メールアドレスを入力">

URL入力フィールド

URLを入力するためのフィールドです。

<input type="url" name="website" placeholder="ウェブサイトURLを入力">

複数行入力フィールド

複数行のテキストを入力するためのフィールドです。

<textarea name="message" rows="4" cols="50" placeholder="メッセージを入力"></textarea>

チェックボックス

複数の選択肢から1つ以上を選ぶ場合に使用します。

<input type="checkbox" name="subscribe" value="newsletter"> ニュースレターを受け取る

<input type="radio" name="gender" value="male"> 男性

<select name="country">
    <option value="japan">日本</option>
    <option value="usa">アメリカ</option>
    <option value="uk">イギリス</option>
</select>
    

<input type="file" name="upload">

<input type="date" name="birthdate">

<input type="range" name="volume" min="0" max="100">

<input type="color" name="favcolor">

<input type="hidden" name="userid" value="12345">