<!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>
![]()
![]()
![]()
![]()
HTML5创建的简易web表单
最新推荐文章于 2022-11-25 13:33:36 发布