<input>タグとは
<input>タグとは、入力フォームにおける様々なボタンやチェックボックスなどを配置することが出来るタグになります。ここで重要なのは、HTMLで作れるのはほんの基本のフォームだけだということ。送信ボタンを押すとデータが飛んで…みたいな厳密な働きはプログラムを使用します。しかしながら本当に色々なフォームが作れますので、ひとつひとつ見ていきましょう。
<input>タグで作成できるフォーム
<input>タグで作成できるフォームで指定できる属性はこちらになります。↓
| キーワード | 状態 | データ型 | コントロールの種類 |
|---|---|---|---|
| hidden | 隠れた | 任意の文字列 | 該当なし |
| text | テキスト | 改行のないテキスト | テキスト コントロール |
| search | 検索 | 改行のないテキスト | 検索コントロール |
| tel | 電話 | 改行のないテキスト | テキスト コントロール |
| url | URL (英語) | 絶対 URL | テキスト コントロール |
| 電子メール | メールアドレスまたはメールアドレスのリスト | テキスト コントロール | |
| password | パスワード | 改行のないテキスト (機密情報) | データ入力を隠すテキスト コントロール |
| date | 日付 | タイムゾーンのない日付(年、月、日) | 日付コントロール |
| month | 月 | タイムゾーンのない年と月で構成される日付 | 月単位のコントロール |
| week | 週 | 暦週の年番号とタイムゾーンのない週番号で構成される日付 | 週のコントロール |
| time | 時間 | タイムゾーンのない時刻 (時、分、秒、秒の小数部) | 時間コントロール |
| datetime-local | ローカルの日付と時刻 | タイムゾーンのない日付と時刻 (年、月、日、時、分、秒、秒の端数) | 日付と時刻のコントロール |
| number | 数 | 数値 | テキスト コントロールまたはスピナー コントロール |
| range | 範囲 | 正確な値が重要ではないという追加のセマンティクスを持つ数値 | スライダー コントロールなど |
| color | 色 | 赤、緑、青の 8 ビット成分を持つ sRGB カラー | カラーピッカー |
| checkbox | チェックボックス | 定義済みリストからの 0 個以上の値のセット | チェックボックス 複数項目の中から複数チェック可能 |
| radio | ラジオボタン | 列挙値 | ラジオボタン 複数項目の中から１つだけチェック可能 |
| file | ファイルのアップロード | それぞれが MIME タイプを持ち、オプションでファイル名を持つ 0 個以上のファイル | ラベルとボタン アップロードできるファイルの種類の制限やインカメ・外カメの設定など可能 |
| submit | 送信ボタン | 列挙値で、最後に選択された値でなければならず、フォームの送信を開始するという追加のセマンティクスを持つ | Aボタン |
| image | 画像ボタン | 特定のイメージのサイズを基準にした座標で、追加のセマンティクスが必要です 最後に選択された値になり、フォームの送信を開始します | クリック可能な画像、またはボタン |
| reset | リセットボタン | 該当なし | Aボタン |
| button | ボタン | 該当なし | Aボタン 今はこれよりも<button>タグ推奨 |
追加属性
各属性には追加で属性を付けることが可能です。基本的にはこれらになります。おおまかな機能は一緒です。
| 追加属性 | 効果 |
|---|---|
| name | phpやjavascriptで入力された値を送信する際に使用 |
| id | <label>タグで飛ばしたいところを設定する |
| list | <datalist>タグ内のID。inputの機能をより良いものにしてくれる便利なタグ 例：rangeタイプにメモリを付加してくれる |
| maxlength | 最大文字数を設定できる。設定しない場合は最大数が無くなる。 |
| minlength | 最小文字数を設定できる。設定しない場合は最小数が無くなる。 |
| required | 入力を必須にする。空白の場合エラー文を吐く。 書き方は <input type=”text” required>か<input type=”text” required=”required”> |
| pattern | 入力してある内容が、入力してほしい内容に適しているかを判断する<input pattern="[a-z]{1,3}" /> この例では1～３文字のローマ字で入力しなければならないと指定しています。書式：[]この中に書式の指定をします。例えば[a-z]a～z、つまりローマ字指定。[0-9]0～9の間、つまり数字指定。 {}この中に範囲を指定します。例えば{1,3}は１～３文字、{3}これは３文字のみです。 詳しい書式についての解説はこちらをご確認ください。 |
| title | patternを指定したときは、入力例としてtitle属性を付けるとわかりやすくなります （カーソルを合わせるとtitleに入力した文字が表示される） |
| size | 一度に見える文字数を指定する |
| placeholder | 入力アシスト。規定値を薄く表示 |
| value | 規定値の入力 |
| autocomplete | フォーム入力欄の値を埋めるための自動支援の必要の有り無しを指定できます<input> 要素、<textarea> 要素、<select> 要素、<form> 要素で利用可能です。 |
| inputmode | 何かを入力する際、表示されるキーボードを変更する 値→ decimal（数字と_などの記号）、numeric（0から9までの数字のみ必要）例：暗証番号を入力する際などは、半角英数字 |
inputmode属性
inputmode属性とは、何かを入力する際に表示されるキーボードを変更します。例えば暗証番号を入力するフォームの場合、半角数字以外を入力すると何も反映されず、半角数字のみを受け付けました。↓
<input type="number" inputmode="numeric">また、iPhoneではこのように自動的に数字のみのキーボードが表示されました。↓
他にもメールやらなんやらと使えるものはあれど、それらについてはtype=””の””内で各属性の値を指定すれば済む話のようだったので（メールの場合はtype=”email”）ここで使えるのはdecimal（数字と_などの記号）と、numeric（0から9までの数字のみ必要）この２パターンかなと。
autocomplete属性の値
autocomplete属性は、フォーム入力欄の値を埋めるための自動支援の必要の有り無しを指定できます。↓
| 値 | 機能 |
|---|---|
| on | 自動補完を使用する。 |
| off | 自動補完を使用しない。 なおoffにしていてもブラウザ側から保管していたパスワードを使いますか？と尋ねられる可能性がある。 |
| name | 名前（苗字とか名前は分けない。分けるとデータの管理が大変になるため、出来るだけnameで行った方が良いかも？） |
| honorific-predix | 敬称・肩書など（Mr, Mrsなど…日本語ではあまり使わないかも知れません） |
| given-name | 名前（ファーストネーム）例：田中花子なら花子の方 |
| additional-name | ミドルネーム 例：J・K・ローリングならK |
| family-name | 苗字（ラストネーム） |
| honorific-suffix | 名前の後ろに敬称（様, Ⅱ, Jr など） |
| nickname | ニックネーム・ハンドルネーム |
| username | ユーザー名・アカウント名 |
| メールアドレス | |
| new-password | 新しいパスワードを設定する。firefoxでは新パスワードを提案される |
| current-password | 現在のパスワード |
| one-time-code | ユーザー確認に使用されるワンタイムパスコード |
| organization | 企業・団体・組織名 |
| organization-title | 組織内での肩書・役職（社長、専務など） |
| street-address | 住所の番地など。複数行のテキストが使用可能。 |
| address-line1 | 住所の番地などを３つに分けたもので ↑street-addressを置いていないときだけ使用可能です。 street-addressがひとつでaddress-line1とaddress-line2の機能を担います。 |
| address-line2 | 住所の番地などを３つに分けたもの。Androidでは表示されない可能性あり。 |
| address-line3 | 住所の番地などを３つに分けたもの。基本的には使わない |
| address-level4 | address-level3 よりも後ろにつく住所の末尾。基本的には使わない |
| address-level3 | 市区町村名の後ろにつく町名など。基本的には使わない |
| address-level2 | 市区町村名 例：大田区、目黒区 Androidでは表示されない可能性あり。street-addressの方が安全に表示されるかも知れません。 |
| address-level1 | 都道府県名 例：福岡県、北海道、富山県 |
| country | 国コード |
| country-name | 国名 |
| postal-code | 郵便番号 |
| cc-name | クレジットカード支払者の名前 |
| cc-given-name | クレジットカード支払者の下の名前（ファーストネーム） |
| cc-additional-name | クレジットカード支払者のミドルネーム |
| cc-family-name | クレジットカード支払者の苗字（ラストネーム） |
| cc-number | クレジットカード番号 |
| cc-exp | クレジットカードの有効期限 “MM/YY” または “MM/YYYY” の形です。 |
| cc-exp-month | クレジットカード有効期限の月 |
| cc-exp-year | クレジットカード有効期限の年 |
| cc-csc | クレジットカードのセキュリティコード。大体カードの裏に書かれた3桁の認証番号 |
| cc-type | クレジットカードの種類（Visa, JCB, Master Card など） |
| transaction-currency | 支払い通貨 |
| transaction-amount | 支払額。transaction-currencyに準ずる。 |
| language | 言語 |
| bday | 生年月日の全体 |
| bday-day | 生年月日の日の部分 |
| bday-month | 生年月日の月の部分 |
| bd-year | 生年月日の年の部分 |
| sex | 性別 |
| tel | 国コードを含む、完全な電話番号 |
| tel-country-code | 電話番号の国コード 例：日本は+81 |
| tel-national | 国コードを含まない電話番号 いつもの番号 |
| tel-area-code | 市外局番 |
| tel-local | 国番号や市外局番を含まない電話番号 “015-8888” という電話番号では “ tel-local-prefix” は “015”、 “tel-local-suffix” は “8888” |
| tel-extension | 内線番号 |
| impp | IMPP（Instant Message and Presence Protocol・インスタントメッセージプロトコル）の URL 異なるインスタントメッセンジャーの間で相互通信するためのプロトコル（ルール）。インスタントメッセンジャーというのは気軽に連絡の取れるツール。例えばLINEやWhatsAppなど。 |
| url | ホームページやウェブサイトなどのURL |
| photo | 画像のURL |
pattern属性の書式
pattern属性の書式はjavascriptのものになります。
| メタ文字 | 説明 | 使用例 | 一致する文字列の例 |
|---|---|---|---|
| [] | カッコ内のいずれかの文字を示す | [aiu] | “a”、“i”、“u”のみがヒット |
| [^] | カッコ内の文字以外の文字を示す | [^aiu] | “え”、“9”、“c”など、aiu以外がヒット |
| [A–Z] | AからZの中からいずれか1文字 | [A–Z] | “A”、“T”、“Z”など。小文字はノーヒット |
^[\u3040-\u309F]+$ | あ～わの中の１文字 | ^[\u3040-\u309F]+$ | 「あ」「い」「う」などのひらがな u3040はユニコードの「あ」 |
^[\u30A0-\u30FF]+$ | アからワの中の１文字 | ^[\u30A0-\u30FF]+$ | 「ア」「カ」「ン」などのカタカナ u30A0はユニコードの「ア」 |
| ^ | ^の次の文字が先頭であることを示す | ^n | “nori”、“nazo”など |
| $ | $の直前の文字が最後に来ることを示す 改行がある場合は改行(改行コード)の直前 | o$ | “foooooooooo”、“no”など |
| * | *の直前の文字を0回以上連続で繰り返す | m* | “momo”、“omg”など |
| + | 直前の文字を1回以上連続で繰り返す | s+ | “simeji”、“sisyamo”の中の一カ所 |
| ? | 直前の文字を0回もしくは1回だけ繰り返す | i? | “ichi”、“ikemen” |
| () ()+ | 複数の文字で構成される文字列。他の文字と使用 | (hataraku)+kuruma | “hatarakuhatarakukuruma”、“hataraku”など （）で囲まれた部分は繰り返すことも可能 |
| | | |で区切られたいくつかの文字 | 日替わり|ランチ | “日替わり”もしくは“ランチ” |
| (|) | |で区切られたいくつかの文字を文章の中で判定 | 今日は(みかん|りんご)にしようかな | ヒットするのは「今日はみかんにしようかな」と「今日はりんごにしようかな」 |
| {} | 文字数指定 | [a-z]{3} | 小文字ローマ字３文字。”acb”,”ich” |
| a{n} | 指定回数の繰返し “n”には繰り返す回数を入れる | a{3} | “aaai”の最初の”aaa”,”aaaiaaa”の最初と最後の”aaa” |
| {n,} | 指定回数以上の繰返し “n”には繰り返す回数を入れる | e{3,}co | “eeeco”の最初の”eee”、“eeeeeco”の最初の”eee” |
| {n,m} | 指定回数範囲内の繰返し “n”,”m”には数字を入れる。 n個以上、m個以下 | a{2,4} | “aai”、“aaaai” |
| . | 改行以外の任意の1文字 スペースも含む | . | “A”、“あ”、“#”など |
\ | メタ文字の前につけることで、メタ文字を単なる文字として認識させる | \\ | \がヒット |
\u | 半角英大文字すべて | \u | “A”、”C”など |
\U | 半角英大文字以外すべて（英小文字、数字、全角文字などすべて） | \U | “0”、”あ”、”c”など |
\w | 英数字とアンダースコア 同意義別表記→(“[A-Za-z0-9_]”) | \w | “A”、“a”、“_”など |
\W | 英数字とアンダースコア以外 同意義別表記→(“[^ \w]”、“[^A-Za-z0-9_]”) | \W | “あ”、“#”など |
\d | 数字 同意義別表記→(“[0-9]”) | \d | “0”、“1”、“8”など |
\D | 数字以外 同意義別表記→(“[^ \d]”、“[^0-9]”) | \D | “A”、“a”、“あ”、“#”など |
\s | 空白文字 | \s | “ ”、“ ” |
\S | 空白文字以外 同意義別表記→(“[^ \s]”) | \S | “A”、“a”、“1”、“あ”、“#”など |
バックスラッシュが表示されない問題
補足ですが、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タイプとは、検索フォームを作成するための属性になります。ちなみに検索ボタンはまた別の属性になるので、ここでは検索するテキストを入力するためのフォームが作成されるだけです。↓
これに検索ボタンを付けてページ内検索を行うことも可能です。詳細は下のリンクを参照してください。
注意点・textタグとの違い
serch属性はHTML5から導入されたタグになります。
ほとんどのブラウザで対応していますが、対応していない（HTML4の）ものには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で行うようにしましょう。詳しい記事はこちらをご参照ください。↓
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単位で数字が増えるようにすることもできます。
<input type=”number” step=”10″>
右の方にある上下の矢印を押すと、10単位で数字が増えていくのが分かると思います。
rangeタイプとは
rangeタイプとは、このようなフォームを作成するタイプになります↓
主にこれらの用途で使用されます。↓
- BGMやSEの音量調整
- 色や明度などの調整
- パスワードマネージャーが生成するパスワードの長さ
- アンケートなどで使用する、好感度を表すメーター等
こちらも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>はもともと使うけど）
colorタイプとは
colorタイプとは、このようなカラーピッカーを表示させることが可能です。↓
<input type=”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（ファイルの種類の制限）
- capture（インカメ外カメの指定）
- multiple（複数ファイルを指定）
- required（ファイルの選択を必須にする）
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には無関係でスマートフォンなどの端末で活躍します。
スマホを使っている人にはわかると思いますが、自撮りするときに内側のカメラを使ったり、景色を撮影したりしますよね。その切り替えがここでできます。
user…インカメ（内側のカメラが起動）environment…外側を撮影するカメラが起動
ここで指定した値でどの機能が起動するのかは、accept属性に付属します。例えばaccept属性にカメラを指定しuserを指定したら開くのはインカメ撮影モードです。
<input type="file" id="kamera" capture="user" accept="image/*" />
→インカメでカメラモードが起動する
<input type="file" id="video" capture="environment" accept="video/*" />
→外向けのカメラで動画モードが起動する気になる方はお手持ちのスマホで実際にやってみてください。↓
multiple属性
multiple属性は、ファイルを選択する際に複数のファイルを選択できるようにする属性です。
こっちが複数選択multipleあり→こっちがmultipleなし→
<input type="file" id="file" name="file" multiple>submitタイプとは
submitタイプは、送信ボタンを作るものになります。↓
<input type="submit" id="sousin" name="sousin">このボタンをクリックすると、各フォームで入力した内容が自分自身のページに送られます。教科書通りにいくと<form>タグのaction属性で設定した送信先に情報が飛ぶのですが、action属性にはいろいろなアレがアレなんで、何も指定しないのが正解（かつformを使うページはphpのページにした方がよさげ）のようです。↓
ちなみに、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タイプの属性
属性としてはこんな感じです。↓
| alt | 画像が表示できない場合の代替文字列 |
| formaction | 文字列でデータの送信先のURLを示す。<form>のaction属性より優先される |
| formenctype | サーバーに情報を送る際のエンコーディング方法を指定 エンコーディングとは、データを一定の規則に従って、目的に応じた情報に変換すること ・application/x-www-form-urlencoded（規定値）URL エンコーディングして送信 URLエンコーディングとは、URLに含めることができない文字をパーセント記号と16進数で表現する方法 ・multipart/form-data 複数のファイルをサーバーに送信する ・text/plain プレーンテキスト（なんの装飾も施されていないテキスト）送信されたデータを見ることが可能 ・formenctype 所属する<form>のaction要素を上書きする（submitでも指定可能） ・formmethod ・get/post/dialog dialogはボタンが入力に関連するダイアログを閉じ、フォームデータを全く送信しないようにする |
| formnovalidate | サーバーに送信する前にフォームの検証を行わない |
| formtarget | 文字列で、フォームを送信した後受け取ったレスポンスを表示する場所を示す名前またはキーワードを指定 |
| width | 幅（高さまで指定しなければ等幅のまま調整してくれる） |
| height | 高さ（幅まで指定しなければ等幅のまま調整してくれる） |
| src | 画像のURLを指定 |
幅と高さは、幅だけ指定すると幅と高さの割合をキレイに保ったまま調整してくれます↓
<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>タグというものが登場しているので、気になる方はこちらの記事を参照してください。