今回の記事ではHTMLの初心者向けにinputタグを使ったアレコレについて解説していきます。
webサイトの99%にはお問い合わせフォーム、ECサイトなどのwebサービスにはログイン画面や新規登録画面がありますよね！
HTMLのinputタグを学べばこのようなフォームの実装をできるようになります。
フォームを実際に送信するにはPHPを学ぶ必要がありますが、今回はそのフォームの見た目を作るInputuタグとCSSによる簡単なカスタマイズもご紹介します。
✔︎こんな方にオススメ
- HTML初心者の方
- inputタグの使い方が分からない方
- HTMLでお問い合わせフォームを作りたい方
inputタグとは？inputタグで出来る事
inputタグとは、PHPと連携させることによってユーザーが入力・選択した情報を特定のファイルに送信することができます。
webサイトでよく見かけるこのようなお問い合わせフォームの見た目を作ることができます！
※実際に機能させるにはPHPの学習が必要です。
inputタグ一つで実に様々なフォームを作ることができるのでよく利用するものをご紹介します。
✔︎inputタグで作れる物
- テキストボックス
- パスワード入力ボックス
- チェックボックス
- ラジオボタン
- ファイルのアップロード
- 送信ボタン
- リセットボタン
- 電話番号、メールアドレスの入力
- 検索ボックス
基本的にinputタグはサイト運営側が、ユーザーの情報を必要とする際に使用します。
inputタグの基本的な書き方
inputタグは少し特殊で</input>のように閉じタグが存在しません。
基本的な書き方は以下の通りです。
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
typeにはinputタグの種類を書く
まず始めにinputタグを使用する際にはtype属性が必須です。
後ほどtype属性の種類をいくつかご紹介しますが、
✔︎type=”〇〇”
- text：テキストボックス
- submit：送信ボタン
- password：パスワード入力ボックス
とこの様にtype属性を指定するだけで、inputタグの見た目が変わります。
nameにはinputタグに名前をつける
name属性はただHTMLだけで見た目を作る際には必要ありませんが、PHPなどを使ってユーザーが入力した情報の受け渡しの際にこの情報はどのinputタグに入力したものか識別する役割があります。
nameの中身は自分が理解しやすい単語でOK
- メールアドレス→email
- 電話→tel
valueには送信させたいデータを書く
value属性の役割は、チェックボックスやラジオボタンを作る際に必要で、value属性を指定するとユーザーが選択したボタンが何なのか受け取り側が認識することができます。
Value属性はテキストボックスなど、ユーザーに入力して貰うinputタグの際には必要なく、項目がいくつかあって選択してもらうチェックボックスの際に使用します。
placeholderには記入例を書く
placeholder属性はテキストボックスの中に記入例を表示させることができます。
このテキストボックスにはこの様に記述すれば良いことを促すことができ、ユーザー、受け取り側にも適切な情報が送られるのでplaceholderを追加しておくと良いでしょう。
placeholderが表示されるのはtype=”text”の場合のみです。
inputタグtype属性の種類
inputタグのtype属性は実に様々な種類がありますが、よく使うtype属性の種類をご紹介します。
テキストボックス（type=”text”）
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
inputタグで最もよく使うのがこのテキストボックスです。
ユーザーが自由にテキストを入力することが出来て、名前や住所など入力することが出来ます。
テキストボックスにはplaceholderを使用してあげるとユーザーの利便性が高まります！
パスワード（type=”password”）
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
会員登録画面や、ログイン画面で使用されるパスワード入力ボックスはtype=”password”とする事で簡単に出来ます。
文字を入力すると自動的に黒丸に変換されるのでセキュリティ面でも優れています。
- minlength=”数字”→最低これだけの文字数が必要と指定することが可能
- maxlength=”数字”→最大これだけの文字数が入力できると指定
電話・メールアドレス(tel/email)
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
テキストボックスでも、電話番号、メールアドレスを入力することは可能ですが、文字数の制限をさせる場合には特定のtype属性を使用します。
✔︎電話番号
pattern属性は、[0-9]０~9のみ入力可能、{3}３文字必須と言う意味です。
type=”email”とする事で、@マークが入っていない文字列を入力するとエラーがでる仕組みになっています。
チェックボックス（type=”checkbox”）
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
いくつか項目があり、ユーザーに選択を促す場合はtype=”checkbox”を使用しチェックボックスを使うと良いでしょう。
チェックボックスを利用するとユーザーに複数選択させることが出来ます。
name属性には共通のワードを、value属性には送信させたい値を書く様にしましょう！
ラジオボタン(type=”radio”)
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
先ほどのチェックボックスとは違い、選択項目がいくつかあり、ユーザーに一つのみの選択を促す場合はtype=”radio”でラジをボタンを設置すると良いでしょう！
name属性に同じ値を書かないと、一つのみの選択にならないので注意しましょう！
ファイル・画像のアップロード（type=”file”）
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
ファイル、画像、PDF、動画ファイルなどあらゆるファイルをユーザーにアップロードさせたい場合はtype=”file”を使用します。
fileと書くだけで、何も選択されていない場合は「選択されていません」の文字が、何か選択するとそのファイル名が自動的に表示される仕組みになっています。
✔︎acceptの種類
- image/*：画像ファイル全て
- image/png：PNG画像ファイル
- image/jpeg：jpeg画像ファイル
- image/gif：gif画像ファイル
- video/mp4：MP4形式の動画ファイル
- application/pdf：PDFファイル
送信ボタン(type=”submit”)
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
テキストボックスや、チェックボックスを作ったものの、それを送信するボタンがなければなんの意味もありません。
フォームの一番最後にtype=”submit”を使用し送信ボタンを設置しましょう！
submitは少し特殊で、value属性には表示させたい文字列を書く様にしましょう！
リセットボタン(type=”reset”)
See the Pen bPWqBM by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
送信ボタンだけでなく、入力した文字がリセットされるボタンがあればユーザーの利便性は高まるでしょう。
そんな場合はtype=”reset”とする事で、リセットボタンを作ることが出来ます。
上のテキストボックスに何か入力して、リセットボタンを押してみて下さい、文字が消えるかと思います。
inputタグの使い方まとめ
inputタグ一つで色んなフォームが作れるんだね！
いかがでしたでしょうか！
お問い合わせフォーム、会員登録ページなど現代のwebサイトには欠かせないものがinputタグで作れるのでしっかりと抑えておきましょう！
最後までご覧頂きありがとうございました！
