博客列表 >用表单制作用户注册界面

用表单制作用户注册界面

Newf王永庆的博客
Newf王永庆的博客原创
2018年10月06日 14:11:471142浏览

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0">
   <title>用表格布局实现用户注册表单</title>
</head>
<body>
<form action="" method="post"></form>
<table border="0" cellspacing="0" cellpadding="8" align="center" width="400px" bgcolor="#b0e0e6">
   <caption><h2>用户注册</h2></caption>
   <tr align="center">
<!--通过lable标签与input标签关联实现焦点的捆绑-->
<td align="right" width="60"><lable for="email">邮箱:</lable></td>
       <td align="left" width="300"><input type="text" id="email" name="email" value="" placeholder="example@mail.com"></td>
   </tr>
   <tr align="center">
       <td align="right" width="60"><lable for="password">密码:</lable></td>
       <td align="left" width="300"><input type="text" id="password" name="password" value="" placeholder="密码不少于6位"></td>
   </tr>

   <tr align="center">
       <td align="right" width="60">性别:</td>
       <td align="left" width="300">
           <input type="radio" name="sex" value="male">男
           <input type="radio" name="sex" value="female">女
           <input type="radio" name="sex" value="secret" checked >保密
       </td>
   </tr>

   <tr align="center">
       <td align="right" width="60">兴趣:</td>
       <td align="left" width="300">
       <input type="checkbox" name="hobby[]" value="movie"  >看电影
       <input type="checkbox" name="hobby[]" value="game"  >打游戏
       <input type="checkbox" name="hobby[]" value="cook"  checked>做饭
       <input type="checkbox" name="hobby[]" value="wash"  checked>洗衣服
       </td>
   </tr>

   <tr align="center">
       <td align="right" width="60">级别:</td>
       <td align="left" width="300">
           <select name="level">
               <option value="0">纯洁的小白</option>
               <option value="1">有点污啦</option>
               <option value="2" selected>目空一切</option>
               <option value="3">宇宙无敌小霸王</option>
           </select>
       </td>
   </tr>

   <tr align="center">
       <td align="right" width="60">头像:</td>
       <td align="left" width="300">
           <input type="file" name="photo" accept="image/*">
       </td>
   </tr>


   <tr>
<!--用colspan="2"将2个按钮并排到一排-->
       <!--用align将按钮居中-->
<td colspan="2" align="center">
           <input type="submit" name="submit" value="提交">
           <input type="submit" name="reset" value="重写">
       </td>

   </tr>

</table>
</body>
</html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议