input要素のtype属性の種類を知りたいときの一覧HTMLでinput要素のtype属性で使える属性値の数が多くて「絶対に覚えていられんよ」ということになったので、HTML5から追加されたtype属性の属性値も含めて簡単にですが一覧化しておきます。そもそもinput要素のtype属性を全種類使ったことがないので、どの属性値がどんなフィールドになるのか表示させながら記事にした一覧です。color)input要素のtype属性の種類input要素のtype属性の属性値になる種類は22種類あります。目次にしてみたらHTML5から追加された種類のほうが多かったです。input要素のtype属性は使う属性値の種類によって作成するフィールドの部品を組み立てていくことができ、部品を組み合わせていくことで使用したいフォームを作り上げていくことができます。記事中にname属性が登場しますがname属性は入力欄に名前をつける属性です。<form>でデータが送信されるときに、name属性で指定した名前と入力された値が一組みになって送信されます。button)HTMLでinput要素のtype属性に「button」を使うと、そのまんまですがボタンが作成できます。凡用ボタンとも言います。type=”button”>要素の中にvalue属性を記述するとボタンのラベルとして使われます。type=”button”>だけでは単なる凡用ボタンなので動作はしません。それなのでscriptなどと組み合わせて使用したりできます。form要素内で複数のボタンをグループ化して使う場合は同じnameグループをつけます。file)input要素のtype属性に「file」を属性値で指定すると「ファイルを選択」とボタンに表示され、ボタンをクリックするとファイル選択ができるボタンを作成できます。type=”file”>ブラウザによってファイル選択の表示は若干の違いがあるようです。form要素には「method=”post”」と「enctype=”multipart/form-data”」の指定をしておくようにします。fileの記述の後にaccept属性をつけると選択できるファイル形式の指定ができます。jpegなら「accept=”image/jpeg”」というようにします。type=”file”を書くだけだとファイル選択は一つだけです。それなのでmultipleを記述してファイルの複数選択を可能にしたりもできます。hidden)input要素のtype属性に「hidden」を指定すると、ブラウザには表示されない「隠しデータ」を使うことができます。隠してるのはブラウザの表示だけなので、HTMLソースを見ると確認することができます。type=”hidden”を使って商品名ではなく品番で情報を送信して注文管理しやすくするなどがあるようです。image)input要素のtype属性にimageを記述すると、フォームの送信ボタンを画像の送信ボタンにすることができます。alt=”送信”>画像送信ボタン※サンプルなのでホームに飛びます。送信ボタンに使用したい画像を「src=””」で指定して「alt=””」も記述します。checkbox)次はinput要素のtype属性に「checkbox」を指定した場合です。type=”checkbox”>チェックボックス:正方形のチェックボックスが表示されて、その名の通りチェックボックスの出来上がりです。チェックボックスは単一の値をオンにしたりオフにしたりできます。複数あるチェックボックスの場合は複数の選択が可能です。チェックボックが関連していてグループにして選択できるようにする場合は、name属性の属性値を統一してチェックボックスのグループを作成します。password)type属性の属性値に「password」を指定するとパスワードの入力をするフィールドを作成できます。フィールドに入力すると黒ポチで表示されるフィールドです。name=”example”>パスワード:例えば「size」もtype属性の中に記述すると、パスワードを入力するフィールド幅が広がります。「maxlength」の指定をすると、パスワードの入力最大文字数を決めることもできます。上記はsizeを50にした幅で、パスワード最大入力数を10文字にしてみました。フィールド幅のわりには入力文字数が少ないという、よくわからないパスワードフィールドを作ってみましたです。type=”radio”と記述するとチェックができるラジオボタンが作成できます。チェックボックスと似てますが、チェックボックスは複数の選択をチェックできるボタンに対して、ラジオボタンは複数の選択肢から一つだけを選択できるボタンです。type=”radio”>ラジオ:アンケートに使ってるラジオボタンをよく見るかと思います。そのため複数のラジオボタンをグループ化するときがあると思うので、ラジオボタンをグループ化して使うときもHTMLの「name」属性を同じ名前にしてvalueで送信する情報を送るようになります。reset)input要素のtype属性に「reset」を属性値として指定するとフォームで入力した内容をリセットすることができます。value=”リセッシュ”>リセット:value部分がリセットボタンの部分に表示されます。value属性をつけない場合のボタン表示は「リセット」と表示されたのだと思いますが、ブラウザによっては異なるかもしれないので統一したい人は表示確認する必要もあるかと思います。type=”submit”を指定すると送信ボタンを作成できます。HTMLの送信ボタンは入力フォームに入力した内容をサーバーに送信するボタンです。送信ボタンをクリックした結果は、使用してるプログラム(CGI等)によって異なります。value=”送信する”>送信ボタン:送信ボタンの部分の表示はブラウザごとに異なる場合があるようなので、value属性でボタン表示が変わらないように指定しておくといいかと思います。text)input要素のtype属性に「text」を記述すると一行テキストとして入力フィールドを作成できます。value=”一行テキスト”>テキスト:一行だけのテキストフィールドなので横幅を長めにするときは「size」で指定します。value=”value部分”>value属性をつけるとテキスト入力の初期値としてテキスト内に表示させたい入力例などを付加して「優しさフィールド」にすることができます。テキストの入力フィールドをもっと広いテキストにしたい場合は、「textarea」が適しています。HTML5で追加されたinput要素のtype属性の種類ここからはinput要素のtype属性がHTML5から追加された種類です。HTMLの書き方は同じです。ブラウザによっては対応してないこともあるようです。スマホでの入力が私の環境では入力フィールドがうまく動作しなかったりしました。search)input要素の属性の種類にある「search」で検索フォームを作成できます。検索フィールドの表示だけ見ると、ただのテキスト入力できるだけのような気がします。type=”search”>検索:ですが検索フィールドに入力するとバツ印が現れてるのですが、これは入力した内容を取り消すボタンが表示されます。個人的には活用方法が見えてこなかったです。それなのでlist属性で入力候補のリストを作成するとかでパワーアップした検索フォームにできそうです。検索候補みたいなものですかね、以下のように書いてみました。value="リスト3"></option></datalist>HTMLのdatalist要素で指定したid名を記述すると、リストを作成して検索候補を表示できます。tel)input要素のtype属性に「tel」を記述します。placeholder=”00-0000-0000′′>すると以下のようなフィールドが表示されます。電話番号:ほとんどテキストフィールドと変わらないですが、大きく違いがわかることはスマホだと電話番号の入ちょくに最適化された専用のキーパッドを表示することができます。PCは違いがわかりづらいかもです。電話番号の入力だと分かるように「placeholder」を付加して入力の優しさヒントとして表示させておくといいかと思えます。url)input要素の属性にurlを記述してURLを入力するフィールドになります。type=”url”>URL:urlを入力するフィールドではurl以外を入力してしまうと「URLを入力してください」と入力エラーの表示が現れます。以下のような書き方をしてみました。value="URL以外はエラー"></form>placeholderで入力例を表示させておくと優しさフォームになり入力間違いが減るかと思います。email)お次はinput要素の属性に「email」を記述してメールアドレスを入力するフィールドです。type=”email”>メール:メールアドレスを入力できるフィールドなので、メール形式の入力ではない入力がされたときは、以下のようなエラー表示してくれます。メールアドレス以外を入力して送信しようとすると「メールアドレスに@を挿入してください」と表示されるので適したフィールド作成ができます。メールアドレスの形式に対応させたいフォーム作成で使っちゃってください。placeholder="メールアドレスを入力">sizeで入力幅の指定、maxlengthで最大入力文字数、placeholderで入力する例などを加えることによりフィールドを使いやすくできます。date)ここから5種類のinput要素のtype属性の属性値は日付関係が続きます。日付が「年月日」からです。type=”date”>年月日:dateを指定すると日付を入力するフィールドが「年、月、日」を入力することができます。value="2019-08-01">minで入力するときの最小日付の指定maxで入力するときの最大日付の指定フィールド内の一番右の三角をクリックするとカレンダーが表示されます。初期値の表示は各ブラウザによって異なるようです。その場合value属性を指定しおくということになるかと思います。month)次の日付の入力フィールドは「年、月」の入力フィールドです。type=”month”>年月:minで入力するときの最小日付の指定maxで入力するときの最大日付の指定input要素のtype属性の値、monthは先述したdateの日だけがない日付というだけの違いです。week)次の日付関係は、「年、週」を入力できるフィールドです。type=”week”>年週:日付の入力が「年と週」の入力フィールドは月曜が週の始まりのカレンダーで週の選択ができます。選択後の週表示は「第何週」のように表示されるだけです。個人的にはなんか使いづらく感じました。time)はい次は時間のフィールドです。input要素のtype属性に「time」を指定します。type=”time”>時間:timeを記述することによって「時と分」が入力できる時間フィールドが表示されます。value="10:00:00">minで最小時間の指定ができて、maxで最大時間を指定して時間の入力範囲を指定できます。「step=””」を記述すると秒が表示され入力可能になります。時間フィールドで秒まで入力できるようにしたいときは、例えば「step=”1′′」とすると1秒単位になり、10にすると10秒刻みでコントロールできます。datetime-local)こちらの日付フィールドは先ほどまでの日付関係のtype属性の合体作のようなフィールドです。type属性の属性値に「datetime-local」を指定します。type=”datetime-local”>年月日時分:年、月、日、分の入力ができるフォームです。秒を刻みたい場合はstepを指定してあげてください。フィールド内の下矢印のアイコンでカレンダー表示できます。HTML5から追加されていた「datetime」もあったようなのですが、廃止になってるようで代わりに今説明した「datetime-local」の使用を推奨しています。number)次は番号を入力するフィールドです。type=”number”>番号:数字を入力できるフィールドはinput要素のtype属性の属性値に「number」を指定してあげてください。フィールドで入力する番号は、小数点にすることもできました。max=”10′′>番号:sizeでフィールド幅を広げて、stepで番号のカウントを小数点でカウントできるようにしてます。小数点のカウントはminで最小値を0までしか指定できないようにして、maxで最大数は10まで入力できるようにするとかしてみました。番号を使う用途によってコントロールができます。range)inout要素の属性に「range」を属性値で指定します。すると以下のようなスライダーを表示できます。type=”range”>スライダー:スライダーは大まかな数値の入力をするときに使うことができます。上記のサンプル的なスライダーは、value属性を記述して初期値を「-5」にして「こっそり」に近づけて近所迷惑にならないようにしていきました。最後のtype属性に使うのは「color」を属性値にします。value=”#aab1ff”>カラー:colorを指定したinput要素は色の選択を入力ができるフィールドを作成できます。valueも記述して16進数のカラーコードを書いておけば初期値のカラーとして表示されます。色の候補を作成して表示することもできます。value="#ff67c5"></option></datalist>datalistでidをつけたら、そのidに好きなid名をつけてoptionで好きな色の候補をつけてあげてください。色の候補は、色のフィールドについてる上下の矢印をクリックすると候補の色が表示できます。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.12.06HTMLでnoindexタグを書くときは、どのような書き方をすればいいのか理解できるようにしておこうと思います。2019.09.20HTMLで要素をマークアップするときに指定する方法に「id」や「class」の属性をつけて指定する方法があります。2019.06.09HTMLでヘッダーを作る勉強です。WordPress.。