本日はWeb制作初心者向けに、HTMLとCSSで簡単に作るお問い合わせフォームのコードの紹介と、その解説をしていきます。
もちろん、そのままコピペでもOKですし、タグの意味を覚えたい方は解説まで読んでいってください！
成果物の確認
まずは今回の目的であるお問い合わせフォームの成果物を確認していきます。
僕のポートフォリオでもお問い合わせフォームを作成していまして、もう少し改良していきますが、とりあえずこの形が一般的に知られるお問い合わせフォームですね。
お問い合わせフォームをページの縦横中央に寄せたり、フォントを変えたりしていますが、そこはお好みでお願いしますので、今回コードは記載しません。
ちなみにページや親クラス内の縦横中央に寄せるやり方は色々ありますが、初心者でも簡単にできる方法を２つご紹介しています。
気になる方は下記リンクからご参照ください。
コードと解説
では実際のコードと、その解説をしていきます。
HTML・CSSのコードは以下になります。
See the Pen お問い合わせ by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.
ある程度HTMLとCSSが理解できていて、コピーだけしたい方は是非ご利用ください。
コードの解説【HTML】
まずはHTMLですが、使用していくのが以下のタグになります。
・formタグ
・labelタグ
・inputタグ
・textareaタグ
・buttonタグ
それぞれを解説していきます。
formタグ
formタグは簡単に言うと、入力欄や送信ボタンなどお問い合わせフォームを大きく囲むタグで、中に囲った内容を指定した方法でサーバーに送る役割があります。
今回はまだ何も指定していませんが、method属性で指定した転送方法でサーバへ送信され、action属性で指定したアクションを呼び出します。
コードとしては以下のようになります。
【<form method=”○〇〇” action=”○〇〇”】
labelタグ
labelタグはフォームの中の項目名と実際の項目を結びつけるものになります。
例えば最初のlabelタグで『for=”name”』とし、項目名を『氏名』としています。
これを、次のinputタグで『id=”name”』とすることで、項目名である氏名と氏名の入力欄が結び付けられるため、項目名である氏名をクリックすると、氏名の入力に移れます。
百聞は一見にしかず。
実際に上記コードの『Result』のお問い合わせフォームの『氏名』をクリックして、関連づけられてるか確かめてみてください。
imputタグ
inputタグはフォーム内でテキスト入力欄やラジオボタン、チェックボックスなどを作成するタグになります。
type属性でテキスト入力欄やラジオボタンなどのタイプを指定できます。
今回は『type=”text”』としているため、テキスト入力欄が表示されています。
次にname属性ですが、そのままのとおり、そのinputタグの名前を指定できるため、データを送った際にわかりやすくします。
そして今回は指定していませんが『value属性』というものもあります。
value属性では、フォームの初期値を指定することができ、例えば氏名のinputタグのところに『value=”苗字と名前の間は全角スペース”』と指定しておくと、入力する前は指定したテキストが初期値で表示されています。
textareaタグ
textareaタグは複数行の入力欄を作成する際に使用するタグです。
ですので、感想や内容を入力してもらう場合や、選択式では無く記述式にするなどの際にしようするものになります。
今回は指定していませんが、通常『rows属性』や『cols属性』で高さと幅を指定します。（なぜ今回それで指定していないかは…調整がめんどさくてwidthとheightでサッと終わらせたからとは言えません）
buttonタグ
最後にbuttonタグですが、その名の通りボタンを作るタグです。
ボタンにも『button』『submit』『reset』の属性が指定できます。
今回指定している『submit』は送信ボタンを定義しています。
コードの解説【CSS】
次にCSSの解説です。
正直あまり難しいことはしていませんが、一応いくつかだけ解説します。
font-familyとfont-weight
今回フォントをゆるい手書き風に変えています。
その指定を【font-familyプロパティ】で行います。
フォントを変える際は基本的に『Googleフォント』を使用しています。
『Google フォント』を使用する場合、指定のリンクなどをはる作業がでてきますので、その点注意してください。
それもまた記事にしたらリンクをはります。
手書き風にしたら、『お問い合わせ』の見出しは【font-weightプロパティ】を使用し、他の表示よりも少し太文字にしています。
細くしたり太くしたりできるので、文字のメリハリをつける時に使用するプロパティです。
background-colorとborder-radius
今回パッとみてわかりやすくするため、項目名の背景を変え、手書き風に合うように角を丸くしています。
背景を変える指定は【background-color】で変えています。
ちなみにグラデーションにしたい場合は【background: linear-gradient(色などの指定);】で変えられます。
ここはお好みに合わせてください。
そして、角を丸くするのが【border-radius】です。
今回【border-radius: 5px;】と指定しているため、４つ角全てが5px分丸くなっています。
その他
雑になってしまいますが、その他は【margin】や【padding】で間隔や余白の指定をしています。
初期設定だとギチギチに詰め込まれた状態になっています。
あと、【position: absolute;】が指定されていますが、これは気にしないでください。
僕の作成しているフォームの中で、入力欄を右に寄せたかったのでそれが入り込んでました。
コメントを残す