1. ホーム
  2. ホームページの作り方
  3. HTML
  4. よく使うフォーム部品の一覧をご紹介！フォームで作成できる項目をチェック
  • 最終更新日
  • HTML

よく使うフォーム部品の一覧をご紹介！フォームで作成できる項目をチェック

ホームページにフォームを設置しようとする場合、今となってはすでに出来上がっているフォームシステムを使う事がほどんどです。

僕もフォームシステムを自分で作った事がないので、無償で提供してくれているエンジニアの方には本当に感謝しています。とはいえフォーム部品についてはある程度の知識が必要です。

フォームシステムのタグをカスタマイズしたり、デザインの調整は自分でおこなわなければいけないのでフォーム部品の記述方法や使い方は押さえておきましょう。

目次 [閉じる]

inputタグでよく使うフォーム部品

まずはinputタグの中でもよく使うフォーム部品を一覧で紹介します。inputタグというのはtype属性の値によってさまざまな形のフォーム部品を作る事ができます。

text

1行のテキストボックスを作成します。

                        
    
                            
  1. <input type="text">
    2.
checkbox

チェックボックスを作成します。

                        
    
                            
  1. <input type="checkbox" name="item">項目1
    2. 
                            
  2. <input type="checkbox" name="item">項目2
    3.
radio

ラジオボタンを作成します。

                        
    
                            
  1. <input type="radio" name="sex" checked="checked">男性
    2. 
                            
  2. <input type="radio" name="sex">女性
    3.
file

ファイルを送信します。

                        
    
                            
  1. <input type="file">
    2.
tel

電話番号を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="tel">
    2.
email

メールアドレスを記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="email">
    2.
url

URLを記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="url">
    2.
number

数値を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="number">
    2.
password

パスワードを記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="password">
    2.
submit

送信ボタンを作成します。

                        
    
                            
  1. <input type="submit">
    2.
image

送信ボタンに画像を使用します。

                        
    
                            
  1. <input type="image" src="send.png">
    2.
button

汎用ボタンを作成します。

                        
    
                            
  1. <input type="button" value="ボタン">
    2.
reset

リセットボタンを作成します。

                        
    
                            
  1. <input type="reset">
    2.
hidden

隠しデータを指定します。ブラウザの画面には表示されません。

                        
    
                            
  1. <input type="hidden">
    2.

inputタグでも上記の形はよく使われるものなので覚えておいた方が良いです。

上記ではラジオボタンにしか付けていないですが、チェックボックスにも「checked=”checked”」を追加する事ができ、初期値を設定しておく事ができます。

「type=”image”」はあまり使わなくなりましたね。以前は結構使っていましたが、今ではCSSだけでも十分なデザインを作れるようになりましたので好みで使い分けてください。

今回はCSSでデザインを加えているので、上記のサンプルはデフォルトの形ではないです。ここでは各フォーム部品でどんな事ができるのかを確認しておいてください。

inputタグのその他のフォーム部品

次はinputタグでも新しく追加されたもので、あまり使う頻度が高くないんですが、「こういう事もできるのかぁ」というくらいに思っておいてもらえればOKです。

ただ注意しなければいけないのは、ここで紹介するフォーム部品は2021年10月現在ですべてのブラウザに対応していないものもあります。パソコンでは表示されるけどスマホでは表示されないものがありますのでそちらもご確認ください。

datetime

UTC（協定世界時）による日時を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="datetime">
    2.
date

日時を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="date">
    2.
month

月を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="month">
    2.
week

週を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="week">
    2.
time

時間を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="time">
    2.
datetime-local

UTC（協定世界時）によらないローカル日時を記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="datetime-local">
    2.
search

検索キーワードを記入するテキストボックスを作成します。

                        
    
                            
  1. <input type="search">
    2.
range

レンジを指定するバーを作成します。

                        
    
                            
  1. <input type="range">
    2.
color

色を指定するカラーボックスを作成します。

                        
    
                            
  1. <input type="color">
    2.

この中でしたら「type=”date”」はまだ使う場面があります。予約日や希望日を選択してもらうのに便利です。ただスマホでの調整が難しいんですよねぇ。

「date」「month」「week」「time」「datetime-local」の5つはパソコンではちゃんと表示されるんですけど、スマホでは同じ表示になってくれないので実際に使うには躊躇します。

あとはサイト内検索の時に使う「type=”search”」も使う機会があるかもですね。

サイト内検索はワードプレスを使えば簡単に設置できるんですが、「type=”text”」で作られている方がほとんどです。僕もぶっちゃけ「type=”search”」を使った事がないです（笑）。

selectタグのフォーム部品

selectタグを使ったフォーム部品には大きく分けて「ドロップダウンメニュー」と「リストボックス」というものがあります。

ドロップダウンメニューは1行のボックスのみで表示しているんですが、ボックスをクリックすると隠れている複数行の選択項目が表示されるようになります。

もう一方の「リストボックス」では選択項目のすべてを表示します。なので選択項目が多い場合はドロップダウンメニューを使い、選択項目が少ない場合にはリストボックスを使用するという使い分けですね。

ドロップダウンメニュー

ドロップダウンメニューを作成します。

                        
    
                            
  1. <select>
    2. 
                            
  2.   <option value="item1" selected>項目1</option>
    3. 
                            
  3.   <option value="item2">項目2</option>
    4. 
                            
  4.   <option value="item3">項目3</option>
    5. 
                            
  5. </select>
    6.
リストボックス

リストボックスを作成します。

                        
    
                            
  1. <select size="3">
    2. 
                            
  2.   <option value="item1" selected>項目1</option>
    3. 
                            
  3.   <option value="item2">項目2</option>
    4. 
                            
  4.   <option value="item3">項目3</option>
    5. 
                            
  5. </select>
    6.

見え方としてはかなり印象が変わってきますが、記述自体はほぼほぼ同じです。リストボックスにしたければ「size」属性を加えて値に「選択項目数（今回の場合は3）」を記述してやるだけでOKです。

あとは初期値としてあらかじめ項目のひとつを選択しておく場合（上記では項目1）、optionタグに「selected」と記述しておきます。

ここでもスマホ表示の際の注意点として、リストボックスはドロップダウンメニューとして表示されてしまうという事です。なのでselectタグを使うのであればドロップダウンメニューの一択でも良いかも知れません。

textareaタグのフォーム部品

textareaタグでは複数行にわたる文字を記入するテキストボックスが作れます。inputタグでは複数行の記入欄は作れませんので、複数行の場合はtextareaタグを使うと覚えておいてください。

用途としては「お問い合わせ内容」の項目や「備考欄」などの項目をフォームに設置する時に使います。これらの項目はフォームにとっても重要な項目ですのでしっかりと使えるようにしていきましょう。

textarea

複数行のテキストボックスを作成します。

                        
    
                            
  1. <textarea cols="30" rows="4" placeholder="ご意見などをご記入ください"></textarea>
    2.

属性も追加してみましたので確認しておきましょう。

placeholder属性を記述するとテキストボックス内に記入例や注意書きを表示する事ができます。placeholder属性はinputタグのテキストボックスにも使用が可能です。

そして、cols属性は1行当たりの文字数の指定、rows属性は行数を指定する事ができます。

今回はcols属性とrows属性を紹介のために付けてみましたけど、上記のtextareaはCSSでデザインしています。CSSでデザインする方がHTMLもスッキリしますのでお好きな方法をご利用ください。

buttonタグのフォーム部品

buttonタグはinputタグで作る送信ボタンと同じ機能を持っています。ただbuttonタグを使用するとCSSでのデザインに幅が広がりますので使い分けができると良いです。

submit

送信ボタンを作成します。

                        
    
                            
  1. <button type="submit">送信</button>
    2.
button

汎用ボタンを作成します。

                        
    
                            
  1. <button type="button">ボタン</button>
    2.
reset

リセットボタンを作成します。

                        
    
                            
  1. <button type="reset">リセット</button>
    2.

記述の方法としてはbuttonタグもinputタグも同じです。では試しにbuttonタグとinputタグの両方のボタンに同じデザインをCSSで加えてみますのでご確認ください。

はい、一目瞭然ですが、ひとつ目のinputタグにはデザインが適応されず、ふたつ目のbuttonタグにのみデザインが反映されています。

詳しいプロパティの説明はしませんが、要はinputタグには「before」や「after」などの疑似要素を使う事ができません。なので、簡単にデザインするならinputタグ、凝ったデザインにするならbuttonタグを使いましょう。

簡単に実装できるフォームシステム！TransmitMailの機能と設定方法をご紹介 Twitterの投稿をホームページに埋め込む！表示の種類とコードの取得を解説

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記