HTML表单，使输入框居中[重复]

Posted 2023-02-22

技术标签:

【中文标题】HTML表单，使输入框居中[重复]【英文标题】：HTML Form, Make input boxes central [duplicate] 【发布时间】：2016-01-07 11:42:24 【问题描述】：

我创建了一个表单来获取用户的卡片信息。

它出现的那一刻

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

CVV code:[....]

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

（假设方括号是用户输入的框，而点不在此处。）

我希望它出现

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

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

简而言之，我希望所有用户输入框都在中心对齐，这样看起来很整洁。

我没有使用 css（我知道我应该使用，但是对于这种特殊形式，这是有商业原因的）

这是我当前的代码

    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>

【问题讨论】：

请告诉我们不使用 CSS 的商业原因？ 【参考方案1】：

这样的结构会满足您的需求，别忘了如果您不能使用外部 CSS，也许您可以使用内联样式。无论如何：

<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>

【讨论】：

【参考方案2】：

仅在 html 中，您可以创建一个包含固定单元格的表格或尝试在其间放置一些制表位：