HTML5 Form Input Types and Attributes

by horhey

HTML

<link rel="stylesheet" href="http://dryan.com/css3/css/html5-reset.css">
<form action="/echo/html/" method="POST">
      <datalist id="classnames">
       <option value="html5">HTML5</option>
       <option value="css3">CSS3</option>
       <option value="javascript">Javascript</option>
    </datalist>
    <input type="search" name="classname" placeholder="Class" list="classnames" autofocus />
    <input type="text" name="name" placeholder="Instructor"  />
     <label for="date">Class Date</label>
    <input type="date" name="classdate" placeholder="classdate" />
    <input type="email" name="email" placeholder="email"  />
    <label for="knowledge">Knowledge (0-5)</label>
    <input type="range" name="knowledge" min="0" max="5" placeholder="knowledge" />
      <label>Presentation (0-5)</label>
     <input style="displayinline" type="range" name="presentation" min="0" max="5" value="5"  onchange="document.getElementById('presentationoutput').innerHTML=this.value;"> 
 <output for="presentation" id="presentationoutput">5</output>

    
        <button type="submit">submit</button>
</form>

CSS

form {
    margin: 1em;
}
input, button {
    border: 1px solid silver;
    background: white;
    padding: 5px;
    margin-bottom: 1em;
    display: block;
}

JavaScript

function printValue(sliderID, textbox) {
            var x = document.getElementById(textbox);
            var y = document.getElementById(sliderID);
            x.value = y.value;