フォームを作成しよう〜今回の作成したもの〜
ページを作成するにあたって、配置したいものの一つにフォームがあります。
HTMLでフォームを作成することができるようになれば、今まで紹介してきた、見出し、リンク、画像、と合わせて、ページで作成するべき最低限の要素が揃うことになるでしょう。
記述したコードの内容
今回の記述では、<form>要素を記述していきます。
<form>要素とは、フォームの全体を指定する記述です。
この中にフォームを作成する上で必要な要素を追記していきます。
フォーム内の記述ポイント「input」「textarea」
フォームを作成する上で、使用する要素として、<input>と<textarea>を使います。
<input>要素はフォームの入力部分や、ボタンを作成することができる要素です。
「type」属性を「text」にすると、一行のテキスト入力欄ができます。
「submit」にすると送信ボタンを作成することができます。
他にも「checkbox」や「radio」などもありますので、使い方については調べてみるとよいでしょう。
一方<textarea>は複数行の文字を入力することができます。
こちらは、input要素と違って、</textarea>を用いて、タグを閉じる必要がありますので、記述する際にはお気をつけください。
それぞれの「placeholder」や「value」には、入力欄や、ボタンに表示する文字を記述します。
それによって、その入力欄が何を書いて欲しいかを分かりやすくすることができます。
カーソルが重なった時に色を変えたいときに「:hover」
動画をみた際に、分かったかと思いますが、現在、「送信」ボタンにカーソルが重なると色が変わるようにしています。
カーソルが重なったときに表示方法を変える記述方法として、「:hover」を使います。
この部分に記述を加えていくことによって、色を変えるだけでなく、動きを加えることもできます。
お試しコード
HTML
<div class="bottom-content">
<form class="contact-form">
<h2 class="heading-name">お問い合わせ</h2>
<input type="text" placeholder="お名前" class="small-field">
<input type="text" placeholder="メールアドレス" class="small-field">
<textarea placeholder="メッセージをご記入ください" class="large-field"></textarea>
<input type="submit" value="送信" class="send">
</form>
</div>CSS
.bottom-content{
height: 60vh;
justify-content: center;
align-items: center;
}
.contact-form{
display: flex;
flex-direction: column;
align-items: center;
}
.small-field , .large-field{
width: 80vw;
margin-bottom: 15px;
font-size: 16px;
padding: 15px;
border: 1px solid #b5aaaa;
}
.large-field{
height: 100px;
}
.send{
display: block;
width: 200px;
margin-top: 30px;
padding: 15px;
border: 1px solid white;
background-color: lightblue;
color: white;
}
.send:hover{
background-color: blue;
}
コメント