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

<input>タグとは

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

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

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

キーワード状態データ型コントロールの種類
hidden隠れた任意の文字列該当なし
textテキスト改行のないテキストテキスト コントロール
search検索改行のないテキスト検索コントロール
tel電話改行のないテキストテキスト コントロール
urlURL (英語)絶対 URLテキスト コントロール
email電子メールメールアドレスまたはメールアドレスのリストテキスト コントロール
passwordパスワード改行のないテキスト (機密情報)データ入力を隠すテキスト コントロール
date日付タイムゾーンのない日付(年、月、日)日付コントロール
monthタイムゾーンのない年と月で構成される日付月単位のコントロール
week暦週の年番号とタイムゾーンのない週番号で構成される日付週のコントロール
time時間タイムゾーンのない時刻 (時、分、秒、秒の小数部)時間コントロール
datetime-localローカルの日付と時刻タイムゾーンのない日付と時刻 (年、月、日、時、分、秒、秒の端数)日付と時刻のコントロール
number数値テキスト コントロールまたはスピナー コントロール
range範囲正確な値が重要ではないという追加のセマンティクスを持つ数値スライダー コントロールなど
color赤、緑、青の 8 ビット成分を持つ sRGB カラーカラーピッカー
checkboxチェックボックス定義済みリストからの 0 個以上の値のセットチェックボックス
複数項目の中から複数チェック可能
radioラジオボタン列挙値ラジオボタン
複数項目の中から1つだけチェック可能
fileファイルのアップロードそれぞれが MIME タイプを持ち、オプションでファイル名を持つ 0 個以上のファイルラベルとボタン
アップロードできるファイルの種類の制限やインカメ・外カメの設定など可能
submit送信ボタン列挙値で、最後に選択された値でなければならず、フォームの送信を開始するという追加のセマンティクスを持つAボタン
image画像ボタン特定のイメージのサイズを基準にした座標で、追加のセマンティクスが必要です 最後に選択された値になり、フォームの送信を開始しますクリック可能な画像、またはボタン
resetリセットボタン該当なしAボタン
buttonボタン該当なしAボタン
今はこれよりも<button>タグ推奨
HTML 標準 (whatwg.org)より引用

追加属性

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

追加属性効果
namephpやjavascriptで入力された値を送信する際に使用
id<label>タグで飛ばしたいところを設定する
list<datalist>タグ内のID
maxlength最大文字数を設定できる。設定しない場合は最大数が無くなる。
minlength最小文字数を設定できる。設定しない場合は最小数が無くなる。
required入力を必須にする。空白の場合エラー文を吐く。
書き方は <input type=”text” required>か<input type=”text” required=”required”>
pattern入力してある内容が、入力してほしい内容に適しているかを判断する
<input pattern="[a-z]{1,3}" /> この例では1~3文字のローマ字で入力しなければならないと指定しています。
書式:[]この中に書式の指定をします。例えば[a-z]a~z、つまりローマ字指定。[0-9]0~9の間、つまり数字指定。
{}この中に範囲を指定します。例えば{1,3}は1~3文字、{3}これは3文字のみです。
詳しい書式についての解説はこちらをご確認ください。
titlepatternを指定したときは、入力例としてtitle属性を付けるとわかりやすくなります
(カーソルを合わせるとtitleに入力した文字が表示される)
size一度に見える文字数を指定する
placeholder入力アシスト。規定値を薄く表示
value規定値の入力
autocompleteフォーム入力欄の値を埋めるための自動支援の必要の有り無しを指定できます
 <input> 要素、<textarea> 要素、<select> 要素、<form> 要素で利用可能です。
inputmode何かを入力する際、表示されるキーボードを変更する
値→decimal(数字と_などの記号)、numeric(0から9までの数字のみ必要)
例:暗証番号を入力する際などは、半角英数字

inputmode属性

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

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

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

inputmodeをnumericにした場合、safariでは数字のみのキーボードを表示される

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

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ユーザー名・アカウント名
emailメールアドレス
new-password新しいパスワードを設定する。firefoxでは新パスワードを提案される
current-password現在のパスワード
one-time-codeユーザー確認に使用されるワンタイムパスコード
organization企業・団体・組織名
organization-title組織内での肩書・役職(社長、専務など)
street-address住所の番地など。複数行のテキストが使用可能。
address-line1住所の番地などを3つに分けたもので ↑street-addressを置いていないときだけ使用可能です。
street-addressがひとつでaddress-line1とaddress-line2の機能を担います。
address-line2住所の番地などを3つに分けたもの。Androidでは表示されない可能性あり。
address-line3住所の番地などを3つに分けたもの。基本的には使わない
address-level4address-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内線番号
imppIMPP(Instant Message and Presence Protocol・インスタントメッセージプロトコル)の URL
異なるインスタントメッセンジャーの間で相互通信するためのプロトコル(ルール)。インスタントメッセンジャーというのは気軽に連絡の取れるツール。例えばLINEやWhatsAppなど。
urlホームページやウェブサイトなどのURL
photo画像のURL

pattern属性の書式

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

メタ文字説明使用例一致する文字列の例
[]カッコ内のいずれかの文字を示す[aiu]“a”、“i”、“u”のみがヒット
[^]カッコ内の文字以外の文字を示す[^aiu]“え”、“9”、“c”など、aiu以外がヒット
[AZ]AからZの中からいずれか1文字[AZ]“A”、“T”、“Z”など。小文字はノーヒット
^[\u3040-\u309F]+$あ~わの中の1文字^[\u3040-\u309F]+$「あ」「い」「う」などのひらがな
u3040はユニコードの「あ」
^[\u30A0-\u30FF]+$アからワの中の1文字^[\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}小文字ローマ字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にしか対応していないことと、ブラウザによって見た目が少し違うことの2点くらいです。なのであまり違いはありません。
ブラウザで見たときの違いのお話ですが、例えば下の画像はchromeで見たときのものです。×マークが付き、これを押すと入力していた文字が一瞬で削除されます。

searchタイプでは入力したものを一気に消す機能もある

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形式で入力されているかを判断してくれます。

mailタイプでは勝手に入力したものを判定してくれる

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

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

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

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

passwordタイプとは

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

<input type="password">

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

passwordタイプは入力したものが目隠しされる

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

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

autocomplete属性

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

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

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

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

passwordをnewにすると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周目でも1ではなく01になります。

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

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

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

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

safariでweekは反映されない

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

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で見たときには、このように数字と記号のキーボード表示になりました。

safariでnumberを使うと数字と記号のキーボードになる

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

<input type="number" max="100" min="0">
maxとminで数字の範囲を指定

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

<input type=”number” step=”10″>

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

stepで10ずつ増える

rangeタイプとは

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

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

  • BGMやSEの音量調整
  • 色や明度などの調整
  • パスワードマネージャーが生成するパスワードの長さ
  • アンケートなどで使用する、好感度を表すメーター等

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

50
<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タイプとは、このようなチェックボックスを作ることが出来るタグです。↓

いちもんじは
イケメン
かっこいい

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

使い方(値の取得方法)としては、こんな感じで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>タグというものが登場しているので、気になる方はこちらの記事を参照してください。

タイトルとURLをコピーしました