リファレンス

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


 

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

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx