ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【HTML】inputタグの使い方まとめ(テキストボックス・パスワード・送信ボタンなど)

HTML
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回の記事では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]0~9のみ入力可能{3}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タグで作れるのでしっかりと抑えておきましょう!

最後までご覧頂きありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
HTML
HikoPro Blog

コメント

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