作って学べるプログラミング講座
アプリを作りながら学習
自分のペースですぐに始められる
困ったら何回でも質問可能
リファレンス

<input>要素の使い方・サンプルコード

Sara

<input>

<form> 要素と組み合わせてフォームの入力項目を作ることができます。

type 属性の値によって、テキスト・ボタン・ラジオボタン・ファイルなど様々な入力項目を用意することができます。

デモ:<input>要素

属性

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

input type=”button”

リンク:<input type=”button”>の使い方・サンプルコード

input type=”checkbox”


リンク:<input type=”checkbox”>の使い方・サンプルコード

input type=”color”

(IE非対応)

リンク:<input type=”color”>の使い方・サンプルコード

input type=”date”

(IE, Safari非対応)

リンク:<input type=”date”>の使い方・サンプルコード

input type=”datetime-local”

(Chrome, Opera, Edgeのみ対応)

リンク:<input type=”datetime-local”>の使い方・サンプルコード

input type=”email”

リンク:<input type=”email”>の使い方・サンプルコード

input type=”file”

リンク:<input type=”file”>の使い方・サンプルコード 

input type=”hidden”

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

リンク:<input type=”hidden”>の使い方・サンプルコード

input type=”image”

リンク:<input type=”image”>の使い方・サンプルコード

input type=”month”

(Chrome, Opera, Edgeのみ対応)

リンク:<input type=”month”>の使い方・サンプルコード

input type=”number”

リンク:<input type=”number”>の使い方・サンプルコード

input type=”password”

リンク:<input type=”password”>の使い方・サンプルコード

input type=”radio”


リンク:<input type=”radio”>の使い方・サンプルコード

input type=”range”

リンク:<input type=”range”>の使い方・サンプルコード

input type=”reset”

リンク:<input type=”reset”>の使い方・サンプルコード

input type=”search”

リンク:<input type=”search”>の使い方・サンプルコード

input type=”submit”

リンク:<input type=”submit”>の使い方・サンプルコード

input type=”tel”

リンク:<input type=”tel”>の使い方・サンプルコード

input type=”text”

リンク:<input type=”text”>の使い方・サンプルコード

input type=”time”

(IE, Safari は非対応)

リンク:<input type=”time”>の使い方・サンプルコード

input type=”url”

リンク:<input type=”url”>の使い方・サンプルコード

input type=”week”

(Chrome, Opera, Edge のみ対応)

リンク:<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 タグ一覧はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました!
>> お問い合わせはこちら
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました