web前端——表单注册页面设计（注册信息）-Toy模板网

这篇具有很好参考价值的文章主要介绍了web前端——表单注册页面设计（注册信息）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

任务要求如下：

设计学生信息注册网页，主要要求如下：

设置页面标题为“新生报到”；
使用表格布局，令页面内容居中显示；
使用h3标签居中显示“注册信息”，并设置一个页面顶部锚点；
在注册信息填写区域前后设置水平分隔线；
显式地声明表单使用get方式提交，表单中所有输入域必须设置name属性，设置表单的自动完成功能；
设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入8位数字密码”，并设置为自动数字校验；
除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；
右侧图像域请使用学生本人的半身像；
性别默认选择“女”，借助label标签使得用户可以通过单选按钮后的文本进行勾选；
身高最大、最小、步长和默认值分别为190、150、2、170厘米；体重最大、最小、步长和默认值分别为90、35、1、50千克；
电话号码输入框中提示“请输入11位数字号码”，并设置pattern属性进行数字校验；
家庭住址下拉列表中依此设置“北京、上海、广州和成都”4个选项，默认选择“成都”；
复选框中默认选择篮球和乒乓球；
使用datalist标签为“常用网址”输入框提供可选网址列表，如图2所示；
文件域上传2份简历文件；
个人自述文本区设置行数为4行，最宽字符为40，默认显示文本“我是一位特别热爱学习的好孩子。。。”
插入一个隐藏域，设置value值为你的幸运数字；
设置“注册”和“重置”两个按钮，居中显示；

在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新生报到</title>
<style>
a:link{color : blue}
a:visited{color : grey}
a:hover{color : red}
a:active{color : yellow}
</style>
</head>

<body>
<h3 align="center" name="head">注册信息</h3>
<hr width="200%" size="1" color="#CC0000" />

<form action="" method="get" autocomplete="on">
  <table align="center" cellspacing="2" cellpadding="2">
  <tr>
    <td rowspan="7"><table align="center" cellspacing="2" cellpadding="2">
      <tr>
        <td>姓名：</td>
        <td><input type="text" name="stuname"  required autofocus="on"/>
          <font color="red">*</font></td>
        <td rowspan="7"><input type="image" src="../女孩儿.jpg" height="250" width="250"/></td>
      </tr>
      <tr>
        <td>学号：</td>
        <td><input type="text" name="stunumber" required/>
          <font color="red">*</font></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" placeholder="请输入八位数字密码"  pattern="\d{8}"required/>
          <font color="red">*</font></td>
      </tr>
      <tr>
        <td>性别：</td>
        <td><label>
          <input type="radio" name="stusex" value="0" />
          男</label>
          <label>
            <input type="radio" name="stusex" value="1"  checked=“checked” />
            女</label></td>
      </tr>
      <tr>
        <td>身高：</td>
        <td><input type="number" name="stuhight" min="150" max="190" step="2" value="170"/>
          厘米</td>
      </tr>
      <tr>
        <td>体重：</td>
        <td><input type="range" name="stuweight" max="90" min="35" step="1" value="50"/>
          千克</td>
      </tr>
      <tr>
        <td>生日：</td>
        <td><input type="date" name="stubirthday" /></td>
      </tr>
      <tr>
        <td>电话号码</td>
        <td><input type="tel" name="stutel" placeholder="请输入十一位电话号码" pattern="\d{11}"/></td>
      </tr>
      <tr>
        <td>E-mail:</td>
        <td><input type="email" name="stuemail"/></td>
      </tr>
      <tr>
        <td>个人主页：</td>
        <td><textarea name="stutxt" cols="40" rows="1" size="40"></textarea></td>
      </tr>
      <tr>
        <td>家庭住址：</td>
        <td><select name="stucity" size="1" multiple >
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
          <option value="chengdu" selected>成都</option>
        </select></td>
      </tr>
      <tr>
        <td>我的颜色：</td>
        <td><input type="color" /></td>
      </tr>
      <tr>
        <td><input type="hidden" name="stuluckynum" value="3" /></td>
      </tr>
      <tr>
        <td>我的运动：</td>
        <td><input type="checkbox" name="stusports" value="0" checked />
          篮球
          <input type="checkbox" name="stusports" value="1" />
          足球
          <input type="checkbox" name="stusports" value="2" />
          游泳
          <input type="checkbox" name="stuports" value="3" checked />
          乒乓球</td>
      </tr>
      <tr>
        <td>常用网址：</td>
        <td><input type="url" name="stuurl"  list="urllist"/>
          <datalist id="urllist">
            <option label="百度" value="http://www.baidu.com"/>      
            <option label="新浪" value="http://www.sina.com"/>      
            <option label="谷歌" value="http://www.google.com"/>      
          </datalist></td>
      </tr>
      <tr>
        <td>简历两份：</td>
        <td><input type="file" nmae="stufile" multiple /></td>
      </tr>
      <tr>
        <td>个人自述：</td>
        <td><textarea name="stuselftalk" clos="40" rows="4" placeholder="我是一位特别热爱学习的好孩子。。。"></textarea></td>
      </tr>
      <tr>
        <td><input type="submit" name="input" value="注册" />
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input type="reset" name="input" value="重置" /></td>
      </tr>
    </table></td>
  </tr>
  </table>
</form>
<hr width="200%" size="1" color="#CC0000" />
<h4 align="center"><a href="tel:12345678900">电话</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="sms:12345678900">短信</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="mailto:1256983@qq.com">E-mail</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#head">返回顶部</a></h3>
</body>
</html>

测试结果截图：

分析表单注册页面效果图,前端,html,dreamweaver