記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HTMLで入力フォームを作成する方法(サンプルコード付き)

入力フォームの作成方法を初心者の方向けに紹介。 サンプルコード付きで、基礎的な入力フォームの作成方法から、様々な種類の入力フォームを学ぶことができます。またCSSで入力フォームの装飾も解説しています。 全てサンプルコードがついていますので、コピペでご自身のWEBサイトに使用することができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「入力フォームって何・・?」「入力フォームってどうやって作成するの・・?」「基本的な入力フォームをコピペで表示し、CSSで装飾したい・・!」
そのように悩んでいる初心者の方も多いのではないでしょうか?
入力フォームの作成方法は、HTMLでも難易度が高く難しく感じてしまうかもしれません。
しかし、ほとんどのwebページで入力フォームがあり、避けては通れない項目です。
今回は、「入力フォームとは?」「入力フォームの作成方法」「様々な入力フォームの紹介」「基本的な入力フォームをCSSで装飾」を中心に詳しく解説していきます。

入力フォームとは?

入力フォームとは下記のようなものです。

入力フォーム↓

ホームページなどで見たことあるのではないでしょうか?
ユーザーに項目を入力、送信してもらう事で製作者側に情報が送られます。
ほとんどのwebサイトで入力フォームが使われていますので、学習する事で制作の幅が広がるでしょう。


HTMLではフォームの表示とデザインの2点を作成します。


情報が送信され、製作者側で保存するなどの処理の仕組みは「PHPなどのプログラミング言語」の役割になります。
今回は初心者web制作者向けの為、HTMLで作成できる「フォームの表示」「デザインの調整」の解説となります。

入力フォームの作成方法

基本的な入力ホームの作成方法

基本的な入力フォームを下記に表示します。
ここから表示・タグの説明・機能の解説していきます。
サンプルコード表示結果

入力フォーム↓

HTMLサンプルコード

CSSサンプルコード

※まずは基本的なタグの説明からします。

○formタグ

フォームを作るにはHTMLの「formタグ」を使います。(HTMLサンプルコード1行目)<form>〜</form>タグの中に入力フォームの内容を記載していきます。

○inputタグ

inputタグでテキストフィールドを作成します。テキストフィールドとは、サンプルコード表示結果1行目の文章などを入力する為フォームです。 inputでは、「type=”○○”」〇〇の中に表示したいテキストフィールドの種類を指定します。
サンプルコード表示結果、1行目は「テキスト」を表示したいので「text」を指定しました。
2行目は「mailテキスト」を表示したいので「mail」を指定しました。
type属性を指定する事で様々な種類のテキストフィールドを表示する事ができます、種類が多くありますので、後ほど詳しく解説していきます。

○nameタグ

nameタグは、「このinputフィールドが何を表しているのか」をわかりやすくするためのものです。
今回の例で説明すると、1項目は名前を入力するフィールドです、「name=”name”」と指定する事で、このフィールドは「名前を入力する」ということがわかりやすくなります。2行目はメールを送るので「name=”mail”」と指定しメールを送るフィールドとわかりやすくしました。

○labelタグ

labelタグを使用する事で、項目とフィールドを連携させる事ができます。
下記にラベルありなしの項目を用意しました。
「名前ラベルなし」「名前ラベルあり」をクリックしてみて下さい。
            

ラベルなし↓
名前ラベルなし
ラベルあり↓

ラベルなしでは、「名前ラベルなしと書かれたテキスト」をクリックしても選択状態になりませんが、「名前ラベルあり」では選択状態になります。
ラベルと連動させる事でクリック範囲が広がり、ユーザーの使いやすさにつながりますので、labelフォームと連動させるようにしましょう。
連動させるには、「labelにfor=”〇〇”」「inputにid=”〇〇”」 〇〇に同じアルファベットを記入し連動させます、今回は「label for=”namelabel”」 「input id=”namelabel”」で連動させてます。

HTMLサンプルコード

○textarea

<textarea>〜</textarea>タグでテキストエリアを表示します。
テキストエリアは改行を行ってくれるので、質問事項などの長文の可能性がある情報を送信してもらう際に使用します。

○input type=”submit”でボタン

type属性を、「type=”submit”」と指定する事で送信ボタンを作成できます、またボタンに文字を入れたい場合はvalue属性に表示したい文字を「value=”〇〇”」の〇〇に入力します、今回の例では、「送信」と指定しました。

○placeholder属性

placeholder属性で入力例を表示します。
テキストフィールドに、最初から薄いグレーの文字が表示されているフォームがあると思います(今回は、名前のメールアドレス)。placeholder属性で記入例などを記載し、ユーザーにどのように記入すれば良いのかを示しわかりやすくしています。

○CSSでラベルをテキストの上におく

label属性をブロック要素にして項目の上に重ねます。

もしlabel属性をブロック要素しないと下記の様な見た目になってしまいます。
理由は、<label><input>属性は、インライン要素であるため、横並びになります、したがって意図的にブロック要素にし、<label>を上に表示しています。

labelをブロック要素にしない場合↓

上記の様にラベルが左隣にあっても、全体のCSSを整えて見やすくする事ができますが、基本辺の例では、labelを項目の上におき進めます。CSSの調整はのち程解説します。

ここまでが基本で、次はその他のtype属性について詳しく解説します。
基本で触れたtype属性は、
1.「type=”text”」でテキストフィールド表示
2.「type=”email”」でメールテキストフィールド表示
3.「type=”submit”」でボタンを表示
の3点を紹介しました。

様々な種類のtype属性

ラジオボタン

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

※解説
「type=”radio”」でラジオボタンを表示する事ができます。
ラジオボタンの特徴としては、複数選択肢の中から「1つを選択してもらいたい場合」に使用します。これに対してチェックボックスは、複数選択の中から「複数選択可」の時に使用します。

チェックボックス

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

※解説
「type=”checkbox”」でチェックボックスを表示する事ができます。
チェックボックスの特徴としては複数選択の中から「複数選択可」の時に使います、これに対してラジオボタンは、複数選択肢の中から「1つを選択してもらいたい場合」に使用します。

ファイルのアップロード

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”file”」で画像などのファイルのアップロードボタンを設置する事ができます。mulitiple属性を指定すると、複数ファイル選択可能になります。
accept属性では選択可能なファイルの形式を指定します。

range(スライダー入力)

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”range”」でレンジ入力(スライダー入力)を設置する事ができます。
min.max属性により選択できる範囲を決めることができ、大きさなど大体の値をユーザーに選択してもらう事ができます。

数字の入力(半角数字のみ)

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”number”」で半角数字のみ入力できるテキストフィールドを設置する事ができます。

URLの入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”url”」でURL入力欄を設置する事ができます。
見た目は「type=”text”」と変わりませんが、URLの形式以外の入力がされるとブラウザが注意をしてくれます。

パスワードの入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”password”」でパスワード入力欄を作成する事できます。
入力したテキストは「●●●」の記号で隠されます。

電話番号の入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”tel”」で電話番号の入力欄を作成できます。
スマホやタブレットで入力欄にフォーカスが当たったとき、数字入力のキーボードを表示してくれます。

日付の入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”date”」で日付の入力欄を作成する事ができます。
「年」「月」「日」の3種類を入力するフィールドとなります。

時刻の入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”time”」で時刻記入欄を作成できます。

検索フォーム

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”search”」で検索入力フォームを作り「list属性」と「datalist」を組み合わせることで、入力項目の候補を表示する事ができます。

リセットボタン

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
「type=”reset”」でリセットボタンを作成する事ができます。
ボタンを押すと入力された全ての内容がリセットされます。

色の入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
「type=”color”」でカラーピッカーから色を選択できる入力欄を作成できます。

表示しないデータ

※ユーザに表示されません

HTMLサンプルコード

※解説
「hidden」は隠しデータなので、ブラウザに表示されません。
主にユーザーは知る必要はないけど、サーバーに送る情報がある時に使用します。


上記で紹介したtype属性を、お好みに合わせてフォームタグに追加していくことでフォームを作成する事ができます。

フォーム作成+CSSでデザインを整える

ここからは、これまで紹介した様々なtype属性、cssでのデザインの調整を踏まえて、基本的な入力フォームの紹介していきます。

基本的な入力フォーム

サンプルコード表記結果

HTMLサンプルコード

CSSサンプルコード

※解説
このままコピペでお好みに合わせて変更する事ができますが、ポイントを解説していきます。

[HTML]ポイント
①お問い合わせフォームは、<form>〜</form>の中に記載します。


②2行目にタイトルをつけました、タイトルを作成することにより、このフォームは「お問い合わせフォームなのか」「予約フォームなのか」なんのフォームなのかをユーザーにわかりやすくする事ができます。


③type属性を確認していきます。
表示結果、1行目は「氏名」を入力するテキストを作成しているので→「type=”text”」2行目は「職業」を入力するラジオボタンを作成しているので→「type=”radio”」3行目は「電話番号」を入力するテキストを作成しているので→「type=”number”」4行目は「メールアドレス」を入力するテキストを作成しているので→「type=”mail” 」5行目は「お問い合わせ内容」を入力するテキストエリアを作成しているので→type属性ではなく<textarea>〜</textarea>属性で表示します。


④フォームに「送信ボタン」はつきもの。「type=”submit”」でボタンを作成し、「value=”〇〇”」の〇〇にボタンに表示したい文字を記入


[CSSポイント]
①「.label-titleクラス」でフォームタイトルを装飾しています。
タイトルのfont-size,colorなどはこちらから変更して下さい。

②「.form-radioクラス」にdisplay: flexを指定し、子要素の「.form-labelクラス」「.radio-label」を横並びにする事で「必須・氏名・テキストフィールド」を横並びにしています。



③pタグの中に、spanタグを入れ「必須マーク」を作成しています。


④「.form-inputクラス」でテキストフィールドの大きさ枠線を指定しています。border: 1px solid gray;の指定によりテキストフィールドに枠線を表示する事ができ、よりわかりやすいフォームにする事ができます。

まとめ

今回は「入力フォームとは?」「入力フォームの作成方法」「様々な入力フォームの紹介」「基本的な入力フォームをCSSで装飾」について解説していきました。
それでは、最後にポイントをまとめます。


1.フォームを作成するには、formタグを使用し、<form>〜</form>の間に記述する。


2.labelのfor属性とinputのid属性を連動させ項目とフォームを連動させる。


3.inputのtype属性を変更する事で様々なタイプのテキストフィールドを表示させる事ができる。
「type=”text”」→テキストフィールド
「type=”radio”」→ラジオボタン
「type=”checkbox”」→チェックボックス
「type=”file”」→ファイルアップロード
「type=”range”」→レンジ入力
「type=”number”」→半角数字入力
「type=”url”」→url入力
「type=”password”」→パスワード入力
「type=”tel”」→電話番号入力
「type=”date”」→日付入力
「type=”time”」→時刻入力
「type=”search”」→検索入力
「type=”reset”」→リセットボタン
「type=”color”」→色の入力
「type=”hidden”」→隠しデータ


フォームの作成はHTMLの中でも難易度が高いので、難しく感じたかもしれません、しかし基本の形と型は決まっているので、当てはめてCSSで装飾し、繰り返し実装する事で身についていきます。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。