HTML Form, Make input boxes central

Question

I have created a form to capture card information from a user.

At the moment it appears

card number:[..........] 

CVV code:[....]

Name as appears on card:[..........]

(pretend the square brackets is the box the user types in and the dots arent there.)

I want it to appear

card number: .......................... [........]

cvv: ...................................[........]

In a nutshell I want all of the user input boxes to be aligned in the center so it looks neat.

I am not using css ( I know I should but for this particular form there is a business reason why)

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>

Please tell us the business reason for not using CSS? – mplungjan Oct 09 '15 at 14:12 — mplungjan, Oct 09 '15 at 14:12

score 0 · Answer 1 · answered Oct 09 '15 at 13:43

in html only, you can either create a table with fixed cells or try to put some tab-stops in between:

<tab id=t1>

or

 <tab indent=20>

with intent you can set the length of the tab

If you can use JavaScript or CSS: there are more and better options!

score -1 · Answer 2 · answered Oct 09 '15 at 13:49

A structure such as this would suit your needs, and don't forget if you can't use external CSS perhaps you can use inline styles. Anyway:

<table>
<tr>
    <td>Card Number:</td>
    <td><input type="number" name="cardnumber" required="required" th:field="*{cardNumber}" maxlength="16" /></td>
</tr>
<tr>
    <td>Card Expiration:</td>
    <td>
        <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" />
    </td>
</tr>
<tr>
    <td>Name (As Shown On Card):</td>           
    <td><input type="text" name="name" style="text-transform: uppercase" th:field="*{name}" required="required" /></td>
</tr>
<tr>
    <td>CVV Code:</td>          
    <td><input type="number" name="cvvcode" maxlength="16" th:field="*{cardCVV}" required="required" /></td>
</tr>

HTML Form, Make input boxes central

2 Answers2