HTML5入门5---HTML5控件元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第三个页面</title>
        <style>
            textarea:required{
                background-color: lightyellow;
            }
            body{
                font-family: "微软雅黑";
                max-width: :600px;
                padding: 0px 30px;
            }
            h1{
                margin-top: 0px;
            }
            p{
                margin-top: 0px;
            }
            fieldset{
                margin-bottom: 15px;
                padding: 10px;
            }
            legend{
                padding: 0px 3px;
                font-weight: bold;
                font-variant: small-caps;
            }
            label{
                width: 110px;
                display: inline-block;
                vertical-align: top;
                margin: 6px;
            }
            em{
                font-weight:bold ;
                font-style: normal;
                color: blue;
            }
            input:focus{
                background: #FFFFE0;
            }
            input,textarea{
                width: 250px;
            }
            textarea{
                height: 10;
            }
            input [type=checkbox]{
                width: 10px;
            }
            input [type=radio]{
                width: 10px;
            }
            input [type=submit]{
                width: 150px;
                padding: 10px;
            }
        </style>
        <script type="text/javascript" language="JavaScript">
            function validataCom(input){
                if(input.value.length < 20){
                    input.setCustomValidity("请您再输入一些信息");
                }else{
                    input.setCustomValidity("");
                }
            }
            function mySubmit()
            {
                alert("填写正确");
            }
            
        </script>
    </head>
    <body>
        <h1>个人信息</h1>
        <form action="#" onsubmit="mySubmit()" method="post">
            <p></p>
            <fieldset>
                <legend>Contact Details</legend>
                <label>姓名</label><em>*</em><!--显示文本不可编辑-->&nbsp;
                <input id="name" type="text" value="" placeholder="请输入姓名"                    
                    required="required" autofocus="autofocus" /><br/>
                <label>Tel&nbsp;&nbsp;</label>
                <input id="tel" type="tel"" value="" placeholder="请输入电话" /><br/>
                <label>邮箱&nbsp;</label>
                <input id="email" type="email" required="required" value="" placeholder="请输入邮件地址">
            </fieldset>
            <fieldset>
            <legend>Personal Information</legend>
            <label>生日&nbsp;&nbsp;</label>
            <input id="birthday" type="date" required="required" /><br/>
            <label>年龄&nbsp;&nbsp;</label>
            <input id="age" type="number" min="1" max="120" step="1" required="required" /><br/>
            <label>性别&nbsp;&nbsp;</label>
            <input id="rm" type="radio" name="gender" value="男"/>男
            <input id="rw" type="radio" name="gender" value="女"/>女
            <!--<select id="sex">
                <option>---请选择性别---</option>
                <option value="male">-------男-------</option>
                <option value="female">-------女-------</option>
            </select>-->
            <br/>
            <label>编辑</label><br/>
            <textarea id="conments" rows="8" cols="23" oninput="validataCom(this)" required="required" >                
            </textarea>            
            </fieldset>
            <fieldset>
                <legend>请输入您喜欢的动物</legend>
                <input id="c1" type="checkbox" /> 斑马
                <input id="c2" type="checkbox" /> 老虎
                <input id="c3" type="checkbox" /> 狮子
                <input id="c4" type="checkbox" /> 大象
            </fieldset>
            <p>
                <input type="submit" value="提交" />
            </p>
        </form>
    </body>
</html>
相关阅读:
java面试第八天
 java面试第七天
 java面试第六天
 java面试第五天
 java面试第四天
 SpringMVC导出Excel
75. Autorelease机制及释放时机
 关于 SQLNET.AUTHENTICATION_SERVICES 验证方式的说明
 硬件十万个为什么——运放篇（五）PCB设计技巧
 eclipse到Android Studio的项目迁移
原文地址：https://www.cnblogs.com/beautiful-code/p/5065877.html