ASCII码 ASCII码

用户注册实例及内联后台首页框架实例

发布于:2022-07-06 17:09:58  栏目:技术文档

HTML中常用的表单元素

1.input元素定义输入框,根据不同的type属性,可以变化为多种形态。例如:

  1. <input type="text"> //表示文本输入框
  2. <input type="password"> //表示密码输入框
  3. <input type="radio"> //表示单选输入框
  4. <input type="checkbox"> //表示复选输入框

2.select元素定义下拉列表,option元素定义待选择的选项;列表通常会把首个选项显示为被选选项。能够通过添加select属性来定义预定义选项。例如:

  1. <select name="gg" id="">
  2. <option value="0" selected disabled>--请选择--</option>
  3. <option value="1">本科</option>
  4. <option value="2">研究生</option>
  5. <option value="3">博士</option>
  6. <option value="4">其它</option>
  7. </select>

3.textarea元素定义多行输入字段(文本域)。例如:

  1. <textarea name="" id="" cols="30" rows="10"></textarea>

4.button元素定义可点击的按钮。例如:

  1. <button type="submit">提交</button>

5.iframe内联框架元素属性。例如:

  1. <iframe src="XXX" frameborder="0" name="XXX"></iframe>

6.video音/视频元素属性。例如:

  1. <audio src="XXXX" controls autoplay></audio>
  2. <video src="XXXX" controls autoplay> </video>

用户注册表单实例代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>用户名注册</title>
  8. </head>
  9. <body>
  10. <h3>用户注册</h3>
  11. <form action="xxx.php" method="post">
  12. <div>
  13. <label for="name">用户名:</label>
  14. <input type="text" id="name" name="username" placeholder="请输入用户名" required>
  15. </div>
  16. <div>
  17. <label for="psw">密 码:</label>
  18. <input type="password" name="password" id="psw" placeholder="请输入密码,不小于8位密码" required>
  19. </div>
  20. <div>
  21. <label for="secret">性别:</label>
  22. <input type="radio" id="male" value="male" name="sec"><label for="male">男</label>
  23. <input type="radio" id="female" value="female" name="sec"><label for="female">女</label>
  24. <input type="radio" id="secret" value="secret" name="sec" checked><label for="secret">保密</label>
  25. </div>
  26. <div>
  27. <label for="ball">兴趣爱好:</label>
  28. <input type="checkbox" id="ball" name="ah[]" value="ball" checked><label for="ball">打球</label>
  29. <input type="checkbox" id="reading" name="ah[]" value="reading" ><label for="reading">看书</label>
  30. <input type="checkbox" id="calligraphy" name="ah[]" value="calligraphy"><label for="calligraphy">书法</label>
  31. </div>
  32. <div>
  33. <label for="">学历:</label>
  34. <select name="look" id="">
  35. <option value="0" selected disabled>----请选择----</option>
  36. <option value="1">小学</option>
  37. <option value="2">初中</option>
  38. <option value="3">高中</option>
  39. <option value="4">大学</option>
  40. <option value="5">其他</option>
  41. </select>
  42. </div>
  43. <div>
  44. <button>提交</button>
  45. </div>
  46. </form>
  47. </body>
  48. </html>

运行效果:

用户注册运行效果

后台管理内联框架实例代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>后台管理内联框架实例</title>
  8. </head>
  9. <body>
  10. <!-- 顶部导航 -->
  11. <div>
  12. XXX网站后台管理系统
  13. </div>
  14. <div>
  15. <em>管理员</em>
  16. <a href="javascript:;">退出</a>
  17. </div>
  18. <!-- 左侧菜单 -->
  19. <ul>
  20. <li><a href="#" target="content">基本设置</a></li>
  21. <li><a href="#" target="content">文章管理</a></li>
  22. <li><a href="#" target="content">用户管理</a></li>
  23. <li><a href="#" target="content">广告管理</a></li>
  24. <li><a href="#" target="content">友情链接</a></li>
  25. </ul>
  26. <!-- 右侧页面 -->
  27. <iframe src="<a href='javascript:;'>请点击左侧菜单</a>" frameborder="1" name="content" width="500" height="500"></iframe>
  28. </body>
  29. </html>

运行效果:

后台管理内联框架运行效果

相关推荐
阅读 +