html form many options

Question

Hi I would like to hear if there are alternatives for these forms so I dont have to write for every single option 1. For the age form

1. For the country form

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

Hope you understand my question. Sos for bad english

Answer 1

There is a HTML "range" input, but it's not the most common input method out there and will require some javascript with it. Other than that, the only reasonable method is PHP. Though, if you do use PHP, you can copy and paste the HTML and then insert it into your HTML file if you don't want that page to have PHP. Below are a few HTML only examples. May not work in all browsers, so your server side code should always validate. http://jsfiddle.net/h96nU/1/

The below code shows a few inputs using various methods. The range input will update to show the range value that is currently selected. The last number input uses the HTML5 pattern attribute.

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

More about Data Validation in HTML can be found at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

For PHP method of an age input loop, look below.

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

If you are using PHP for example you could do it like this:

<?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>";
?>

The output of this example would be :

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

For your age selectbox:

<?php 
$maxAge = 99;

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

}
echo "</select>";
?>