手机端Form简单表单制作及onSubmit事件

最新推荐文章于 2022-03-23 17:33:57 发布

怪作多人丑

最新推荐文章于 2022-03-23 17:33:57 发布

阅读量5.5k

点赞数

分类专栏： form表单文章标签：表单 form onSubmit 提交验证

本文链接：https://blog.csdn.net/zhyq32/article/details/51277440

版权

form表单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

手机端Form简单表单制作

闲的无聊，回顾一下原来写的东西好了。

手机端表单效果图如下：

简单的表单应用

步骤１：定义好框架
body设置背景色，在body中添加out盒子，用来装form表单。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>myForm</title>
        <style>
            body {
                height: 780px;
                width: 480px;
                background-color: #CCCCCC;
            }
            body,
            input,
            textarea {
                font-family: "helvetica", arial, helvetica;
            }

            #out {
                background-color: #EEEEEE;
                width: 93%;
                height: 800px;
                padding: 8px;
            }
            div {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="out"></div>
    </body>
</html>

步骤2：在out盒子中添加form表单，设计上部分的Runner，Tel#，email及DOB控件。可以看出Runner的输入框的type类型是text，Tel#的输入框的type类型是phone，email的输入框的type类型是email，而DOB的type类型是date。所以有：

<div id="out">
            <h1> Sign Up Today</h1> 

                <div>
                    <label for="runner">Runner:</label>
                    <input id="runner" name="runner" type="text" placeholder="First and last name" required />
                </div>

                <div>
                    <label for="phone">Tel#:</label>
                    <input id="phone" name="phone" type="tel" placeholder="(xxx) xxx-xxx" required />
                </div>

                <div>
                    <label for="email">email:</label>
                    <input id="email" name="email" type="email" placeholder="For confirmation only" required />

                <div>
                    <label for="dob">DOB:</label>
                    <input id="dob" name="dob" type="date" min="1990-01-01" max="2016-01-01" />
                </div>      

            </form>
        </div>

上面placeholder属性的值可以显示在输入框内，起提示作用。
还要添加lable标签的样式（在style内部添加），使lable都右对齐，这样界面看起来更漂亮。

label {
            display: block;
            float: left;
            clear: left;
            text-align: right;
            width: 100px;
            margin-right: 10px;
       }

步骤3：在id=“dob”的div下面添加fieldset 标签制作表单第二部分，fieldset 元素可将表单内的相关元素分组，legend类似fieldset 的标题。效果可以参见上面的效果图。fieldset 标签内部同样用div包裹每一小组控件。

通过list特性和datalist元素，能够为某个输入型控件构造一张选值列。
（1）创建id特性唯一的datalist元素，改元素可以插入文档任意位置。
（2）添加若干option元素作为datalist元素的子元素，他们表示某控件推荐值的全集。

最后注意：type=”radio”的单选组name值要相同。
在style样式中定义fieldset 的样式。

fieldset 的style样式：

fieldset {
            border: 1px solid ;
            margin-bottom: 20px;
         }

fieldset内代码：

<fieldset>
    <legend>T-shirt Size</legend>

        <div>
            <label for="small">Small:</label>
            <input id="small" name="tshirt" type="radio" value="small"/>
        </div>

        <div>
            <label for="medium">Medium:</label>
            <input id="medium" name="tshirt" type="radio" value="medium"/>
        </div>

        <div>
            <label for="largre">Large:</label>
            <input id="largre" name="tshirt" type="radio" value="largre"/>
        </div>

        <div>
            <label for="style">Shirt-style:</label>
            <input id="style" name="style" type="text" list="stylelist" title="Years of participation" />
            <datalist id="stylelist">
                <option value="White" label="1st Year">
                <option value="Grey" label="2nd - 4th Year">
                <option value="Navy" label="Veteran (5+ Year)">
            </datalist>
        </div>      
</fieldset>

步骤4在fieldset标签下面再添加一个fieldset 标签和提交按钮制作表单第三部分，基本原理同步骤3.

<fieldset>
   <legend>Expectations</legend>
      <div>
        <label for="confidence">Confidence:</label>
        <input id="confidence" name="level" type="range" onchange="confidenceDisplay.value=(value + '%')" min="0" max="100" step="5" value="0" />
        <output id="confidenceDisplay">0%</output>
      </div>

      <p>
        <label for="notes">Notes:</label>
        <textarea id="notes" name="notes" maxlength="140"></textarea>
      </p>

</fieldset>

<p>
    <input type="submit" name="register" value="Register" />
</p>

步骤5:写手机端相应代码，表单提交验证和提交显示信息的js代码。

<script type="text/javascript">
    window.onload = function() {
        resetPage();
    }
    window.onresize = function() {
        resetPage();
    }

    function resetPage() {
        var deviceWidth = document.documentElement.clientWidth,
        scale = deviceWidth / 480;
        document.body.style.zoom = scale;
    }
    function invalidHandler(evt){
        var lable = evt.srcElement.parentElement.getElementsByTagName("label")[0];
        lable.style.color = 'red';
        evt.stopPropagation();
        evt.preventDefault();
    }
    function loadDemo(){           document.register.addEventListener("invalid",invalidHandler,true);       
    }
    window.addEventListener("load",loadDemo,false);
    function check(){       
        alert("Runner:"+ document.forms["frm1"]["runner"].value+'\n'+
              "Tel#:"+document.forms["frm1"]["phone"].value+'\n'+
              "E-mail:"+document.forms["frm1"]["email"].value+'\n'+
              "DOB:" + document.forms["frm1"]["dob"].value + '\n' +
              "Shirt style:"+document.forms["frm1"]["style"].value+'\n'+
              "T-shirt Size:" + document.forms["frm1"]["tshirt"].value + '\n' +
              "Expectations:"+document.forms["frm1"]["confidence"].value+"%"+'\n'+
              "Notes:"+document.forms["frm1"]["notes"].value+'\n');
}       
</script>