HTMLシェアするLINE!0HTMLの<input>タグについていていきます。順を追って解説していきますが必要に応じて目次からジャンプしてください。<input>の属性の種類type=”text”type=”password”type=”number”type=”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”番外編:<textarea>とは?inputの属性の種類は数多くあり、ブラウザによって対応状況が異なるので扱いには注意しておきましょう。prefix)について見ていきます。23:29<input>の属性の種類<input>タグには様々な属性があり、属性によって作られるものや挙動が変わっていきます。種類が多いですが順番に見ていきます。共通した属性もあるのでそれも確認しておきましょう。<input>タグのその他の属性(一例)name属性:フォーム自体に名前を付けるvalue属性:送信される値を指定するsize属性:フォームのサイズを指定するmaxlength属性:最大入力文字数の設定をするminlength属性:最少入力文字数の設定をするrequired属性:入力を必須項目にするplaceholder属性:入力のヒントを表示するstep属性:入力の間隔を設定するpattern属性:入力形式を指定するtitle属性:入力アナウンスを指定するdisable属性:入力不可の状態にするtype以外の属性については長くなってしまうので別に解説します。最低限name属性とvalue属性については理解をしておいてもらえると助かります。※今回はコードが長くならないようにname属性やvalue属性は必要な時以外は省いています。必要に応じて追加して使ってください。type=”text”type属性で”text”を指定すると以下のようなものができます。type="text">1行のボックスを作成します。複数行のボックス作成をする場合は後述しますが<textarea></textarea>で作成できます。type=”password”type属性で”password”を指定すると以下のようなものができます。type="password">pattern属性で入力を半角英数のみに絞る事もできます。</fieldset></form>type=”number”type属性で”number”を指定すると以下のようなものができます。min=”〇”』と属性を追加することで、最大値と最小値を設定することもできます。min="-5">type=”url”type属性で”url”を指定すると以下のようなものができます。type="url">placeholder属性を追加することで、例を表示させることもできます。placeholder="https://sunsukeblog.com">type=”email”type属性で”email”を指定すると以下のようなものができます。type="email">placeholder属性を追加することで、例を表示させることもできます。placeholder="mail-example@ne.jp">type=”tel”type属性で”tel”を指定すると以下のようなものができます。type="tel">required属性を追加することで、入力を必須にすることもできます。</fieldset></form>type=”date”type属性で”date”を指定すると以下のようなものができます。type="date">value属性で初期値を指定することもできます。</fieldset></form>type=”time”type属性で”time”を指定すると以下のようなものができます。type="time">step属性で間隔を指定することもできます。step="900">step属性で時間間隔を指定する場合は秒換算での計算が必要です。例:時間間隔を秒数換算30秒:step=”30′′2分:step=”120′′15分:step=”900′′2時間:step=”7200′′type=”color”type属性で”color”を指定すると以下のようなものができます。type="color">type=”color”はHTML/CSSだけで使うよりかJavascriptなどと組み合わせて使う機会が多いんじゃないかと思います。type=”range”type属性で”range”を指定すると以下のようなものができます。type="range">type=”range”のバーは最小値が0、最大値は100で1ずつ数値が増えていきます。type=”range”はHTML/CSSだけで使うよりかJavascriptなどと組み合わせて使う機会が多いんじゃないかと思います。type=”checkbox”type属性で”checkbox”を指定すると以下のようなものができます。for="cb1">政経</label><label>タグについてtype=”radio”とtype=”checkbox”に関してはクリック範囲が狭いので、<input>タグの後に内容を付けて<label>タグで囲ってfor属性で<input>タグ毎に付けたid属性を指定してあげると文字をクリックしても選択したのと同じ扱いになります。name属性についてcheckboxはどれを選んでいるのかをデータで拾わないと何の値も得られないので必ずname属性を付けてあげましょう。その時には必ずname=”名前[]”で付けた名前の後に[]をつけてあげます。(プログラムで使う配列の為):checkedとの組み合わせ少し荒業ですが、checkboxは疑似クラスの『:checked』をうまく使うと、クリックしたら表示などの簡単な動きが出せるようになるので作ってみると表現の幅が広がるんじゃないかと思います。詳しくは↓で紹介しています。『:hover』『:active』『:checked』を見てみる今回はアニメーションみたいに動きを出せる疑似クラスの『:hover』『:active』『:checked』について見てみましょう。14:41type=”radio”type属性で”radio”を指定すると以下のようなものができます。name="a">食べないradioボタンは基本的に選択肢から1つだけ選ぶ形式なので、グループ内の<input>タグにすべてに同じname属性を付けてあげないと機能しません。for="radio4">食べない</label><label>タグについてtype=”radio”とtype=”checkbox”に関してはクリック範囲が狭いので、<input>タグの後に内容を付けて<label>タグで囲ってfor属性で<input>タグ毎に付けたid属性を指定してあげると文字をクリックしても選択したのと同じ扱いになります。type=”submit”type属性で”submit”を指定すると以下のようなものができます。type=”submit”>で送信するボタンの表記を指定する事が出来ますが、<form>タグで囲わないとクリックしても意味はありません。基本的には<input>タグを<form>タグで囲うということを覚えておきつつ、<form>タグのaction属性とmethod属性についても併せて確認しておきましょう。value属性について送信するボタンの表記を指定する事が出来ます。デフォルトでもほとんどが送信にはなるのですが、Firefoxなどの一部のブラウザでは表記が若干異なる(クエリ送信と表示される)のでそれを防ぐ事が出来ます。type=”image”を使うと画像をボタンとして使うことができます。type=”image”>HTML5からの属性なので対応ブラウザによる挙動が不安定ですが、それでもformmethod属性やformaction属性を使えば送信ボタンとしても使うことができるようになります。type=”reset”を使うとform内に入力したものを消すことができます。type="submit"></li></ul></form>同一のformタグ内にあるinputタグの入力の値をすべて初期状態に戻します。type=”file”を使えば様々なファイルの送信などが可能です。type=”file”>ファイルを選択してください。<li>ファイルを選択してください。type="submit"></li></ul></form>ファイル名が表示されて、PHPなどを使えばファイルを別のページで受け取ることも可能です。type=”hidden”を使うことでページには表示されないデータを送信することが可能です。type="submit"></li></ul></form>ソースでは確かにinputタグが2つありますが、画面に<input>タグは送信ボタンしかありません。これはform内の情報を追加したいときなどに使えます。例としては、ECサイトで『カートに入れる』ボタンを押しただけで、何の商品をカートに入れたかが自動的に反映されています。これは以下のようにすればできます。type=”hidden”>タグの中にvalueやname属性を追加していきます。原理としてはこれで商品ページからカート画面に何の商品を入れたかデータを送ることができます。type=”button”を使えば汎用性があるボタン作成が可能です。type="button"></p>何も起こらないただのボタンができました。単品で使うことはおそらくなく、JavaScriptなどのイベントハンドラー(クリックした時などの挙動を感知)と組み合わせることになります。まとめ<input>タグは、参考書などだと基本的なお問合せといった形でしか使われていませんが、実際には様々な用途がる上に属性の種類もかなり多いので、知れば知るほど使い勝手がよくなるので身につけていきましょう。最後に繰り返しますが、HTML5から追加された属性がかなりあるので、ブラウザチェックは不安であれば確認するようにしましょう。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。