如何在不使用JavaScript的情况下验证HTML表单输入？

Question

我有一个如下形式:

<form action="/html/tags/html_form_tag_action.cfm" method="get">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name_applicant" value="" maxlength="100" />
</td>
</tr>
<tr>
<tr><td>Date Of Birth:</td></tr>
<tr>
<td>Date:</td><td>
<select>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
  <option value ="7">7</option>
  <option value ="8">8</option>
  <option value ="9">9</option>
  <option value ="10">10</option>
  <option value ="11">11</option>
  <option value ="12">12</option>
  <option value ="13">13</option>
  <option value ="14">14</option>
  <option value ="15">15</option>
  <option value ="16">16</option>
  <option value ="17">17</option>
  <option value ="18">18</option>
  <option value ="19">19</option>
  <option value ="20">20</option>
  <option value ="21">21</option>
  <option value ="22">22</option>
  <option value ="23">23</option>
  <option value ="24">24</option>
  <option value ="25">25</option>
  <option value ="26">26</option>
  <option value ="27">27</option>
  <option value ="28">28</option>
  <option value ="29">29</option>
  <option value ="30">30</option>
  <option value ="31">31</option>
</select>
</td>
<td>Month:</td>
<td>
<select>
  <option value ="Jan">Jan</option>
  <option value ="Feb">Feb</option>
  <option value ="Mar">Mar</option>
  <option value ="Apr">Apr</option>
  <option value ="May">May</option>
  <option value ="Jun">Jun</option>
  <option value ="Jul">Jul</option>
  <option value ="Aug">Aug</option>
  <option value ="Sep">Sep</option>
  <option value ="Oct">Oct</option>
  <option value ="Nov">Nov</option>
  <option value ="Dec">Dec</option>
</select>
</td>
<td>Year:</td>
<td>
<input type="text" name="first_name" value="" maxlength="4" />
</td>
</tr>
<tr>
<td>EmailID:</td>
<td>
<input type="text" name="first_name" value="" maxlength="25" />
</td><td>@gmail.com</td>
</tr>
<tr><td> </td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>

在这种形式中,我想确保在文本框中只接受文本作为输入; 并且数字框中只接受数字.如何在不使用JavaScript的情况下执行此操作？

Answer 1

Javascript是在提交之前验证客户端数据的唯一方法.由于可以禁用Javascript,因此服务器端代码应始终在使用之前验证任何提交的数据.

Answer 2

正如大家所说,永远不要相信客户端验证,HTML 5可以解决您的问题,这里有一个例子:

<style>
    body {
        font-family: arial;
        font-size: 15px;
    }

    br {
        clear: left;
    }

    label {
        float: left;
        width: 120px;
    }

    label, span {
        font-weight: bold;
        margin-bottom: 20px;
    }

    span {
        color: red;
        display: inline-block;
    }
</style>

<form action = "/html/tags/html_form_tag_action.cfm" method = "get">
    <!-- Regular expression took care of the "maxlength" attribute -->

    <label>Name: </label>
    <input autofocus = "autofocus" name = "name_applicant" pattern = "^\D{0,100}$" required = "required" type = "text" /> * <br />

    <label>Date of birth: </label>
    <input name = "name_applicant" required = "required" type = "date" /> <br />

    <label>Email Id: </label>
    <input name = "first_name" pattern = "^\D{0,15}\@gmail\.com$" placeholder = "anything@gmail.com" required = "required" type = "email" /> *<br />

    <span>* Do not use numbers</span> <br />

    <input type = "submit" value = "Submit" />
</form>

预览(大多数人没有Opera或Safari)