HTML5创建的简易web表单

最新推荐文章于 2022-11-25 13:33:36 发布

viviScript

最新推荐文章于 2022-11-25 13:33:36 发布

阅读量1.5k

点赞数 1

分类专栏：学习笔记文章标签： html5 表单

本文链接：https://blog.csdn.net/wang863628979/article/details/52184668

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏


<!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>

viviScript

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5创建的简易web表单

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, a
复制链接

扫一扫

专栏目录