Jump to content

How to make an election

DaryllB

By DaryllB
in PHP Coding Help

 Share

Recommended Posts

DaryllB Newbie

DaryllB

Posted
Posted

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>

 

Link to comment
https://forums.phpfreaks.com/topic/316335-how-to-make-an-election/
Share on other sites
cyberRobot Prolific Member

cyberRobot

Posted
Posted

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

  • Thanks 1
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.