<input>のtype属性と機能を一覧にまとめてみた

<input>のよく使うtype属性

• type=”text”:1行のテキストボックス
• type=”password”:入力したものが●●で表示されるボックス
• type=”number”:数値入力フォーム
• type=”url”:URL入力フォーム
• type=”email”:メールアドレス入力フォーム
• type=”tel”:電話番号入力フォーム
• type=”date”:日付選択フォーム
• type=”time”:時間選択フォーム
• type=”color”:カラーパレット
• type=”range”:レンジバー
• type=”checkbox”:☑ボックス
• type=”radio”:ラジオボタン
• type=”submit”:送信ボタン
• type=”reset”:リセットボタン(入力したものを消去)
• type=”image”:画像をボタンにする
• type=”file”:ファイルを選択する
• type=”hidden”:非表示データの送信
• type=”button”:汎用ボタンを作成

<input>タグのその他の属性(一例)

• name属性:フォーム自体に名前を付ける
• value属性:送信される値を指定する
• size属性:フォームのサイズを指定する
• maxlength属性:最大入力文字数の設定をする
• minlength属性:最少入力文字数の設定をする
• required属性:入力を必須項目にする
• placeholder属性:入力のヒントを表示する
• step属性:入力の間隔を設定する
• pattern属性:入力形式を指定する
• title属性:入力アナウンスを指定する
• disable属性:入力不可の状態にする

<input type=”text”>

<input type="text">

1行のボックスを作成します。複数行のボックス作成をする場合は後述しますが<textarea></textarea>で作成できます。

<input type=”password”>

<input type="password">

pattern属性で入力を半角英数のみに絞る事もできます。

半角英数のみ

<form action="xxx.php" method="post>
  <filedset>
    <input type="url" pattern="^[0-9A-Za-z]+$">
    <input type="submit">
  </fieldset>
</form>

<input type=”number”>

<input type="number">

『max=”〇” min=”〇”』と属性を追加することで、最大値と最小値を設定することもできます。

最大値:10、最小値:-5

<input type="number" max="10" min="-5">

<input type=”url”>

<input type="url">

placeholder属性を追加することで、例を表示させることもできます。

placeholder属性で例を表示

<input type="url" placeholder="https://sunsukeblog.com">

<input type=”email”>

<input type="email">

placeholder属性を追加することで、例を表示させることもできます。

placeholder属性で例を表示

<input type="email" placeholder="mail-example@ne.jp">

<input type=”tel”>

<input type="tel">

required属性を追加することで、入力を必須にすることもできます。

required属性で必須項目指定

<form action="xxx.php" method="post">
  <filedset>
    <input type="tel" required>
    <input type="submit">
  </fieldset>
</form>

<input type=”date”>

<input type="date">

value属性で初期値を指定することもできます。

value属性で初期値を指定

<form action="xxx.php" method="post">
  <filedset>
    <input type="date" value="2020-01-01">
    <input type="submit">
  </fieldset>
</form>

<input type=”time”>

<input type="time">

step属性で間隔を指定することもできます。

step属性で15分間隔を指定

<input type="time" step="900">

step属性で時間間隔を指定する場合は秒換算での計算が必要です。

例:時間間隔を秒数換算

<input type=”color”>

<input type="color">

type=”color”はHTML/CSSだけで使うよりかJavascriptなどと組み合わせて使う機会が多いんじゃないかと思います。

<input type=”range”>

<input type="range">

type=”range”のバーは最小値が0、最大値は100で1ずつ数値が増えていきます。

type=”range”はHTML/CSSだけで使うよりかJavascriptなどと組み合わせて使う機会が多いんじゃないかと思います。

<input type=”checkbox”>

<input id="cb1" type="checkbox" name="cb[]"><label for="cb1">古文</label>
<input id="cb2" type="checkbox" name="cb[]"><label for="cb1">数学</label>
<input id="cb3" type="checkbox" name="cb[]"><label for="cb1">科学</label>
<input id="cb4" type="checkbox" name="cb[]"><label for="cb1">政経</label>

<label>タグについて

type=”radio”とtype=”checkbox”に関してはクリック範囲が狭いので、<input>タグの後に内容を付けて<label>タグで囲ってfor属性で<input>タグ毎に付けたid属性を指定してあげると文字をクリックしても選択したのと同じ扱いになります。

name属性について

checkboxはどれを選んでいるのかをデータで拾わないと何の値も得られないので必ずname属性を付けてあげましょう。その時には必ずname=”名前[]”で付けた名前の後に[]をつけてあげます。(プログラムで使う配列の為)

:checkedとの組み合わせ

少し荒業ですが、checkboxは疑似クラスの『:checked』をうまく使うと、クリックしたら表示などの簡単な動きが出せるようになるので作ってみると表現の幅が広がるんじゃないかと思います。詳しくは↓で紹介しています。

<input type=”radio” name=””>

<input type="radio" name="a">ごはん
<input type="radio" name="a">パン
<input type="radio" name="a">麺類
<input type="radio" name="a">食べない

radioボタンは基本的に選択肢から１つだけ選ぶ形式なので、グループ内の<input>タグにすべてに同じname属性を付けてあげないと機能しません。

文字クリックで選択

<input id="radio1" type="radio" name="a"><label for="radio1">ごはん</label>
<input id="radio2" type="radio" name="a"><label for="radio2">パン</label>
<input id="radio3" type="radio" name="a"><label for="radio3">麺類</label>
<input id="radio4" type="radio" name="a"><label for="radio4">食べない</label>

<label>タグについて

type=”radio”とtype=”checkbox”に関してはクリック範囲が狭いので、<input>タグの後に内容を付けて<label>タグで囲ってfor属性で<input>タグ毎に付けたid属性を指定してあげると文字をクリックしても選択したのと同じ扱いになります。

<input type=”submit”>

<input type="submit" value="送信">

<form>タグとの関わり

<input type=”submit”>で送信するボタンの表記を指定する事が出来ますが、<form>タグで囲わないとクリックしても意味はありません。基本的には<input>タグを<form>タグで囲うということを覚えておきつつ、<form>タグのaction属性とmethod属性についても併せて確認しておきましょう。

value属性について

送信するボタンの表記を指定する事が出来ます。デフォルトでもほとんどが送信にはなるのですが、Firefoxなどの一部のブラウザでは表記が若干異なる(クエリ送信と表示される)のでそれを防ぐ事が出来ます。

<input type=”image”>

HTML5からの属性なので対応ブラウザによる挙動が不安定ですが、それでもformmethod属性やformaction属性を使えば送信ボタンとしても使うことができるようになります。

<input type="image" src="sample.jpg">

<input type=”reset”>

<form action="xxx.php">
<ul style="list-style:none">
 <li>お名前:<input type="text"></li>
 <li>メールアドレス<input type="email"></li>
 <li>パスワード<input type="password"></li>
 <li><input type="reset"></li>
 <li><input type="submit"></li>
</ul>
</form>

同一のformタグ内にあるinputタグの入力の値をすべて初期状態に戻します。

<input type=”file”>

<form action="xxx.php">
<ul style="list-style:none">
 <li>ファイルを選択してください。</li>
 <li><input type="file"></li>
 <li><input type="submit"></li>
</ul>
</form>

ファイル名が表示されて、PHPなどを使えばファイルを別のページで受け取ることも可能です。

<input type=”hidden”>

<form>
<ul style="list-style:none">
 <li>送信を押してね</li>
 <li><input type="hidden" name="nametest" value="valuetest"></li>
 <li><input type="submit"></li>
</ul>
</form>

ソースでは確かにinputタグが2つありますが、画面に<input>タグは送信ボタンしかありません。これはform内の情報を追加したいときなどに使えます。
例としては、ECサイトで『カートに入れる』ボタンを押しただけで、何の商品をカートに入れたかが自動的に反映されています。これは以下のようにすればできます。

<form>
<ul style="list-style:none">
 <li>商品名aaaaaa</li>
 <li><input type="hidden" value="aaaaaa"></li>
 <li><input type="submit" value="カートに入れる"></li>
</ul>
</form>

実際にはPHPなどでデータベースから引っ張ってきて<input type=”hidden”>タグの中にvalueやname属性を追加していきます。ただ、原理としてはこれで商品ページからカート画面に何の商品を入れたかデータを送ることができます。

<input type=”button”>

<p><input type="button"></p>

何も起こらないただのボタンができました。単品で使うことはおそらくなく、JavaScriptなどのイベントハンドラー(クリックした時などの挙動を感知)と組み合わせることになります。