<section>
      <h1>Payment Form</h1>
        <form id="payment" action="http://www.example.com/sb/payment" method="post">
            <fieldset id="billing">
              <legend>Biling Information (required)</legend>

                <label for="firstBox">First Name</label>
                <input name="fName" id="firstBox" type="text" required />

                <label for="lastBox">Last Name</label>
                <input name="lName" id="lastBox" type="text" required />

                <label for="streetBox">Street Address</label>
                <input name="street" id="streetBox" type="text" required />

                <label for="streetBox2">Street Address (2)</label>
                <input name="street2" id="streetBox2" type="text" />

                <label for="cityBox">City</label>
                <input name="city" id="cityBox" type="text" required />

                <label for="stateBox">State</label>
                <input name="state" id="stateBox" type="text" list="stateList" required />
                <datalist id="stateList">
                  <option value="AL" />
                  <option value="AK" />
                  <option value="AZ" />
                  <option value="AR" />
                  <option value="CA" />
                  <option value="CO" />
                  <option value="CT" />
                  <option value="DE" />
                  <option value="FL" />
                  <option value="GA" />
                  <option value="HI" />
                  <option value="ID" />
                  <option value="IL" />
                  <option value="IN" />
                  <option value="IA" />
                  <option value="KS" />
                  <option value="KY" />
                  <option value="LA" />
                  <option value="ME" />
                  <option value="MD" />
                  <option value="MA" />
                  <option value="MI" />
                  <option value="MN" />
                  <option value="MS" />
                  <option value="MO" />
                  <option value="MT" />
                  <option value="NE" />
                  <option value="NV" />
                  <option value="NH" />
                  <option value="NJ" />
                  <option value="NM" />
                  <option value="NY" />
                  <option value="NC" />
                  <option value="ND" />
                  <option value="OH" />
                  <option value="OK" />
                  <option value="OR" />
                  <option value="PA" />
                  <option value="RI" />
                  <option value="SC" />
                  <option value="SD" />
                  <option value="TN" />
                  <option value="TX" />
                  <option value="UT" />
                  <option value="VT" />
                  <option value="VA" />
                  <option value="WA" />
                  <option value="WV" />
                  <option value="WI" />
                  <option value="WY" />
                </datalist>

                <label for="zipBox">ZIP/Postal Code</label>
                <input name="zip" id="zipBox" type="text" pattern="^\d{5}(-\d{4})?$"/>

                <label for="countryBox">Country</label>
                <input name="country" id="countryBox" type="text" value="United States" required />

                <label for="phoneBox">Phone</label>
                <input name="phone" id="phoneBox" type="tel" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$"/>

            </fieldset>

          <fieldset id="creditCard">
            <legend>Credit Card(required)</legend>

              <fieldset id="cCard" required>
                <label class="cardLabel">
                  <input name="cardLabel" value="amex" type="radio" /><img src="sb_amex.png" alt="amex"/>
                </label>
                <label class="cardLabel">
                  <input name="cardLabel" value="discover" type="radio" /><img src="sb_discover.png" alt="discover" />
                </label>
                <label class="cardLabel">
                  <input name="cardLabel" value="master" type="radio" /><img src="sb_master.png" alt="mastercard"/>
                </label>
                <label class="cardLabel">
                  <input name="cardLabel" value="visa" type="radio" /><img src="sb_visa.png" alt="visa" />
                </label>
              </fieldset>

         <label for="cardNumber">Credit Card Number</label>
          <input name="cardNumber" id="cardBox" type="text" pattern="^(?:4[0-9]{12}(?:[0-9]
           {3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])
            [0-9]{11}|(?:2131|1800|35\d{3})\d{11})$" required />

            <label for="cardMonth">Expiration Date</label>
              <select name="cardMonth" id="monthList" required>
                <option value="">--Month--</option>
                <option value="1">January (01)</option>
                <option value="2">February (02)</option>
                <option value="3">March (03)</option>
                <option value="4">April (04)</option>
                <option value="5">May (05)</option>
                <option value="6">June (06)</option>
                <option value="7">July (07)</option>
                <option value="8">August (08)</option>
                <option value="9">September (09)</option>
                <option value="10">October (10)</option>
                <option value="11">November (11)</option>
                <option value="12">December (12)</option>
              </select>
                  <select name="cardYear" id="yearList" required>
                    <option value="">--Year--</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                  </select>

            <label for="csc">CSC</label>
              <input name="CSC" id="cscBox" maxlength="3" pattern="^\d{3}$" placeholder="nnn" required/>
            </fieldset>

           <button type="submit"><img src="sb_button.png" alt="next" /></button>

         </form>