“会员注册”表单界面设计

“会员注册”表单界面设计

“会员注册”表单界面设计

1.任务描述

利用WebStorm开发工具及相应素材资源,运用HTML5表单控件及相关属性实现图7-58所示的会员注册表单页面。界面整体上可以分为上面的标题和下面的表单两部分。使用<form>标记对界面进行整体控制,使用<h2>标记搭建标题结构。另外,表单部分排列整齐,每一行模块可以使用<p>标记搭建整体结构。并且,每一行由左右两部分构成,左边为提示信息,由<span>标记搭建结构;右边为具体的表单控件,由<input/>标记进行布局。最终效果如图2-57所示。

2.任务目标

      该任务主要考察学生对表单属性和控件的掌握程度。

3.实施步骤---搭建基本结构


 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>会员注册表单</title>

</head>

<body>

  <form action="#"  method="post">

    <h2>会员注册</h2>

    <p>

        <span>性质:</span>

        <input type="radio"  name="Nature" checked="checked" />&nbsp;&nbsp;个人

        <input type="radio"  name="Nature" />&nbsp;&nbsp;公司

    </p>

    <p>

        <span>昵称:</span>

        <input type="text"  placeholder="小明" maxlength="6"/>

    </p>

    <p>

       <span>密码:</span>

        <input type="password"  size="40" />

    </p>

    <p>

        <span>电子邮箱:</span>

        <input type="email"  name="myemail" placeholder="123456@126.com" required  multiple/>

    </p>

     <P>

        <span>所在地:</span>

        <select>

            <option>-请选择-</option>

            <option>北京</option>

            <option>上海</option>

            <option  selected="selected">广州</option>

            <option>武汉</option>

            <option>成都</option>

        </select>

    </P>

    <p>

        <span>身份证号:</span>

        <input type="text"  name="card" required  pattern="^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$"  title="(必须填写,能够以数字、字母x结尾的短身份证号)"/>

    </p>

    <p>

        <span>手机号码:</span>

        <input type="tel"  name="telphone" pattern="^\d{11}$" required/>

    </p>

    <p>

        <span>意见反馈:</span>

        <textarea cols="50"  rows="5">如果您有什么意见或问题可以告诉我!</textarea>

    </p>

    <P>

        <span></span>

        <input type="submit"  value="提交"/>

        <input type="reset"  value="重置"/>

    </P>

</form>

</body> 

</html>

运行在谷哥浏览器查看结果,效果如下图2-57所示。

“会员注册”表单界面设计

图2-58 会员注册


Powered By 主机

 Theme By 服务器

Copyright 六六互联.Some Rights Reserved.www.ic.vip