Untitled

<html>

    <head>

        <title>Payment Processing Page</title> <!-- Title of a descriptive title -->
        <link rel="stylesheet" type="text/css" href="css/mysite.css"/>
    </head>
    <body>

        <h2>Enter Payment Information</h2> <!-- h2 header for the cc payments -->

        <!-- Position the four provided credit card images between Enter payment info and text fields -->
        <img src="images/AmEx.png">
        <img src="images/Discover.png">
        <img src="images/MasterCard.png">
        <img src="images/Visa.png">

        <!-- Create a form -->  <!-- this is the code from teach <form onSubmit="return validateForm();"> -->
        <form onSubmit="return validateForm();">

            <!-- create the js link -->
            <script type="text/javascript" src="script.js"></script>


            <!-- first name -->
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" required><br>

            <!-- last name -->
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" required><br>

            <!-- Address -->
            <label for="home">Address:</label><br>
            <input type="text" id="home" required><br>

            <!-- City -->
            <label for="City">City:</label><br>
            <input type="text" id="City"><br>

            <!-- Zip -->
            <label for="Zip">Zip Code:</label><br>
            <input type="number" id="Zip" required><br>

            <!-- Email -->
            <label for="Email">Email Address:</label><br>
            <input type ="email" id="Email" required placeholder="Enter valid Email Address."><br>

            <!-- Name on Card -->
            <label for="NonCard">Name on Card:</label><br>
            <input type="text" id="NonCard" required><br>

            <!-- Card Number -->
            <label for="Cardnum">Card Number</label><br>
            <input type="text" id ="CreditCard" required><br>

            <!-- CVV2/CVC also include article about CVV2/CVC -->
            <label for="cvc"><a href="https://en.wikipedia.org/wiki/Card_security_code" target="_blank">cvc:</a></label><br>
            <input type="number" id="cvc" required placeholder="Enter valid cvc"><br>

            <!-- Next create a select field for the state while the first option should contain the text "select state" -->

            <label for="state">State:</label><br>
            <select id="state" name="state"><br>
                <!-- all 50 states -->
                <option value"" selected disabled hidden>Select state</option>
                <option value="Alabama">Alabama</option>
                <option value="Alaska">Alaska</option>
                <option value="Arizona">Arizona</option>
                <option value="Arkansas">Arkansas</option>
                <option value="California">California</option>
                <option value="Colorado">Colorado</option>
                <option value="Connecticut">Connecticut</option>
                <option value="Delaware">Delaware</option>
                <option value="Florida">Florida</option>
                <option value="Georgia">Georgia</option>
                <option value="Hawaii">Hawaii</option>
                <option value="Idaho">Idaho</option>
                <option value="Illinois">Illinois</option>
                <option value="Indiana">Indiana</option>
                <option value="Iowa">Iowa</option>
                <option value="Kansas">Kansas</option>
                <option value="Kentucky">Kentucky</option>
                <option value="Louisiana">Louisiana</option>
                <option value="Maine">Maine</option>
                <option value="Maryland">Maryland</option>
                <option value="Massachusetts">Massachusetts</option>
                <option value="Michigan">Michigan</option>
                <option value="Minnesota">Minnesota</option>
                <option value="Mississippi">Mississippi</option>
                <option value="Missouri">Missouri</option>
                <option value="Montana">Montana</option>
                <option value="Nebraska">Nebraska</option>
                <option value="Nevada">Nevada</option>
                <option value="New Hampshire">New Hampshire</option>
                <option value="New Jersey">New Jersey</option>
                <option value="New Mexico">New Mexico</option>
                <option value="New York">New York</option>
                <option value="North Carolina">North Carolina</option>
                <option value="North Dakota">North Dakota</option>
                <option value="Ohio">Ohio</option>
                <option value="Oklahoma">Oklahoma</option>
                <option value="Oregon">Oregon</option>
                <option value="Pennsylvania">Pennsylvania</option>
                <option value="Rhode Island">Rhode Island</option>
                <option value="South Carolina">South Carolina</option>
                <option value="South Dakota">South Dakota</option>
                <option value="Tennessee">Tennessee</option>
                <option value="Texas">Texas</option>
                <option value="Utah">Utah</option>
                <option value="Vermont">Vermont</option>
                <option value="Virginia">Virginia</option>
                <option value="Washington">Washington</option>
                <option value="West Virginia">West Virginia</option>
                <option value="Wisconsin">Wisconsin</option>
                <option value="Wyoming">Wyoming</option>


                <!-- date field, must only display the month and year values of the selected date, restrict the date range from jan 1 2017 - dec 31 2025. Default value is April 2020 -->
                <label for="ExpirDate">Expiration Date</label>
                <input id=ExpirDate type="month" name="ExpirDate" value="2020-04" min="2017-01" max="2025-12">

                <!-- a submit button using the paynow image rather than text -->
                <br><input type="image" src="images/PayNow.png" onsubmit="validateForm()" class="output"></br>
                <!-- <button type="submit" onsubmit="validateForm" name="PayNow" value="PayNow"><img src="images/PayNow.png" alt="Submit the form"></button> -->

                <!-- link to the eportfolio -->
                <a class="lin" href="../index.html">My ePortfolio</a>


        </form>


    </body>


</html>