HTMLでお問い合わせフォームを作成してみよう!

お問い合わせや検索ボックス、会員登録など、日頃から様々な場面でフォームを見ることがあるだろう。ユーザーがテキストを入力したり、選択したりするフォームを作成してみましょう。

複数のパーツを組み合わせる

Webサイトで見かけるフォームではテキスト入力欄や、ボタンなど、多くのパーツが用意されている。HTMLのタグを用いて必要なパーツを組み合わせてフォームを作成する。

フォーム欄を作る<form>タグ

<form>タグはフォームを作成するためのタグで、フォームで使用する全てのパーツを<form>タグで囲みます。記述する主な属性は以下。

#主な属性  一覧
・action…データの送信先ページを指定
・method…データの転送方法の指定。主にgetかpostを入力
・name…フォームの名前を指定

フォームで使うパーツ

フォーム内で使う各パーツを設置するためのタグを紹介する。
多くのものが<input>タグを使い、type属性で用途別に表示するパーツを変える。

1行テキスト入力欄<input type=”text”>

<input>タグにtype属性でtextの値を指定すると、1行のテキストを入力するエリアを設置できる。コンタクトフォームでいう名前や検索ボックスの語句を入力できる部分になる。

あなたの好きな役満は何ですか?<input type="text">

⬇️実行結果

スクリーンショット 2020-05-05 14.16.51

Q.入力欄に最初からテキストを表示するには?

A .placeholder属性を使用することで可能。

あなたの好きな役満は何ですか?<input type="text" placeholder="例:国士無双">

⬇️実行結果

スクリーンショット 2020-05-05 14.21.26

ユーザーが入力欄をクリックし、文字を入力しようとすると「placeholder」の値は消えてユーザーが文字を入力できるようになる。

いろいろな種類の1行テキスト入力欄

1行のテキストには入力する内容がたくさんある。
例えばメールアドレスの入力欄やWebサイトのURL入力欄などなど。
主な1行テキスト入力欄の属性値を以下にまとめておく。

#主な1行テキスト欄の属性値 一覧
・text…1行のテキスト(初期値)
・search…検索するときのテキスト
・email…メールアドレス
・tel…電話番号
・url…WebサイトのURL

<p>名前:<input type="text" placeholder="例:ジェイソン・ステイサム"></p><p>メールアドレス<input type="mail"></p><p>電話番号<input type="tel"></p>

⬇️実行結果

スクリーンショット 2020-05-05 14.38.38

きたねえから直し方わかったら直す

ラジオボタンを作成<input type=”radio”>

複数ある選択肢のうち、1つのみを選択してもらいたときには、ラジオボタンを使用する。ユーザーが1つをクリックして選択すると、その他の選択肢は自動的に選択できなくなる。主な属性を以下に記載しておく。

#主な属性  一覧
・name…ラジオボタンの名前
・value…送信される選択肢の値
・checked…最初から選択されている状態にするときに指定

複数の選択肢があるラジオボタンでは、それぞれに同じname属性の値をつけることで1つのグループとしてまとめることができ、ユーザーはそのグループの中から1つだけ選択することができる。checked属性を指定したラジオボタンは、最初から選択された状態になるので、よく選択される項目や選択してほしい項目に入れておくと良い。

性別:<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女" checked>女<input type="radio" name="gender" value="その他">その他

⬇️実行結果

スクリーンショット 2020-05-05 14.55.08

チェックボックスを作成<input type=”checkbox”>

チェックボックスはラジオボタンのようにユーザーに複数ある選択肢から選んでもらうパーツですが、ラジオボタンと違いチェックボックスの場合は複数の項目を選択可能。主な属性を以下に記載しておく。

#主な属性  一覧
・name…チェックボックスの名前
・value…送信される選択肢の値
・checked…最初から選択されている状態にするときに指定

ラジオボタンと同じく、それぞれに同じname属性の値をつけることで1つのグループとしてまとめることができる。またchecked属性も同様に指定したものが最初から選択された状態になる。

好きな三元牌:<input type="checkbox" name="三元牌" value="白">白<input type="checkbox" name="三元牌" value="撥">撥<input type="checkbox" name="三元牌" value="中" checked>中

⬇️実行結果

スクリーンショット 2020-05-05 15.07.19

送信ボタンを作成<input type=”submit”>

フォームに入力した内容を送信するパーツ。
ボタン上に表示させるテキストは「送信」なくてもOK。
検索フォームなら「検索」などなど。主な属性を以下に記載しておく。

#主な属性  一覧
・name…ボタンの名前
・value…ボタンに表示するテキスト

<input type="submit" value="送信">

⬇️実行結果

スクリーンショット 2020-05-06 19.36.03

ボタンに画像を使用したいときは

送信ボタンに画像を使用したいときはtype属性をimageにして画像のファイルを指定する。主な属性を以下に記載しておく。

#主な属性  一覧
・name…ボタンの名前
・src…ボタンに使用した画像のファイルパス、ファイル名
・alt…画像を説明するテキスト

<input type="image" src="skymission.jpeg" alt="送信する">

セレクトボックスを作成<select>タグ+<option>タグ

セレクトボックスはクリックすると選択肢が表示されるパーツ。
ユーザーに都道府県を選択して欲しいときなんかに使用されている。
選択肢全体を<select>タグで囲み、選択項目はそれぞれ<option>タグで囲う。
以下に<select>タグと<option>タグの主な属性を記載しておく。

#主な属性  一覧
・name…セレクトボックスの名前
・multiple…shiftキーまたはctrlキー(Macの場合はcommandキー)で複数の項目を選択可能にする。

#主な属性  一覧
・value…送信される選択肢の値
・selected…最初から選択されている状態にするときに指定

好きな三元牌<select name="sangenpai"> <option value="白">白</option> <option value="撥">撥</option> <option value="中" selected>中</option></select>

⬇️実行結果

スクリーンショット 2020-05-06 20.13.15

選択肢がたくさんあるときにセレクトボックスを活用することで、ページのスペースを節約できる。

複数行テキスト入力欄を作成<textarea>タグ

<textarea>タグを使用すれば複数行にわたるテキスト入力ができる。
お問い合わせ内容やメッセージを入力するときによく使用される。
<textarea>タグで囲まれた部分が初期値として表示される。

<textarea name="message">メッセージを入力</textarea>

⬇️実行結果

スクリーンショット 2020-05-06 20.19.44

<textarea>で囲まれた部分は入力欄をクリックしても消えない。そのためデフォで表示させたいテキストはplaceholder属性で指定すると良い。

<textarea name="message" placeholder="メッセージを入力"></textarea>

今回はこの辺でさようなら。

過去記事【2021年】おすすめの大手ドメイン取得業者『8社』比較してみた!

過去記事【初心者向け】基礎のHTMLコーディング手順とやり方まとめ!これで基礎は完璧!!

最新情報をチェックしよう!
>本当の自由を求めて「WEBサバイバー terayamaya」

本当の自由を求めて「WEBサバイバー terayamaya」

本当の自由とはなんだ?答えを求めてサバイブし続ける!お金より大事な事は沢山あるけどお金じゃないと解決できない事もある。

CTR IMG