HTML5创建的简易web表单

来源：互联网发布：g3110扫描仪软件编辑：程序博客网时间：2024/06/03 18:00
<!DOCTYPE html><!-- ! Excerpted from "HTML5 and CSS3", ! published by The Pragmatic Bookshelf. ! Copyrights apply to this code. It may not be used to create training material, ! courses, books, articles, and the like. Contact us if you are in doubt. ! We make no guarantees that this code is fit for any purpose. ! Visit http://www.pragmaticprogrammer.com/titles/bhh5 for more book information.--><html lang="en"><head>    <title>AwesomeCo Newsletter</title>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <script src="jquery.js"></script>    <script type="text/javascript">        $(function(){            function hasColorSupport(){                input = document.createElement("input");                input.setAttribute("type", "color");                var hasColorType = (input.type !== "text");                // handle Safari/Chrome partial implementation                if(hasColorType){                    var testString = "foo";                    input.value=testString;                    hasColorType = (input.value != testString);                }                return(hasColorType);            }            if (!hasColorSupport()){                $('input[type=color]').simpleColor();            }        });    </script>    <style>        ol{            padding:0;            margin:0;            list-style: none;        }        ol li{            padding:0;            clear: both;            margin:0 0 10px 0;        }        label{            float: left;            width:150px;        }    </style></head><body><form method="post" action="/Projects/1">    <fieldset id="Personal_information">        <legend>Project Information</legend>        <ol>            <li>                <label for="name">Name</label>                <input type="text" name="name" autofocus id="name"/>            </li>            <li>                <label for="priority">Priority</label>                <input type="range" min="0" max="10" name="priority" value="0" id="priority"/>            </li>            <li>                <label for="estimated_hours">Estimated hours</label>                <input type="number" min="0" max="1000" name="estimated_hours" id="estimated_hours"/>            </li>            <li>                <label for="start_date">Start date</label>                <input type="date" value="2016-8-11" name="start_date" id="start_date"/>            </li>            <li>                <label for="email">Email contact</label>                <input type="email" name="email" id="email">            </li>            <li>                <label for="url">Staging URL</label>                <input type="url" name="url" id="url"/>            </li>            <li>                <label for="project_color">Project color</label>                <input type="color" name="project_color" id="project_color"/>            </li>            <li>                <input type="submit" value="Submit"/>            </li>        </ol>    </fieldset></form></body></html>
0 0