投票ページの作成④候補者追加ページの作成 - プログラミングの理解が遅すぎる初心者がJavaScript、Node.jsで投票型掲示板を作ろうとしてます

これまで、トップページ、投票ページを作成してきました。

で、投票ページには投票ボタンと投票結果を表示することにしたのですが、投票の候補者を追加できるようにする必要もあります。

今回はそのためのページを作成していくことにします。

候補者を追加するわけですので、普通に「add.html」というファイル名にでもしておきましょう。

送信する内容は、名前と年齢くらいでいいですかね。

投稿フォームにつきましては以前作成しましたので、そちらを参照していただければと思います。

html-css-javascript.hatenadiary.com

これを参考にして候補者とその年齢をデータとして送信するフォームを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>候補者追加</title>
</head>
<body>
    <form id="addCandidateForm" action="addCandidate" method="post">
        <label for="candidateName">候補者名:</label>
        <input type="text" id="candidateName" name="candidateName" placeholder="候補者" required>
        <label for="candidateAge">候補者年齢:</label>
        <input type="number" id="candidateAge" name="candidateAge" min="0" max="150" placeholder="年齢"  required>
        <button type="submit">追加</button>
    </form>
</body>
</html>

今までもそうしてきましたけど、英単語をつなぐときにはハイフンにして「candidate-age」のようにしてもいいんですけど、これをやるとJavaScriptで書くときに不便なので「candidateAge」のように、二つ目以降の単語の頭を大文字にするということで統一します。

ここまでで使ったハイフンもすべて書き直します。

ハイフンを消してから、次の単語の頭を大文字にするだけですから難しいものではないと思いますが、ちゃんとコピペで再現できるようにまとめの記事で全部記載しておきます。

あと候補者年齢のほうですが、maxとminを付けることでめちゃくちゃな数字を入れられないようにしました。

requiredは入力必須の項目であることを意味します。

無記入では送信できないようにしました。

で、できたのがこちら。

当然このままじゃ不格好なのでCSSで揃えていくことにします。

まあそこまで難しいことをするわけでもなく、縦に並べるくらいでいいですね。

#addCandidateForm {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 2rem auto;
  gap: 1rem;
}

これで以下のようになりました。

とりあえず形はこれでよさそうです。

で、次はテーブルや候補者追加のフォームを制御するJavaScriptについて書いていこう、と思ったのですが、実をいうとここまでCSSを書いてたのに反映されなくて困った、というようなことが結構ありました。

なので次回ではすべてのページに共通するヘッダーをファイルにしてすべてのページに反映させるようにしたいと思います。