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

来源：互联网发布：java 排序编辑：程序博客网时间：2024/04/29 08:44

手机端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>

0 0