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()
            {
                var resultvalue = getValue();
                localStorage.setItem("001",resultvalue);
                var str = localStorage.getItem("001");
                var result = str.split(",");
                for(var i = 0; i < result.length; i++)
                   alert(result[i]);
            }
            function getValue()
            {
                var user = $("name").value;
                var tel = $("tel").value;
                var email = $("email").value;
                var birthday = $("birthday").value;
                var age = $("age").value;
                var rm_w = $("rm").checked?"男":"女";
                var conts = $("conments").value;
                var c1 = $("c1").checked?"斑马":"";
                var c2 = $("c2").checked?"老虎":"";
                var c3 = $("c3").checked?"狮子":"";
                var c4 = $("c4").checked?"大象":"";
                var totalValue = user+","
                                +tel+","
                                +email+","
                                +birthday+","
                                +age+","
                                +rm_w+","
                                +conts+","
                                +c1+","
                                +c2+","
                                +c3+","
                                +c4;
                return totalValue;                            
            }
            function $(name)
            {
                return document.getElementById(name);
            }            
        </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="提交" />
                <input type="submit" value="提交" />
            </p>
        </form>
    </body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/beautiful-code/p/5068801.html