Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单属性初体验
Blogger Information
Blog 13
fans 0
comment 0
visits 10416
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单属性初体验
微光
Original
624 people have browsed it

初步完成一个简单的用户注册表单

1、表单的html代码

  1.   <body>
  2.     <form class="register">
  3.       <h3 class="title">用户注册</h3>
  4.       <!-- 表单 -->
  5.       <!-- 用户名 -->
  6.       <!-- 普通文本 -->
  7.       <!--placeholder 提示关键词-->
  8.       <!--required 使文本设置为必选项-->
  9.       <!--aotufocus 让光标停留在文本框中 一个页面只有一个-->
  10.       <label for="username">用户名：</label>
  11.       <input
  12.         type="text"
  13.         id="username"
  14.         name="username"
  15.         placeholder="请输入用户名"
  16.         required
  17.         autofocus
  18.       />
  19.       <!-- 密码 -->
  20.       <!-- 密码型文本 -->
  21.       <label for="password">密码：</label>
  22.       <input
  23.         type="password"
  24.         id="password"
  25.         name="password"
  26.         placeholder="至少输入6位数"
  27.         required
  28.       />
  29.       <!-- 确认密码 -->
  30.       <label for="password1">确认密码：</label>
  31.       <input
  32.         type="password"
  33.         id="password1"
  34.         name="password1"
  35.         placeholder="再次输入密码"
  36.         required
  37.       />
  38.       <!-- 邮箱地址 -->
  39.       <!-- 邮箱型文本 -->
  40.       <label for="emil">邮箱地址：</label>
  41.       <input type="emil" id="emil" name="emil" placeholder="123@163.com" />
  42.       <h3 class="title">基本信息</h3>
  43.       <!-- 姓名 -->
  44.       <label for="name">姓名：</label>
  45.       <input type="text" id="name" name="name" required />
  46.       <!-- 性别 -->
  47.       <!-- 单选框 -->
  48.       <!--为了使单选唯一性，name值必须一致-->
  49.       <label for="danxuan">性别：</label>
  50.       <div>
  51.         <input type="radio" name="xingqu" id="man" value="man" />
  52.         <label for="man">男</label>
  53.         <input type="radio" name="xingqu" id="wuman" value="wuman" />
  54.         <label for="wuman">女</label>
  55.         <input type="radio" name="xingqu" id="baomi" value="baomi" checked />
  56.         <label for="baomi">保密</label>
  57.       </div>
  58.       <!-- 爱好 -->
  59.       <!-- 多选框 -->
  60.       <div>
  61.         <label for="duoxuan">爱好：</label>
  62.         <input type="checkbox" name="hobby[]" id="game" value="game" />
  63.         <label for="game">游戏</label>
  64.         <input type="checkbox" name="hobby[]" id="swimming" value="swimming" />
  65.         <label for="swimming">游泳</label>
  66.         <input
  67.           type="checkbox"
  68.           name="hobby[]"
  69.           id="program"
  70.           value="program"
  71.           checked
  72.         />
  73.         <label for="program">编程</label>
  74.       </div>
  75.       <!-- 学历 -->
  76.       <!-- 下拉框 -->
  77.       <label for="xueli">学历：</label>
  78.       <select name="xueli" id="xueli">
  79.         <option value="1">高中</option>
  80.         <option value="2" selected>大专</option>
  81.         <option value="3">本科</option>
  82.         <option value="4">硕士</option>
  83.         <option value="5">博士</option>
  84.       </select>
  85.       <!-- 备注 -->
  86.       <!-- 文本域 -->
  87.       <label for="beizhu">备注：</label>
  88.       <textarea
  89.         name="beizhu"
  90.         id="beizhu"
  91.         placeholder="最大不超过120个字"
  92.         style="height: 100px"
  93.       ></textarea>
  94.       <!-- 普通按钮 -->
  95.       <button>提交</button>
  96.     </form>
  97.   </body>

2、效果展示

用户注册

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：表单中的小坑, 很多的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post