How to make an election

DaryllB · May 23, 2023

How do you make election? where you will have to add a candidate from the database?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HariVote, Online Vote">
    <meta name="description" content="A Voting application mostly used by the PLM Students in Manila">
    <title>Make an Election</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }

        img {
            float: left;
        }

        h1 {
            font-family: tahoma, verdana, arial, sans-serif;
            font-size: 40px;
            list-style: none;
            letter-spacing: 0.05px;
            margin: 0;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            padding: 2px;
        }

        h2 {
            font-size: 35px;
            color: #008080;
            text-align: center;
            margin-top: 50px;
        }

        h3 {
            color: #fff;
        }

        form {
            background-color: #fff;
            border-radius: 5px;
            padding: 60px;
            margin: 50px auto;
            max-width: 600px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        input[type="submit"] {
            background-color: #008080;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #005b96;
        }

        footer {
            background-color: #008080;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            color: #fff;
            padding: 0px;
        }

        .navbar {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            color: white;
        }

        .brand-title {
            font-size: 1.5rem;
            margin: .5rem;
        }

        .navbar-links {
            height: 100%;
        }

        .navbar-links ul {
            display: flex;
            margin: 0;
            padding: 0;
        }

        .navbar-links li {
            list-style: none;
        }

        .navbar-links li a {
            display: block;
            text-decoration: none;
            color: #033E3E;
            padding: 1rem;
        }

        .navbar-links li:hover {
            background-color: #25c19b;
        }

        .toggle-button {
            position: absolute;
            top: .75rem;
            right: 1rem;
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
        }

        .toggle-button .bar {
            height: 3px;
            width: 100%;
            background-color: #033E3E;
            border-radius: 10px;
        }

        @media (max-width: 800px) {
            .navbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .toggle-button {
                display: flex;
            }

            .navbar-links {
                display: none;
                width: 100%;
            }

            .navbar-links ul {
                width: 100%;
                flex-direction: column;
            }

            .navbar-links ul li {
                text-align: center;
            }

            .navbar-links ul li a {
                padding: .5rem 1rem;
            }

            .navbar-links.active {
                display: flex;
            }
        }

        #logo {
            padding: 0;
            margin-left: 0%;
            width: auto;
            float: left;
        }

        #logo h1 a,
        h1 a:hover {
            color: #033E3E;
            text-decoration: none;
        }

        #logo h1 span {
            color: #42B72A
        }

        #header {
            background: #fff;
        }

        #header-inner {
            margin: 0 auto;
            padding: 0;
            width: 970px;
        }
    </style>
</head>

<body>

    <div id="page">
        <header id="header">
            <nav class="navbar">
                <div id="logo">
                    <img height="55px" width="55px" src="img/logo.png">
                    <h1><a href="index.php">Hari<span>Vote</span></a></h1>

                </div>
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="navbar-links">
                    <ul>
                        <li><a href="profile.html">Profile</a></li>
                        <li><a href="election.html">Make Election</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="help.html">Help</a></li>
                        <li><a href="logout.php">Logout</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <main>
            <h2>Make an Election</h2>

            <form>
                <label for="election_name">Election Name:</label>
                <input type="text" id="election_name" name="election_name" required>

                <label for="description">Description:</label>
                <textarea id="description" name="description" required></textarea>

                <label for="start_date">Start Date</label>
                <span>
                    <select name="month">
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </span>
                <span>
                    <select name="day">
                        <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                </span>
                <span>
                    <select name="year">
                        <option value="2030">2030</option>
                        <option value="2029">2029</option>
                        <option value="2028">2028</option>
                        <option value="2027">2027</option>
                        <option value="2026">2026</option>
                        <option value="2025">2025</option>
                        <option value="2024">2024</option>
                        <option value="2023">2023</option>
                    </select>
                </span>
                <br><br>
                <label for="end_date">End Date</label>
                <span>
                    <select name="month">
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </span>
                <span>
                    <select name="day">
                        <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                </span>
                <span>
                    <select name="year">
                        <option value="2030">2030</option>
                        <option value="2029">2029</option>
                        <option value="2028">2028</option>
                        <option value="2027">2027</option>
                        <option value="2026">2026</option>
                        <option value="2025">2025</option>
                        <option value="2024">2024</option>
                        <option value="2023">2023</option>
                    </select>
                </span>
                <br><br>

                <input type="submit" value="Submit">
            </form>
        </main>

        <footer>
            <h3>&copy; 2023 HariVote. All rights reserved.</h3>
        </footer>
</body>

</html>

ginerjm · May 23, 2023

I see a lot of html but no programming. Why are you here? What do you mean by 'make an election'?

requinix · May 23, 2023

Are we talking "make an election" like CIA? I could help you with that... but then I'd have to shoot you.

cyberRobot · May 23, 2023

Are you familiar with getting data from HTML forms? If not, you could start here:
https://www.php.net/manual/en/tutorial.forms.php

Note that your <form> tag doesn't include the method attribute, which causes the data to be sent using the GET method. So, the data will be available through $_GET in PHP. More information about the <form> tag can be found here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Side note: HTML5 provides a built-in date field. That will be much easier for the user...and more accessible to people with disabilities. More information can be found here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Sign In

How to make an election

Recommended Posts

DaryllB

Link to comment

Share on other sites

ginerjm

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information