【マークアップ言語】お問い合わせフォームを作ろう【HTML学習】

学習中のカメ

資料請求とかでお問い合わせしたいんだけど
お問い合わせのフォームについて学ぼう

学び続けるウサギ

HTMLタグを覚えてお問い合わせフォームを作ろう

テキスト入力欄を表示させる

HTML
input type="text"
テキスト入力欄

1行のテキスト入力を受け取るための要素です。なので終了タグ(</>)はいりません。

送信ボタンを作る

HTML
input type="submit" value="〜"

input要素にtype属性をつけ、type属性にsubmitを指定すると送信ボタンになります。

value属性をつけるとテキストの送信部分を変更することができます。

日本語のブラウザではデフォルトで「送信」と表示されます。

HTML
button type="submit"

buttonタグも同じように送信ボタンとして使えます。inputよりもbuttonタグの方がCSSの擬似要素などを使いデザインの幅を広げやすいのでよく使われています。画像にも使うことができます。

読み方はブットンじゃなくボタンタグです。

disabled属性をつけると無効化することが出来ます。

送信ボタンにこだわりの画像を使いたい場合は、image属性をつけて画像を指定してあげます。

ボタンの復習

See the Pen
ボタンの作り方
by moku11 (@moku11)
on CodePen.

HTML
input type="password"
パスワードの入力欄

パスワードを入力するテキスト入力欄に文字が伏せられるようになります。

入力欄に入力例を薄く表示させたい

HTML
input placeholder="〜"

プレイスホルダー属性を使うと入力欄に薄く表示させたいテキストが表示されます。

記入例を入れると親切な入力欄になります。

テキスト入力欄の復習

See the Pen
contact form
by moku11 (@moku11)
on CodePen.

 

labelを使ってラベルと部品をfor属性とid属性を使って紐付ける方法

HTML
label for="name"
input type="text" id="name"

forid を紐づける


for属性とid属性を紐付けしたので、上記の名前の文字をクリックしてもテキストを入力できるようになります。

labelの中に 名前 input type=”text”で
for属性とid属性を削除してlabelタグの中に入れることもできます。

複数行のテキストを入力する欄を作りたい

HTML
textarea

テキストエリアタグは、お問い合わせ内容などを記入する複数行のテキスト入力欄を表示させることが出来ます。

メールアドレスのみを入力する欄を作りたい

HTML
input type="email"

見た目はテキスト入力欄と変わりませんが、@マークを入力欄に入れないと送信できませんというポップアップが出てきます。

ドロップダウンリストを作りたい

HTML
select

セレクトタグを使って表示させます。

labelで紐づけます。

セレクトタグにsize=”数字”で行を一度に表示させることが出来ます。

セレクトタグにmultipleで複数選択出来るようになります。(macではcommandを押しながら選択可)

for属性とid属性で紐づけます。

ドロップダウンリストの選択肢を作る

HTML
option

オプショタグをセレクトタグで囲みます。

selected属性をつけると最初から選ばれている状態になります。

ドロップダウンリスト復習

See the Pen
ドロップダウンリスト
by moku11 (@moku11)
on CodePen.

チェックボックスの作り方

HTML
input type="checkbox"

チェックボックスは四角い形のマークです。

checked属性でチェックされた状態にもできます。

labelで囲んで紐付けすることも出来ます。

グループ化するためにfieldsetタグで囲んでlegendタグでグループにキャプションをつけます。

チェックボックスの復習

See the Pen
チェックボックス
by moku11 (@moku11)
on CodePen.

ラジオボタンを作る

ラジオボタンは丸い形をしています。

HTML
input type="radio" name=""

同じname属性をつけてあげると一つだけ選択が可能になります。

checked属性でをつけるとチェックされた状態になります。

ラジオボタンの復習

See the Pen
ラジオボタン
by moku11 (@moku11)
on CodePen.

 

まとめて送信する方法

HTML
form

お問い合わせフォームで使う入力欄などの全ての部品をフォームタグで囲みます。

action属性は、入力情報を処理するファイル名の場所を指定します。

method属性は、入力情報の送信時のルールを設定します。

フォームタグで囲んであるボタンを押すと送信されます。

まとめ

emailのイメージ

今回はお問い合わせフォームを作るHTMLタグの学習をしてきました。

タグがいっぱいでコードがゴチャゴチャしがちですが、お問い合わせフォーム自体はそんなに難しくないですね。

後はGoogle フォーム【formrun】と連携させればPHPなどのサーバーサイドの言語を知らなくても、メールの送受信が出来るようになりますので頑張っていきましょう。

 

\1週間無料体験/

コメントを残す

メールアドレスが公開されることはありません。