html表单很多选项

Question

您好，我想知道这些表格是否有替代品 所以我不必为每个选项都写 1.对于年龄形式

1. 国家表格

   <select name="age"> <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> <!--And again and again and... again--> <option value="99">99</option> </select>

                   <select name="country">
                       <option value="England">England</option>
                       <option value="Sweeden">Sweeden</option>
                       <option value="Norway">Norway</option>
                       <option value="Denmark">Denmark</option>
                       <option value="Usa">Usa</option>
                       <option value="Spain">Spain</option>
                       <option value="Scotland">Scotland</option>
                       <option value="Ireland">Ireland</option>
                       <option value="French">French</option>
                       <option value="Italy">Italy</option>
                       <option value="Germany">Germany</option>
                       <option value="Poland">Poland</option>
                       <option value="Netherland">Netherland</option>
                       <option value="Australia">Australia</option>
                       <option value="China">China</option>
                       <option value="Japan">Japan</option>
                       <option value="Singapore">Singapore</option>
                       <option value="Russia">Russia</option>
                       <option value="Other">Other</option>
                   </select>
   

希望你能理解我的问题。英语不好的求救

Answer 1

有一个HTML“范围”输入，但它不是最常见的输入法，需要一些javascript。除此之外，唯一合理的方法是 PHP。但是，如果您确实使用 PHP，您可以复制并粘贴 HTML，然后如果您不希望该页面具有 PHP，则将其插入到您的 HTML 文件中。下面是一些仅 HTML 的示例。可能不适用于所有浏览器，因此您的服务器端代码应始终进行验证。 http://jsfiddle.net/h96nU/1/

以下代码显示了使用各种方法的一些输入。范围输入将更新以显示当前选择的范围值。最后一个数字输入使用 HTML5 模式属性。

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

<div>
    <input id="range" type="range" min="1" max="120" step="1" />
    <span id="range_value">0</span>
</div>
<div>
    <input type="number" />
</div>
<div>
    <input type="text" />
</div>
<div>
    <input type="number" min="1" max="120" step="1" id="n1" name="age" pattern="\d+" />
</div>

var input = document.getElementById('range');
input.addEventListener('change',input_change,false);

function input_change(e) {
     var target = e.target || e.srcElement;
     var value = target.value;
     var showdiv = document.getElementById('range_value');
     showdiv.textContent = value;
}

有关 HTML 中的数据验证的更多信息，请访问 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

对于年龄输入循环的PHP方法，请看下面。

<?php
   $min = 1;
   $max = 100;
   echo '<select name="age">';
   for($i = $min; $i <= $max; $i++) {
      echo '<option value="'.$i.'">'.$i.'</option>';
   }
   echo '</select>';
?>

Answer 2

例如，如果您使用 PHP，您可以这样做：

<?php 
$myArray = ['USA','Australia','ETC ETC ETC'];

echo '<select name="country">';
foreach ($myArray as $value) {
  echo '<option value="'.$value.'">';
  echo $value;
  echo "</option>";

}
echo "</select>";
?>

这个例子的输出是：

<select name="country">
<option value="USA">USA</option>
<option value="Australia">Australia</option>
<option value="ETC ETC ETC">ETC ETC ETC</option>
</select>

对于您的年龄选择框：

<?php 
$maxAge = 99;

echo '<select name="age">';
for ($i=1; $i < $maxAge; $i++) { 
    echo '<option value="'.$i.'">';
  echo $i;
  echo "</option>";

}
echo "</select>";
?>