HTML・CSS：入力フォームの作成をするinputタグ

<input>タグとは

<input>タグとは、入力フォームにおける様々なボタンやチェックボックスなどを配置することが出来るタグになります。ここで重要なのは、HTMLで作れるのはほんの基本のフォームだけだということ。送信ボタンを押すとデータが飛んで…みたいな厳密な働きはプログラムを使用します。しかしながら本当に色々なフォームが作れますので、ひとつひとつ見ていきましょう。

<input>タグで作成できるフォーム

<input>タグで作成できるフォームで指定できる属性はこちらになります。↓

追加属性

各属性には追加で属性を付けることが可能です。基本的にはこれらになります。おおまかな機能は一緒です。

inputmode属性

inputmode属性とは、何かを入力する際に表示されるキーボードを変更します。例えば暗証番号を入力するフォームの場合、半角数字以外を入力すると何も反映されず、半角数字のみを受け付けました。↓

<input type="number" inputmode="numeric">

また、iPhoneではこのように自動的に数字のみのキーボードが表示されました。↓

他にもメールやらなんやらと使えるものはあれど、それらについてはtype=””の””内で各属性の値を指定すれば済む話のようだったので（メールの場合はtype=”email”）ここで使えるのはdecimal（数字と_などの記号）と、numeric（0から9までの数字のみ必要）この２パターンかなと。

autocomplete属性の値

autocomplete属性は、フォーム入力欄の値を埋めるための自動支援の必要の有り無しを指定できます。↓

pattern属性の書式

pattern属性の書式はjavascriptのものになります。

バックスラッシュが表示されない問題

補足ですが、Wordpressで\（バックスラッシュ）を入力すると勝手に￥マークに変換されて表示されてしまうので、そういう時はここを選択↓

して、バックスラッシュを入れたいところに

<span style="font-family: Arial;">\</span>

と入力すれば上手い具合にバックスラッシュが表示されます。↓

\

別HPでも\が￥表記になっているのを確認しました。正しくは\の方なので、表現方法がいくつかあるわけではなく、HP上の表示が上手くいっていないだけということを頭の片隅に置いておくと混乱せずに済むかも知れません。

hiddenタイプとは

hiddenタイプとは、入力フォームから送信されたデータの中に、ユーザーには見えないようにデータを含ませることが出来るタイプになります。（完全に見ている側の人ではなく作った側に影響のある属性）ただHTMLのソースコードは公開されているので、何が送られているかを誰でも見ることが出来るので、セキュリティ面では何の意味も持たず、個人情報に関わることなどをここに含ませるのは危険です。例えばサイト内で管理者側が割り振ったユーザーIDなどを管理したいときなどに使用するときなどに使用できるかも知れません。

↑ここに隠れた入力フォームがあるのですが、見えませんよね。ここに何かしらの情報を含ませてデータを送信するイメージです。この例では数字の1234を送信しています。このように密かに顧客ナンバーのようなものを振ることも可能です。実際のタグはこちら。↓

<input type="hidden" id="kokyakuno" name="kokyakuno" value="1234">

textタイプとは

textタイプとは、短い文章を入力するためのフォームを作るためのタイプです。↓

<input type="text" name="onamae" id="onamae" required minlength="4" maxlength="8" size="10" placeholder="ここに入力"/>

このタイプのテキストフィールドは改行が出来ないので、お問い合わせの件名や名前、住所などの比較的短めな（改行する必要のないくらいの長さの）テキストを入力する際に使用します。

searchタイプとは

searchタイプとは、検索フォームを作成するための属性になります。ちなみに検索ボタンはまた別の属性になるので、ここでは検索するテキストを入力するためのフォームが作成されるだけです。↓

これに検索ボタンを付けてページ内検索を行うことも可能です。詳細は下のリンクを参照してください。

HTML・CSS：Webサイト内・外での検索機能を持たせるsearchタグ・ページ内検索の方法

HTML・CSS：Webサイト内・外での検索機能を持たせるタグ・ページ内検索の方法

111111monji.com

2023.11.06

注意点・textタグとの違い

textタイプとの違いは、serchタイプはHTML5にしか対応していないことと、ブラウザによって見た目が少し違うことの２点くらいです。なのであまり違いはありません。
ブラウザで見たときの違いのお話ですが、例えば下の画像はchromeで見たときのものです。×マークが付き、これを押すと入力していた文字が一瞬で削除されます。

telタイプとは

telタイプとは、電話番号を入力するためのフォームを作成するタイプになります。↓

見た目的には普通のテキスト入力フォームと変わらないかも知れませんが、スマホなどの携帯端末から入力をしようとすると自動で半角になったりする機能もある場合があります。
また、この例の場合は追加のplaceholderタイプで入力例を表示させ、patternタイプを指定することでテンプレ通りの入力でなかった場合特定のアイコン（×）が表示されるようになっています。このアイコンに関してはCSSで追加することが可能です。

<input tipe="tel" pattern="[0-9]{4}-[0-9]{2}-[0-9]{4}" title="固定の電話番号" placeholder="1234-56-7891" minlength="12" maxlength="12" required>
<span class="validity"></span>

CSS↓正しく入力されていれば〇を、されていなければ×を表示

input:invalid + span::after {
  position: absolute;
  content: "×";
  padding-left: 5px;
  color: black;
}

input:valid + span::after {
  position: absolute;
  content: "〇";
  padding-left: 5px;
  color: red;
}

urlタイプとは

urlタイプとは、urlを入力するためのフォームを作成するときに使います。

<input id="URL" name="URL" type="url" placeholder="http://111111monji.com/" value="http://111111monji.com/"/>

この場合、placeholderで入力例を示しており、さらにその上から規定値を入力しています。なので規定値を消したとしてもしつこく我がHPのURLが表示される仕組みです（笑）

emailタイプとは

emailタイプとは、emailを入力するためのタイプになっています。↓

<input type="email" name="email" size="40"placeholder="nyuuryokurei@example.com">

emailタイプは、これまでの属性のように入力する際のフォーマットを指定（pattern属性）しなくても勝手にemail形式で入力されているかを判断してくれます。

この例ではchromeとfirefoxの表示のされ方をスクショしているのですが、email形式でないものを入力した場合、両者とも「メールアドレスを入力してください」とアラートが出るようになっています。※ちなみにedgeでは何も表示してくれませんでした…。

ひとつの入力フォームの中に複数のemailを含ませることも可能です。

<input id="emailAddress" type="email" multiple>

このmultipleを付けると、複数のメールアドレスを入力することが可能になります。この場合空欄でも値が通る（入力されてなくてもOK）ということになってしまうので、そこだけ注意が必要です。

passwordタイプとは

passwordタイプとは、ログインが必要なHPの場合パスワードを安全に入力するためのフォームとなっています。

<input type="password">

入力時の動作はブラウザによって異なります。例えばedgeの場合は

このように、入力フォームの右の方に目のようなアイコンが付き、これが付いてる状態では入力したものが●で隠されていますが、目のアイコンを押すと入力した内容が見られるようになっています。

パスワードの入力が必要な場合は通信の内容が暗号化されているhttpsで行うようにしましょう。詳しい記事はこちらをご参照ください。↓

HTML・CSS：http://とhttps://の違い・https化の方法【Wordpress＆Xserver】

HTML・CSS：http://とhttps://の違い・https化の方法【Wordpress＆Xserver】

111111monji.com

2023.12.03

autocomplete属性

また最近ではよく見られる、入力したパスワードを記憶させておくことも可能です。オートコンプリート属性というのですが、この値を指定することによってブラウザー、またはパスワードマネージャがパスワードを自動で入力してくれたりするようになります。
このオートコンプリート属性には様々な値を指定することが出来るので、詳しくはこちらの一覧をご確認ください。

ここでは１つの例を示したいと思います。例えばautocompleteの値を「newpassword」（新しいパスワードを設定しますよ）とした場合…

<input type="password" autocomplete="new-password">

firefoxではこのような表示がされました。↓

これはブラウザ側が、新しいパスワードを設定する際に「このようなパスワードはいかがでしょうか？」と提案してきているところです。ブラウザによってはこのような機能を持たせることが可能だということですね。

dateタイプとは

dateタイプとは、簡単に日付を入力出来るようにしてくれるフォームになります。↓

<input type="date">

入力フォームの右の方にカレンダーのようなものが表示されるので、そこから日付を指定してもOKです。value属性を使えば初期値を設定できますし、カレンダーの位置もそこからスタートすることが出来ます。

<input type="date" value="2023-11-29">

また、minとmaxを使って期間を定めて入力してもらう方法もあります。（何かの予約システムなどに有効かも知れませんね）

<input type="date" min="2023-12-01" max="2023-12-20">

これ、注意しないといけないのが、飽くまでも指定する方法はXXXX-XX-XXこのテンプレートに則ったやり方でなければならないということ。期間限定にしたいのに全然上手く表示してくれない～と涙目になりながら入力していたのがこれでした。↓

<input type="date" min="2023-12-1" max="2023-12-20">

お気づきだろうか…。minの値ですが”2023-12-1″ここに誤りがあったせいで上手く動作していませんでした。正しくは”2023-12-01″だったのです…。

また、普通に入力しようとすると年の部分が6桁入ることになってしまいますので、このようにすることで4桁にすることも可能です。↓

<input type="date" max="9999-12-31">

ただ、こうするとmaxを使うことが出来なくなってしまいますけどね…。

monthタイプとは

monthタイプとは、日付の何月何日の「何月」の部分を入力するためのフォームになります。↓

<input type="month">

こちらもmaxとminを使うと、選択できる範囲を定めることが出来ます。

<input type="month" min="2024-01" max="2024-02">

気を付けるべきはまた型になります。指定の仕方をミスると上手く動作しませんでした。失敗例↓

<input type="month" min="2024-01-01" max="2024-02-28">

このマークを付けている部分が不要な部分でした。

また、valueで初期値を設定することも可能です。

<input type="month" value="2023-11">

weekタイプとは

weekタイプとは、週を選択するためのフォームになります。↓

<input type="week">

こちらもmaxとminを使うと、選択できる範囲を定めることが出来ます。

ここでも桁数に気を付けてください。１周目でも1ではなく01になります。

<input type="week" min="2017-W01" max="2018-W52">

第１週というのが1月の１日から始まる週で、そこからスタートになります。
こちらもvalueで初期値を設定することが可能です。

<input type="week" value="2024-W01">

ただ、ブラウザによっては上手く反映してくれないこともあるようです。safariで見たときにこのように表示されてしまいました。↓

普通ならただのテキストボックスになって表示されるはずなので、サイズの設定などをしていれば適度に入力できるのかも知れませんが…このボックスは触っても入力することが出来ませんでした。結局のところブラウザによって表示の仕方が異なるため、プルダウン形式で日にちを選択してもらうなり、そもそも週の入力自体を別の方法に変えたほうが安全かも知れません。

timeタイプとは

timeタイプとは、時間を入力するためのフォームになります。↓

<input type="time">

valueで初期値を設定することも可能です。

<input type="time" value="07:00">

また、maxとminを使って入力可能な時間を制限することも可能です。

↑該当の時間でない時間を入力したときに注意文が表示されるようになります。

datetime-localタイプとは

datetime-localタイプとは簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力フォームを作成します。

ただ、こちらのタイプもブラウザによって見え方が違う（反映されずにただのテキストボックスになる可能性の方が高い）ので、別の入力方法で同じ情報の取り扱いをすることを考えたほうが良いかもしれません。実際edgeもsafariもただのテキストボックスになってしまったので、dateタイプで代用するなりした方が良い気がします。

numberタイプとは

numberタイプとは数字のみを入力させる為のフォームになります。↓

<input type="number">

iphoneで見たときには、このように数字と記号のキーボード表示になりました。

また、maxとminを使って最低数と上限数を定めることも可能です。
↓の例は0～100までを想定しています。

<input type="number" max="100" min="0">

ブラウザはedgeですが、このように範囲外の数字を入力した場合は注意文が表示されるようになります。
ステップというものも定めることが可能です。例えば10単位で数字が増えるようにすることもできます。

右の方にある上下の矢印を押すと、10単位で数字が増えていくのが分かると思います。

rangeタイプとは

rangeタイプとは、このようなフォームを作成するタイプになります↓

主にこれらの用途で使用されます。↓

こちらもmaxとminを使うことによって最低値と最高値を設定することが可能です。

<form oninput="result.value=maxmin.value">
<input type="range" max="50" min="20" name="maxmin" value="50">
<output name="result" for="maxmin">50</output>
</form>

こちらは<output>タグが無いと値を参照することが出来ないので、使用する場合は<output>タグと<form>タグを同時に使う必要が多そうです。（<form>はもともと使うけど）

HTML・CSS：プログラムの計算結果を表示するoutputタグ・formタグ

HTML・CSS：プログラムの計算結果を表示するoutputタグ・formタグ

111111monji.com

2023.12.25

colorタイプとは

colorタイプとは、このようなカラーピッカーを表示させることが可能です。↓

基本的な使い方としては、input type=””の””この中でcolorを指定してあげるだけになります。

この機能が活躍する場でパッと思いつくのはjavascriptを使った機能で、SVG形式で作られたイラストの好きな箇所を自分の好きな色に変換することが出来たり、文字や装飾の色を自分の好きな色に変換出来たりなどでしょうか。これ、作り方が分かったらまた解説記事を書きたいなと思っています。

checkboxタイプとは

checkboxタイプとは、このようなチェックボックスを作ることが出来るタグです。↓

よく似たものでラジオボタンというものがありますが、ラジオボタンは複数の項目の中から１つしか選べないのに対し、チェックボックスは複数の項目の中で複数の選択をすることが可能です。

使い方（値の取得方法）としては、こんな感じでvalueを設定すると分かりやすいと思います。valueの値はかぶらないようにしましょう。

<input type="checkbox" name="ichimonji" value="ichimonji">いちもんじは<br>
<input type="checkbox" name="ichimonji" value="ikemen">イケメン<br>
<input type="checkbox" name="ichimonji" value="kakkoii">かっこいい<br>

name=””の中身をすべて同じにしているのは、同じグループであることを示しています。
複数の項目で複数のチェックボックスを使う際には、どの問いに対してのチェックボックスなのかが分からなくなるので、それを防ぐためにこのnameを使ってどの塊にいるのかを示します。

<form>
<p>
<input type="checkbox" name="ichimonji" value="ichimonji">いちもんじは<br>
<input type="checkbox" name="ichimonji" value="ikemen">イケメン<br>
<input type="checkbox" name="ichimonji" value="kakkoii">かっこいい<br>
</p><br>
<p>
<input type="checkbox" name="game" value="noberu">ノベルが<br>
<input type="checkbox" name="game" value="ichiban">一番<br>
<input type="checkbox" name="game" value="iiyone">いいよね<br>
</p>
</form>

radioタイプとは

radioタイプとは、このようなラジオボタンを作成することが出来るものになります。↓

<form>
<input type="radio" name="radio" value="yes">はい<br>
<input type="radio" name="radio" value="no" checked>いいえ
</form>

見て頂いたらお分かりかと思いますが、ラジオボタンというのは複数の項目の中から一つの項目しか選択することができません。
どれがどのグループなのか設定するために、同じ項目ならばname=””で同じ名前を設定する必要があります。

checked属性

checked属性は、ラジオボタンの項目の中で始めから選択してある項目（初期値）にします。何も値を設定する必要はなく、初期値にしたいものにcheckedと書くだけでOKです。

<form>
<input type="radio" name="radio" value="yes">はい<br>
<input type="radio" name="radio" value="no" checked>いいえ
</form>

fileタイプとは

fileタイプとは、サーバーに何かしらのデータをアップロードしたいときにファイルの選択をするためのボタンを設置するものです。↓

このボタンだけ見ると「えっ？何のときに使うやつだっけ？」とはなりませんか？
多分こんな形にするともっと分かりやすいと思います。↓

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">追加したいファイルの選択</label><br>
    <input type="file" id="file" name="file" multiple />
    <button>送信</button>
  </div>
</form>

fileタイプの属性

accept属性

accept属性はファイルの種類の制限をします。具体的に言うと、ファイルの拡張子を指定・もしくはMIMEタイプを指定します。
例えば画像だけを受け付けたいのであればこのような記述になります。↓

<input type="file" id="nandemo" accept=".png,jpg,gif">

拡張子を複数指定したい場合はこのように,（半角のカンマ）で区切って指定しましょう。
仮にすべての画像形式を指定したいときはこのように記述します。↓

<input type="file" id="nandemo" accept="image/*">

ファイルの種類は制限しながらも、すべての形式を選べるようにしたい場合はこのように

と記入すればOKです。

またMIMEタイプを指定したいのであれば、このように記述しましょう。↓

<input type="file" id="nandemo" accept="text/html">

capture属性

capture属性はaccept属性でカメラ・マイクを指定した場合にインカメと外カメのどちら側からデータを撮るかを指定することができます。お察しのこととは思いますが、この機能はPCには無関係でスマートフォンなどの端末で活躍します。
スマホを使っている人にはわかると思いますが、自撮りするときに内側のカメラを使ったり、景色を撮影したりしますよね。その切り替えがここでできます。

ここで指定した値でどの機能が起動するのかは、accept属性に付属します。例えばaccept属性にカメラを指定しuserを指定したら開くのはインカメ撮影モードです。

<input type="file" id="kamera" capture="user" accept="image/*" />
→インカメでカメラモードが起動する
<input type="file" id="video" capture="environment" accept="video/*" />
→外向けのカメラで動画モードが起動する

気になる方はお手持ちのスマホで実際にやってみてください。↓

multiple属性

multiple属性は、ファイルを選択する際に複数のファイルを選択できるようにする属性です。

<input type="file" id="file" name="file" multiple>

submitタイプとは

submitタイプは、送信ボタンを作るものになります。↓

<input type="submit" id="sousin" name="sousin">

このボタンをクリックすると、各フォームで入力した内容が自分自身のページに送られます。教科書通りにいくと<form>タグのaction属性で設定した送信先に情報が飛ぶのですが、action属性にはいろいろなアレがアレなんで、何も指定しないのが正解（かつformを使うページはphpのページにした方がよさげ）のようです。↓

HTML・CSS：フォームを作るformタグ・GETメソッド・POSTメソッド・action属性

HTML・CSS：フォームを作るformタグ・GETメソッド・POSTメソッド・action属性

111111monji.com

2023.11.10

ちなみに、value属性で指定した値がこのボタンに表示されます。

 <input type="submit" id="sousin" name="sousin" value="あああ">

imageタイプとは

imageタイプとは、先ほどのsubmitタイプと同様に送信ボタンを作成するものですが、今回のこのimageタイプは送信ボタンを画像に置き換えるみたいなイメージです。
下の例は検索になっていますが、実際は送信ボタンだと思ってください(笑)

 <input type="image" id="sousin" name="sousin" src="https://111111monji.com/wp-content/uploads/2022/02/検索.jpg">

imageタイプの属性

属性としてはこんな感じです。↓

幅と高さは、幅だけ指定すると幅と高さの割合をキレイに保ったまま調整してくれます↓

 <input type="image" id="sousin" name="sousin" src="https://111111monji.com/wp-content/uploads/2022/02/検索.jpg" width=100>

resetタイプとは

resetタイプとは、フォーム内の入力欄の値すべてをリセットします。基本的にこのボタンを置くと、間違って押してしまった人のストレスが半端ないので置かないのが理想です。

 <input type="reset">

ちなみにこのボタンもvalue属性でボタンに表示される文言を変えることも可能です。

 <input type="reset" value="爆弾設置">

disabledを付けることによってresetボタンの無効化をすることも可能です。↓

<input type="reset" value="Disabled" disabled />

buttonタイプとは

buttonタイプとは、任意のボタンを作成することが出来るものです。↓

リセットボタンやらなんやら以外に何か機能を持たせたいボタンがある場合はこのタイプを作成すると良いと思われますが、今はそのbuttonタイプよりも<button>タグというものが登場しているので、気になる方はこちらの記事を参照してください。

HTML・CSS：idとnameの違い、ボタンや入力フォームと関連付けたテキストを表示させるlabelタグ、送信ボタンを作成するbuttomタグ、入力情報が長くなるテキストを入力するtextareaタグ

HTML・CSS：idとnameの違い、ボタンや入力フォームと関連付けたテキストを表示させるlabelタグ、送信ボタンを作成するbuttomタグ、入力情報が長くなるテキストを入力するtextareaタグ

111111monji.com

2023.12.20