【これだけ読めば大丈夫】フォーム要素を構成するHTML-input要素を初心者向けに徹底解説！
HTML input要素とは
HTMLのinput要素とは、ユーザーからデータを受け取るためのフォームを作成するために使用する要素です。このinput要素を使うことによってユーザーに様々な情報を送ってもらうことができるようになります。例えば名前やe-mailアドレスのようなテキスト形式のものから、顔写真などのファイル形式のものまで幅広く活用できます。
記事後半では、実際に求人用フォームの作り方を解説していますので、是非最後までご覧いただき、実際に手を動かして吸収していただけると幸いです。
input要素のtype（型）
input要素の型とはユーザーに何を入力してもらいたいかによって変わります。例えば、メールアドレスを入力してほしいのであれば「mail」パスワードを入力してほしいのであれば、「password」のように型が定義されています。もちろん全て「text」型でもいいのですが、思ったような入力制限がかけられなかったりするので、ご自身の目的に合った型を選択することが重要です。
| 型の名前 | 説明文 | 使用例 |
| text | 単一行のテキスト入力欄を作成します。改行は自動的に入力値から取り除かれる。 | 氏名などの入力文字数が少なく、ユーザーよって値の変わる入力に使用します。 |
| number | 数値専用の入力欄を作成します。対応しているブラウザであれば右端にスピナーを表示します。 | 年齢や予約人数など数値データのみを入れてほしい場合に使用します。 |
| 電子メールアドレス入力欄を作成します。patternを指定することで、ユーザーからの入力チェックにも使えます。 | メールアドレスを入力してもらう場合はこの型を使用します。 | |
| password | 入力したテキストを隠すことができます。見た目はtextと同じです。 | パスワード入力用に使用。minlengthを指定することで、最小文字数を設定することが可能です。 |
| checkbox | チェックボックスを作成します。 | 趣味や興味のあること等、あらかじめ用意した項目から複数選択してもらう場合に使用します。 |
| radio | ラジオボタンを作成します。 | あらかじめ用意した項目から一つを選んでもらう場合に使用します。 |
| range | 値を直感的に入力できるバーを作成します。 | 厳密に値を取得する必要がない数値入力用として使用します。 |
| tel | 電話番号用の単一行テキスト入力欄を作成します。 | 電話番号を入力用として使用します。 |
| url | URL入力欄を作成します。 | ホームページなどのURLを入力してもらいたい場合に使用します。patternにhttps://を指定することで、ある程度入力値の検証ができます。 |
| date | 日付入力フォームを作成します。カレンダーアイコンを押すことで、直感的に日付指定をすることができます。 | 誕生日や予約希望日などを入力してもらう場合に使用します。現在の日付を初期値にする場合にはJavaScriptの知識が必要になります。 |
| file | ファイル送信用のボタンを作成します。 | 履歴書や画像を送ってもらいたいときに使用します。ファイル形式を定義することで、ユーザーが送信できるファイルを指定することができます。 |
| image | グラフィックのsubmitボタンを作成します。 | submitボタンの代わりに画像を指定したい場合に使用します。src属性で定義された画像が見つからない場合はalt属性が表示されます（代替テキスト） |
| submit | フォーム送信用ボタンを作成します。 | フォーム内容の送信に使用します。 |
| reset | フォーム内容を全てリセットします。 | フォーム内容をリセットしたい場合に使用します。 |
ここでは紹介しきれないマニアックな型もありますが、一旦上記の種類を使えるようになればどんな入力フォームも作れるようになります。
input要素の属性
input要素の型には様々な属性を付与することができ、入力制限や入力補助を定義することができます。これにより、ユーザー側も安心して入力できますし、データを受け取る側も不本意なデータが入力されなくなるので、集計がとても楽になります。
| 属性名 | 対応している型 | 説明文 |
| minlength | password, search, tel, text, url | 入力しないといけない最小文字数を定義。 パスワードは8文字以上に指定したい場合はminlength=”8″ |
| maxlength | password, search, tel, text, url | 入力可能な最大文字数を定義。 パスワード20文字以内に指定したい場合はmaxlength=”20″minlengthのように警告は出ず、規定文字数以上入力できないようになります。 |
| min | 数値型 | 入力可能な最小値を定義。 |
| max | 数値型 | 入力可能な最大値を定義。 |
| name | すべての型 | データを送信する際にどのデータの名前か判別するために定義する。 |
| pattern | password, text, tel | ユーザーの入力値を制限したい場合に定義する。 |
| placeholder | password, search, tel, text, url | フォーム内が空の状態で表示される内容を定義する。 （例）○○を入力してください |
| required | ほぼすべての型 | 入力必須項目のフォームに対して定義する。 空で送信ボタンを押すとエラーが返ってくるようになる。 |
| alt | image | src属性（画像）が無い場合の代替テキストとして定義する。 |
| src | image | 画像のアドレスを定義する。 画像が見つからず、alt属性が指定されていた場合はそちらが表示される。 |
| type | すべての型 | フォームの型を定義する。 |
| value | すべての型 | フォームの初期値を定義する。 |
| accept | file | ファイルアップロード時のファイル形式を定義する。 accept=”.jpg”と指定することで拡張子が.jpg以外のファイルがアップロードできなくなる。 |
| autofocus | すべての型 | ページが読み込まれたときに、定義しているフォームにフォーカスを設定する。 |
属性もかなりの数があり、ここでは紹介しきれていない属性もあります。ご自身でフォームを作成する際にこんな制限かけられないかと思ったら検索してみると見つかるはずです。例えば複数ファイルを送信したい場合は「input 複数選択」などで検索してみてください。multiple属性の説明が見つかるはずです。
input要素で求人フォーム作成
input要素を使って以下のような求人フォームを作成してみましょう。基本的な型と属性しか使用していないので、入力制限をかけたい場合はご自身でカスタムしてみるとより理解が深まります。
準備するもの
- VisualStudioCode（コードエディター）
https://azure.microsoft.com/ja-jp/products/visual-studio-code/ - GoogleChrome（ブラウザ）
https://www.google.co.jp/chrome/?brand=RPHE&gclid=Cj0KCQiAsqOMBhDFARIsAFBTN3dUVNqcF4gIyJsnpzcZTBeoFgLN16AGGeey6e5k7N8KAc44-1pq0RgaAsNLEALw_wcB&gclsrc=aw.ds
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input</title>
</head>
<body>
<h1>新規登録</h1>
<form action="" method="post">
<table>
<tr>
<td><b>氏名：</b></td>
<td><input type="text" name="userName" size="20"></td>
</tr>
<tr>
<td><b>ユーザーID：</b></td>
<td><input type="text" name="userId" size="20"></td>
</tr>
<tr>
<td><b>パスワード：</b></td>
<td><input type="password" name="userPassword" size="20" minlength="8" maxlength="20"></td>
</tr>
<tr>
<td><b>メールアドレス：</b></td>
<td><input type="email" name="email" size="20"></td>
</tr>
<tr>
<td><b>電話番号</b></td>
<td><input type="tel" name="tel" size="20"></td>
</tr>
<tr>
<td><b>年齢：</b></td>
<td>
<input type="radio" name="age" value="未成年">未成年
<input type="radio" name="age" value="20代">20代
<input type="radio" name="age" value="30代">30代
<input type="radio" name="age" value="40代">40代
<input type="radio" name="age" value="50代">50代
<input type="radio" name="age" value="60代">60代
<input type="radio" name="age" value="70際以上">70歳以上
</td>
</tr>
<tr>
<td><b>興味のあること：</b></td>
<td>
<input type="checkbox" name="interested" value="転職">転職
<input type="checkbox" name="interested" value="副業">副業
<input type="checkbox" name="interested" value="兼業">兼業
<input type="checkbox" name="interested" value="社会貢献">社会貢献
</td>
</tr>
<tr>
<td><b>現職の満足度：</b></td>
<td>0<input type="range" name="fullness" step="10">100</td>
</tr>
<tr>
<td><b>履歴書/職務経歴書：</b></td>
<td><input type="file" name="resume" accept=".jpg, .jpeg, .doc, .docx"></td>
</tr>
<tr>
<td><b>ポートフォリオサイト：</b></td>
<td><input type="url" name="portfolio" pattern="https://.*"></td>
</tr>
<tr>
<td><b>面談希望日：</b></td>
<td><input type="date" name="date" min="2021-12-01" max="2021-12-31"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</td>
</tr>
</table>
</form>
</body>
</html>| 項目 | 型名 | 属性説明 |
| 氏名 | text | 入力しやすくするためにフォームサイズを20に指定 |
| ユーザーID | text | 入力しやすくするために フォームサイズを20に指定 |
| パスワード | password | 8文字以上20文字以内に定義 |
| メールアドレス | 入力しやすくするために フォームサイズを20に指定 | |
| 電話番号 | tel | 入力しやすくするために フォームサイズを20に指定 |
| 年齢 | radio | numberでもよさそうですが、年齢層で指定する場合は複数選択できないラジオボタンが有効 ※valueと表記を一致させないと、意図していないデータが送信される恐れがある。 |
| 興味のあること | checkbox | 複数選択する項目なので、checkboxを採用。 ※radio型と同様にvalueと表記を一致させないと、意図していないデータが送信される恐れがある。 |
| 現職の満足度 | range | stepを10に指定することで、「０、１０、２０…」と10刻みで選択できるようになる。 |
| 履歴書・職務経歴書 | file | 受け取ることができるファイルを指定したいので、acceptでファイルの種類を定義。 |
| ポートフォリオサイト | url | 暗号化されているURLのみ受け取りたいので、https://から始まるURLしか入力できないようにpatternを定義。 |
| 面談希望日 | date | min,maxを使用し、12月1日～12月31日の間しか選択できないように定義 |
属性を使うことで、様々な制限を書けることができますが、ユーザーからはわからないので、注意書きをフォームの近くに書いておく必要があります。例えば赤文字で「必須項目」や「8文字以上20文字以内で入力してください」などです。
まとめ
inputタグ内にtype（型）を指定し、属性を追加することで、使い勝手のよいフォーム作成の理解が深まったと思います。上記で作成したフォームを基本的な属性しか使用していないので、ユーザビリティがよいとは言えません。
今回作成した登録フォームを利用して、ご自身でカスタマイズすることで、より一層理解が深まります。
ここまで読んでいただき、ありがとうございました。この記事があなたのフォーム作成に少しでも役立てば幸いです。
