Skip to content

Instantly share code, notes, and snippets.

@webapprentice
Last active August 29, 2015 13:56
Show Gist options
  • Save webapprentice/9143041 to your computer and use it in GitHub Desktop.
Save webapprentice/9143041 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment