## HTML5: number and range

Example 11.17 - HTML5 input type='number' and type='range' - Example 11.17
<form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><label>Pick a number: <input type="number" name="entered_number"/></label><label>How happy are you? <input type="range" min="1" max="5" value="3" step="1" name="happy"/></label><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;} input { display: block; }

- Markup
- Style
- Display
- Screenshot

     <form action="https://cs12.net/form/submit.php" method="post">
       <label>Pick a number:
         <input type="number" name="entered_number"/>
       </label>
       <label>How happy are you?
         <input type="range" min="1" max="5" value="3" step="1" name="happy"/>
       </label>
       <button type="submit">Submit   </button>
     </form>

In `style` element (`<style>`) within `head` element:

    label, button { display: block; margin-top: 1rem;}
         input { display: block; }