My form is currently set up to collect card details from users.
Right now, it looks like this:
card number:[..........]
CVV code:[....]
Name as appears on card:[..........]
(Imagine the square brackets are input boxes and there are no dots inside.)
I want it to look like this:
card number: .......................... [........]
cvv: ...................................[........]
In simple terms, I want all the user input boxes to be centered for a neater appearance.
I am avoiding the use of CSS for this particular form due to business reasons.
This is my current code:
<br></br> Card Number: <input type="number"
name="cardnumber" required="required" th:field="*{cardNumber}"
maxlength="16" /> <br></br> Card Expiration: <select
name='expireMM' id='expireMM' th:field="*{cardExpiry}"
required="required">
<option value=''>Month</option>
<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> <select name='expireYY' id='expireYY' required="required">
<option value=''>Year</option>
<option value='10'>2015</option>
<option value='11'>2016</option>
<option value='12'>2017</option>
<option value='13'>2018</option>
<option value='14'>2019</option>
</select> <input class="inputCard" type="hidden" name="expiry" id="expiry"
maxlength="4" /> <br></br> Name (As Shown On Card): <input
type="text" name="name" style="text-transform: uppercase"
th:field="*{name}" required="required" /><br></br> CVV Code: <input
type="number" name="cvvcode" maxlength="16" th:field="*{cardCVV}"
required="required" /> <br></br>