リファレンス

【2020年版】<input>要素の使い方・サンプルコード

<form> 要素と組み合わせてフォームの入力項目を作ることができます。
type 属性の値によって、テキスト・ボタン・ラジオボタン・ファイルなど様々な入力項目を用意することができます。

デモ:<input> 要素

 
 

属性

使用できる属性については、それぞれの type 属性値のリンクからご確認ください。

input type="button"

リンク:【2020年版】<input type="button">の使い方・サンプルコード
 
 

input type="checkbox"


リンク:【2020年版】<input type="checkbox">の使い方・サンプルコード
 
 

input type="color"

(IE非対応)

リンク:【2020年版】<input type="color">の使い方・サンプルコード
 
 

input type="date"

(IE, Safari非対応)

リンク:【2020年版】<input type="date">の使い方・サンプルコード
 
 

input type="datetime-local"

(Chrome, Opera, Edgeのみ対応)

リンク:【2020年版】<input type="datetime-local">の使い方・サンプルコード
 
 

input type="email"

リンク:【2020年版】<input type="email">の使い方・サンプルコード
 
 

input type="file"

リンク:【2020年版】<input type="file">の使い方・サンプルコード
 
 

input type="hidden"

入力欄などは表示されません。

リンク:【2020年版】<input type="hidden">の使い方・サンプルコード
 
 

input type="image"

リンク:【2020年版】<input type="image">の使い方・サンプルコード
 
 

input type="month"

(Chrome, Opera, Edgeのみ対応)

リンク:【2020年版】<input type="month">の使い方・サンプルコード
 
 

input type="number"

リンク:【2020年版】<input type="number">の使い方・サンプルコード
 
 

input type="password"

リンク:【2020年版】<input type="password">の使い方・サンプルコード
 
 

input type="radio"


リンク:【2020年版】<input type="radio">の使い方・サンプルコード
 
 

input type="range"

リンク:【2020年版】<input type="range">の使い方・サンプルコード
 
 

input type="reset"

リンク:【2020年版】<input type="reset">の使い方・サンプルコード
 
 

input type="search"

リンク:【2020年版】<input type="search">の使い方・サンプルコード
 
 

input type="submit"

リンク:【2020年版】<input type="submit">の使い方・サンプルコード
 
 

input type="tel"

リンク:【2020年版】<input type="tel">の使い方・サンプルコード
 
 

input type="text"

リンク:【2020年版】<input type="text">の使い方・サンプルコード
 
 

input type="time"

(IE, Safari は非対応)

リンク:【2020年版】<input type="time">の使い方・サンプルコード
 
 

input type="url"

リンク:【2020年版】<input type="url">の使い方・サンプルコード
 
 

input type="week"

(Chrome, Opera, Edge のみ対応)

リンク:【2020年版】<input type="week">の使い方・サンプルコード
 
 

使用例

HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>input要素サンプル</title>
    <style>
        body {
            font-size: 14px;
            color: #333;
        }
        table {
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table th, table td{
            border-bottom: 1px solid #ddd;
            padding: .8em 1em;
        }
        .required {
            color: red;
            font-size: .8em;
            padding-left: 2px;
            vertical-align: top;
        }
    </style>
</head>
<body>
<form method="post" action="sample.php" enctype="multipart/form-data">
    <table>
        <tbody>
            <tr>
                <th>お名前<span class="required">*必須</span></th>
                <td><input type="text" placeholder="山田太郎"></td>
            </tr>
            <tr>
                <th>メールアドレス<span class="required">*必須</span></th>
                <td><input type="email" placeholder="example@mail.com"></td>
            </tr>
            <tr>
                <th>パスワード<span class="required">*必須</span></th>
                <td><input type="password" placeholder="英数字8文字以上"></td>
            </tr>
            <tr>
                <th>電話番号</th>
                <td><input type="tel" placeholder="0312345678"></td>
            </tr>
            <tr>
                <th>誕生日</th>
                <td><input type="date"></td>
            </tr>
            <tr>
                <th>ウェブサイト</th>
                <td><input type="url" placeholder="http://example.com"></td>
            </tr>
            <tr>
                <th>お使いのOS</th>
                <td>
                    <label><input type="radio" name="os"> Windows</label>
                    <label><input type="radio" name="os"> macOS</label>
                    <label><input type="radio" name="os"> Linux</label>
                </td>
            </tr>
            <tr>
                <th>お使いのブラウザ</th>
                <td>
                    <label><input type="checkbox"> Chrome</label>
                    <label><input type="checkbox"> Firefox</label>
                    <label><input type="checkbox"> IE</label>
                    <label><input type="checkbox"> Safari</label>
                    <label><input type="checkbox"> Opera</label>
                </td>
            </tr>
            <tr>
                <th>好きな色</th>
                <td><input type="color"></td>
            </tr>
            <tr>
                <th>添付ファイル</th>
                <td><input type="file"></td>
            </tr>
        </tbody>
    </table>
    <input type="reset" value="入力内容をクリア">
    <input type="submit" value="送信">
</form>
</body>
</html>
実行結果


 
 

対応ブラウザ

button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

 
 

関連するタグ

 

HTML タグ一覧はこちら

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA