tutorial_50_example_1.html

<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;
  }
  label {
    display: inline-block;
    width: 200px;
    background-color: #eee;
    padding: 5px;
  }

  input {
    width: 250px;
  }
</style>


<p class='form-row'>New Form INPUT Attributes in HTML5 :</p>

<form method='post'  action="tutorial_50_demo_1">
<div class='form-row'>
<span class='tag'>autofocus</span>
<label for="number">Enter a Number</label>
<input type="number" name="number_autofocus" autofocus
       value="<%= @params['number_autofocus'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>placeholder</span>
<label for="number_placeholder">Enter a Number</label>
<input type="number" name="number_placeholder" placeholder="Enter a number between 1 and 10"
       value="<%= @params['number_placeholder'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>required</span>
<label for="number_required">Enter a Number</label>
<input type="number" name="number_required" required
       value="<%= @params['number_required'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>min max</span>
<label for="number_min_max">Enter a Number</label>
<input type="number" name="number_min_max" required
       min=1 max=10
       title="Enter a number between 1 and 10"
       value="<%= @params['number_min_max'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>step</span>
<label for="number_step">Enter a Number</label>
<input type="number" name="number_step" required
       step=10
       min=10 max=1000000
       value="<%= @params['number_step'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>maxlength</span>
<label for="text_maxlength">Enter Text</label>
<input type="text" name="text_maxlength"
       maxlength=10
       title="Maximum length 10 characters"
       value="<%= @params['text_maxlength'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>pattern</span>
<label for="text_pattern">Enter Text</label>
<input type="text" name="text_pattern"
       pattern="\S+ \S+"
       title="Format: FirstName LastName"
       value="<%= @params['text_pattern'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>autocomplete</span>
<label for="text_autocomplete">Enter Text</label>
<input type="text" name="text_autocomplete" autocomplete
       value="<%= @params['text_autocomplete'] || '' %>">
</div>

<div class='form-row'>
<span class='tag'>list</span>
<label for="text_list">Enter Text</label>
<input type="text" name="text_list" list='text_choices'
       value="<%= @params['text_list'] || '' %>">
</div>

<datalist id="text_choices">
  <option value="Ferrari">
  <option value="Fiat">
  <option value="Ford">
  <option value="Volkswagen">
  <option value="Volvo">
</datalist>

<div class='form-row'>
<span class='tag'></span>
<label for="submit">&nbsp;</label>
<input type="submit" value="Submit Form">
</div>
</form>