CSS3 HTML5 Cross Browser Forms Sample

by ducka

HTML

<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/js/modernizr-1.5.min.js"></script>
<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/components/spinner/ui.spinner.js"></script>
<link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/components/colorpicker/colorpicker.css">
<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/components/colorpicker/colorpicker.js"></script>
<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/components/placeholder/jquery.placehold-0.2.min.js"></script>
<link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/css/html5forms.layout.css">
<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/js/html5forms.js"></script>
<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/js/html5forms.fallback.js"></script>
<script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/webforms2/webforms2-p.js"></script>
<link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/ui-themes/aristo/jquery.ui.all.css">
<form>
        <label for="range-slider">Slider</label>
        <input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0">
    
        <label for="numeric-spinner">Numeric spinner</label>
        <input type="number" name="numeric-spinner" id="numeric-spinner" value="2">
    
        <label for="date-picker">Date picker</label>
        <input type="date" name="date-picker" id="date-picker" value="2010-10-06">
        
        <label for="color-picker">Color picker</label>
        <input type="color" name="color-picker" id="color-picker" value="ff0000">
    
        <label for="text-field">Text field with placeholder</label>
        <input type="text" name="text-field" id="text-field" placeholder="Insert your text here">
    
        <label for="url-field">Url field</label>
        <input type="url" id="url-field" name="url-field"...