学習中のカメ
学び続けるウサギ
目次
HTMLタグを覚えてお問い合わせフォームを作ろう
テキスト入力欄を表示させる
input type="text"
テキスト入力欄
<input type="text"> <!-- 終了タグはいりません -->1行のテキスト入力を受け取るための要素です。なので終了タグ(</>)はいりません。
requiredをタグの中に記述すると送信時に空白に対して簡単にエラーを出させることができます。送信ボタンを作る
input type="submit" value="〜"
input要素にtype属性をつけ、type属性にsubmitを指定すると送信ボタンになります。
value属性をつけるとテキストの送信部分を変更することができます。
日本語のブラウザではデフォルトで「送信」と表示されます。
button type="submit"
buttonタグも同じように送信ボタンとして使えます。inputよりもbuttonタグの方がCSSの擬似要素などを使いデザインの幅を広げやすいのでよく使われています。画像にも使うことができます。
読み方はブットンじゃなくボタンタグです笑
disabled属性をつけると無効化することが出来ます。
送信ボタンにこだわりの画像を使いたい場合は、image属性をつけて画像を指定してあげます。
ボタンの復習
See the Pen
ボタンの作り方 by moku11 (@moku11)
on CodePen.
input type="password"
パスワードの入力欄
パスワードを入力するテキスト入力欄に文字が伏せられるようになります。
入力欄に入力例を薄く表示させたい
input placeholder="〜"
プレイスホルダー属性を使うと入力欄に薄く表示させたいテキストが表示されます。
記入例を入れることで親切な入力欄になり、ユーザビリティが高くなります。
テキスト入力欄の復習
See the Pen
contact form by moku11 (@moku11)
on CodePen.
labelを使ってラベルと部品をfor属性とid属性を使って紐付ける方法
label for="name" input type="text" id="name"
for と id を紐づける
labelの中に 名前 input type=”text”で
for属性とid属性を削除してlabelタグの中に入れることもできます。
複数行のテキストを入力する欄を作りたい
textarea
テキストエリアタグは、お問い合わせ内容などを記入する複数行のテキスト入力欄を表示させることが出来ます。
メールアドレスのみを入力する欄を作りたい
input type="email"
見た目はテキスト入力欄と変わりませんが、@マークを入力欄に入れないと送信できませんというポップアップが出てきます。
ドロップダウンリストを作りたい
select
セレクトタグを使って表示させます。
labelで紐づけます。
セレクトタグにsize=”数字”で行を一度に表示させることが出来ます。
セレクトタグにmultipleで複数選択出来るようになります。（macではcommandを押しながら選択可）
for属性とid属性で紐づけます。
ドロップダウンリストの選択肢を作る
option
オプションタグをセレクトタグで囲みます。
selected属性をつけると最初から選択されている状態になります。
ドロップダウンリスト復習
See the Pen
ドロップダウンリスト by moku11 (@moku11)
on CodePen.
チェックボックスの作り方
input type="checkbox"
チェックボックスは四角い形のマークです。
checked属性でチェックされた状態にもできます。
labelで囲んで紐付けすることも出来ます。
グループ化するためにfieldsetタグで囲んでlegendタグでグループにキャプションをつけます。
チェックボックスの復習
See the Pen
チェックボックス by moku11 (@moku11)
on CodePen.
ラジオボタンを作る
ラジオボタンは丸い形をしています。
input type="radio" name=""
同じname属性をつけてあげると一つだけ選択が可能になります。
checked属性でをつけるとチェックされた状態になります。
ラジオボタンの復習
See the Pen
ラジオボタン by moku11 (@moku11)
on CodePen.
まとめて送信する方法
form
お問い合わせフォームで使う入力欄などの全ての部品をフォームタグで囲みます。
action属性は、入力情報を処理するファイル名の場所を指定します。
method属性は、入力情報の送信時のルールを設定します。
まとめ
今回はお問い合わせフォームを作るHTMLタグの学習をしてきました。
タグがいっぱいでコードがゴチャゴチャしがちですが、お問い合わせフォーム自体はそんなに難しくないですね。
後はGoogle フォームや【formrun】と連携させればPHPなどのサーバーサイドの言語を知らなくても、メールの送受信が出来るようになりますので頑張っていきましょう。
＼１週間無料体験／
