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

学習中のカメ

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

学び続けるウサギ

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

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

HTML

<input type="text">

テキスト入力欄

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

送信ボタンを作る

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

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

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

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

HTML
<button type="submit"></button>

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">名前</label>
<input type="text" id="name">

forid を紐づける


for属性とid属性を紐付けしたので、上記の名前の文字をクリックしてもテキストを入力できるようになります。
HTML
<label>名前 <input type="text"></label>
for属性とid属性を削除してlabelタグの中に入れることもできます

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

HTML
<textarea></textarea>

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

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

HTML
<input type="email">

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

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

HTML
<select></select>

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

<label></label>で紐づけます。

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

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

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

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

HTML
<option></option>

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

<option>1</option>

<option>2</option>

<option>3</option>

<option selected>3</option>

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

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

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

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

HTML
<input type="checkbox">

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

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

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

<label><input type="checkbox">a</label>
<label><input type="checkbox">b</label>
<label><input type="checkbox">c</label>

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

<fieldset>
<legend>選択する</legend>
<label><input type="checkbox">a</label>
<label><input type="checkbox">b</label>
<label><input type="checkbox">c</label>
</fieldset>

チェックボックスの復習

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

ラジオボタンを作る

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

HTML
<fieldset>
<legend>一つだけ選択</legend>
<label><input type="radio" name="one">a</label>
<label><input type="radio" name="one">b</label>
<label><input type="radio" name="one">c</label>
</fieldset>

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

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

ラジオボタンの復習

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

 

まとめて送信する方法

HTML
<form action="" method="post"></form>

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

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

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

例)<form action="process.php"method="post">
<label>担当<input type="text" name="username"></label>
<label>タスク<input type="text" name="task"></label>
<button>送信する</button>
</form>
formタグで囲むとポスト方式でPHPへ
formタグで囲んであるボタンを押すと送信されます。

まとめ

emailのイメージ

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

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

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

 

\1週間無料体験/

コメントを残す

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