表单的制作练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>form表单</title>
  6.     <style>
  7.         div{
  8.             width: 300px;
  9.             height: 510px;
  10.             border: 1px solid #a8c6ea;
  11.             margin: 20px auto;
  12.             line-height: 35px;
  13.             padding: 20px 20px;
  14.         }
  15.         label:first-child {
  16.             font-weight: bolder;
  17.             font-size: 16px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div>
  23.     <form action="#">
  24.         <label>用户注册</label><br>
  26.         账号: <input name="user" type="text" placeholder="不超过八个字母"><br>
  27.         密码: <input name="pasWd" type="password" placeholder="6-16个字符"><br>
  28.         邮箱: <input name="e-mail" type="email" placeholder="example@mail.com"><br>
  29.         年龄: <input name="eg" type="text" style="width: 30px"><br>
  30.         生日: <input name="year" type="date"><br>
  31.         课程: <select>
  32.         <option value="1">HTML5</option>
  33.         <option value="2">CSS</option>
  34.         <option value="2">JavaScript</option>
  35.         <option value="2">PHP</option>
  36.     </select><br>
  38.         爱好:
  39.         <label><input  name="aiHao" type="checkbox" value="">打游戏</label>
  40.         <label><input  name="aiHao" type="checkbox" value="">看电影</label>
  41.         <label><input  name="aiHao" type="checkbox" value="">撸代码</label><br>
  43.         性别:
  44.         <label><input  name="sex" type="radio">男</label>
  45.         <label><input  name="sex" type="radio">女</label>
  46.         <label><input  name="sex" type="radio">保密</label><br>
  47.         简介: <textarea name="" id="" cols="30" rows="10"></textarea><br>
  49.         <input type="submit" name="tiJiao" value="提交">
  50.         <input type="button" name="ajax" value="Ajax">
  53.     </form>
  54. </div>
  55. </body>
  56. </html>

效果图如下

更多相关文章

  1. 前端基础，表单、表格作业
  2. 用户注册表单
  3. html 练习（一张简历/用户注册）
  4. 创建table表格和创建form表单并JS判断
  5. html基础表单
  6. HTML 练习
  7. 1109标签练习
  8. html小结
  9. PHP提交表单失败后如何保留已经填写的信息

随机推荐

  1. Android boot.img介绍
  2. Error inflating class android.support.
  3. Android应用开发从入门到实践
  4. Android N中UI硬件渲染（hwui）的HWUI_NEW_OP
  5. Android实现无标题栏全屏的方法
  6. Android ListView 去除边缘阴影、选中色
  7. Android(安卓)判断网络连接状态
  8. [Android] ContentProvider实例详解
  9. Android NDK工程的编译和链接调试
  10. Android中的小技巧：TextView限制行数和字