HTMLとCSSを用いて自身についてのサイトを作成しているのですが、プログラミング言語の中ではデザイン性の重要度が高く少し苦戦を強いられています。
今は書いたコードがすぐに反映されるVSCodeのLiveServerという拡張機能を用いて、納得いくまで何度も試しています。
その中で、今回はフォームについて復習をかねて説明したいと思います。

フォーム

form.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム</title>
    <link rel="stylesheet" href="form.css">
</head>
<body>
    <div class="form">
        <p>お名前</p>
        <input>
        <p>メールアドレス</p>
        <input>
        <p>お問い合わせ内容</p>
        <textarea></textarea><br>
    </div>
    <div class="contact-submit">
        <input type="submit" value="送信">
    </div>
</body>

デザイン性は置いといて、とりあえず簡単なフォームは完成しました。
ここで注意したいのは、inputは他の要素とは違って</>で閉じる必要がない点です。
いつもついクセで、閉じタグを使用してしまいそうになります。

form.css

.form input {
    width: 300px;
    margin-bottom:10px;
    border: 1px solid;
    font-size: 18px;
}

.form textarea {
    height: 100px;
    width: 300px;
    margin-bottom:10px;
    border: 1px solid;
    font-size: 18px;
}

.contact-submit input {
    width: 150px;
    text-align: center;
}

CSSの方では、inputの大きさ、textareaの大きさ、送信ボタンの大きさを調節しました。
この数値は、個人的に一番しっくりきた大きさです。

まとめ

今回はtypeを使用せずに書きましたが、日時などはtypeを用いた方が圧倒的に便利なので勉強していきたいです。
フォームは、どれくらいの長さの文章が送られてくるかやサイトによってベストな大きさは変わるので、すぐにサイトに合ったベストな大きさを見つけられるようになりたいですね。

HTMLとCSSでのフォームの基礎的な作り方

フォーム

まとめ