へっぽコーダー日記05フォームを作る
どうもNaokiです!今日はしっかり使えるフォームの作り方を皆さんと一緒に理解していこうと思います!
そもそもフォームとは??
そもそもフォームとはホームページを見に来てくれた訪問者に対して何か問い合わせをしてもらったり参加型のイベントのページ等を作る時にはほぼ必須な物となります!
作り方(あくまで1例です!)
<div>タグを使い要素のフォーム部分の横幅と縦幅を指定し大きさを決める
<form>タグでこの部分はフォームの場所だと定義します!
<!--html-->
<div class="form">
<!--この中に作る-->
</div>
<!--css-->
.form{
width: 700px;
height: 700px;
}
<!--横幅700px 縦幅700px-->
そして<div class="form">の中にまた<div>タグで内容を囲って行きます!ここで注意すべき点があります!<div>タグの中には<label for="">と書かなければ行けないためです!<label>タグとはこの後使う<input>タグと紐付けるためです!<for="">の部分に任意のクラス名前を付け<imput>タグと紐づけて行きます!
<!--html-->
<div class="form">
<div>
<label for="name">名前</label>
</div>
<div>
<label for="email">メールアドレス</label>
</div>
<div>
<label for="message">内容</label>
</div>
<p>送信する</p>
</div>
<input>タグではフォームタグの中で一番重要な場所である入力フォームを作って行きます!type=""はそのフォームが一体どんな役目を果たすかを意味すると思っていれば間違いでは無いと思います!id=""タグは先程決めたlabelタグの中のfor=""と同じにして紐づけます!ちなみにname=""とは<label>タグの中に入力された物が何かをわかりやすくするためにあります
<!--html-->
<div class="form">
<div class="name">
<label for="name">名前</label>
<input type="text" id="name" name="name">
</div>
<div class="email">
<label for="email">メールアドレス</label>
<input type="mail" id="email" name="email">
</div>
<div class="message">
<label for="message">内容</label>
</div>
<input type="submit" value="送信する">
</div>
次は内容に複数行のテキストを書ける場所を作ります!これは「ご質問はこちら」や「ご要望はこちら」等、任意に書き込むスペースとして有効です!コードで書く場合は<textarea id="" name=""><textarea>と書いて下さい!id=""の意味などは先程と同じです!
<!--html-->
<div class="form">
<div class="name">
<label for="name">名前</label>
<input type="text" id="name" name="name">
</div>
<div class="email">
<label for="email">メールアドレス</label>
<input type="mail" id="email" name="email">
</div>
<div class="message">
<label for="message">内容</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="sousin_btn">
<input type="submit" value="送信する">
<div>
</div>
ここからはcssで装飾していこうと思います!cssでの装飾は人によるので同じように書かなければ行けないわけでは無いので今回はどこにどう書けばcssを利かす事が出来るかを知っていただければcssで更に美しく魅力的なフォームを作ってみて下さい!
まずはフォームの位置を指定して行きます!一番外側の<div>タグにmarginでどこにフォームを設置するかを決めましょう!今回は真ん中に来るようにmargin:0 auto;で真ん中にもってきます!
<!--css-->
.form{
width: 700px;
height: 700px;
margin: 0 auto;
}
次は名前やメールアドレス等に仕切り先をつけようと思います!これをするために各入力フォームを<div>タグでclass分けしているのでborder-topで線を引いて行きます!
.form{
width: 700px;
height: 700px;
margin: 0 auto;
}
.name{
border-top: 1px solid #000000;
}
.email{
border-top:1px solid #000000;
}
.message{
border-top:1px solid #000000;
}
.sousin_btn{
border-top:1px solid #000000;
}
そして更に細かく各<div>ごとにも線を引いて行きます!そのためにはまたhtmlで<div>を指定していきます!
<!--html-->
<div class="form">
<div class="name">
<div class="name_label">
<label for="name">名前</label>
</div>
<div class="name_input">
<input type="text" id="name" name="name">
</div>
</div>
<div class="email">
<div class="email_label">
<label for="email">メールアドレス</label>
</div>
<div class="email_input">
<input type="mail" id="email" name="email">
</div>
</div>
<div class="message">
<div class="message_labl">
<label for="message">内容</label>
</div>
<div class="message_textarea">
<textarea id="message" name="message"></textarea>
</div>
</div>
<div class="sousin_btn">
<input type="submit" value="送信する">
</div>
</div>
ここからは少し複雑な事をします、各要素に<div>を付けたため要素が縦並びになってしまいました。そこでdisply="flex"を各要素をまとめている要素に掛け横並びにしその後で各要素の<div>タグにborder-rightで仕切り線を付けて行きます!
<!--css-->
.form{
width: 700px;
height: 700px;
margin: 0 auto;
}
.name{
border-top: 1px solid #000000;
display: flex;
}
.name_label{
border-right:1px solid #000000;
width: 350px;
}
.name_input{
margin: 0 auto;
}
.email{
border-top:1px solid #000000;
display: flex;
}
.email_label{
border-right:1px solid #000000;
width: 350px;
}
.email_input{
margin: 0 auto;
}
.message{
border-top:1px solid #000000;
display: flex;
}
.message_labl{
width: 350px;
border-right:1px solid #000000;
}
.message_textarea{
width: 350px;
padding-top: 6px;
}
#message{
width: 340px;
height: 100px;
}
.sousin_btn{
border-top:1px solid #000000;
}
かなり複雑そうに見えますが実際はマージンやパディングで位置を指定しボーダーで線を区切るだけなんです!これだけでかなり整理されたフォームになります!
まとめ
今回はフォームを作って行きました!フォームはページを見てくれている人との対話で非常に大切なものになります!なのできれいで見やすいフォームを作りましょう!そうすれば問い合わせが増えるはずです!