Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement