Blogger Information
Blog 7
fans 0
comment 0
visits 12095
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html前端常用控件的用法
A特权?&非凡群直播&社群裂变
Original
1334 people have browsed it

- 作业

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10. <h3>用户注册:</h3>
  11. <form action="check.php" method="GET" style="display: grid;gap:0.5em"><!--style="display: grid;" 默认显示为块元素 可实现自动拉伸 -->
  12. <fieldset>
  13. <legend >必填项</legend>
  14. <div>
  15. <label for="user">账户:</label></label>
  16. <input type="text" name="username" id="user" autofocus required placeholder="请输入帐号" value="admin" >
  17. </div>
  18. <div>
  19. <label for="psw">密码:</label></label>
  20. <input type="password" name="password" id="psw" required placeholder="请输入密码">
  21. </div>
  22. <div>
  23. <label for="email">邮箱:</label></label>
  24. <input type="email" name="email" id="email" required placeholder="demo@email.com">
  25. </div>
  26. </fieldset>
  27. <div>
  28. <!-- 单选框 -->
  29. <!-- 所有单选按钮的name值必须相同 -->
  30. <label for="secret">性别:</label>
  31. <input type="radio" name="gender" value="male"><label for=""></label>
  32. <input type="radio" name="gender" value="female"><label for=""></label>
  33. <input type="radio" name="gender" value="secret" checked id="secret"><label for="">保密</label>
  34. </div>
  35. <div>
  36. <!-- 复选框 -->
  37. <!-- 所有复选框的name属性值必须为数组且相同 -->
  38. <label for="">爱好:</label>
  39. <input type="checkbox" name="hobby[]" id="game"><label for="game">游戏</label>
  40. <input type="checkbox" name="hobby[]" id="trave"><label for="trave">旅游</label>
  41. <input type="checkbox" name="hobby[]" id="shoot" checked><label for="shoot">摄影</label>
  42. </div>
  43. <div>
  44. <label for="level">会员级别:</label>
  45. <select name="level" id="level">
  46. <option value="1">铜牌会员</option>
  47. <option value="2" selected >银牌会员</option>
  48. <option value="3" >金牌会员</option>
  49. <option value="4">钻石会员</option>
  50. </select>
  51. </div>
  52. <div>
  53. <!-- 带下拉列表的自定义搜索框 -->
  54. <label for="">搜索关键字:</label>
  55. <input type="text" list="kewords">
  56. <datalist id="kewords">
  57. <option value="html">html</option>
  58. <option value="javascript">javascript</option>
  59. <option value="js">js</option>
  60. <option value="css">css</option>
  61. </datalist>
  62. </div>
  63. <button>提交</button>
  64. </form>
  65. </body>
  66. </html>

- 笔记

label控件和input绑定
实现效果:点击帐号,input获取光标焦点
input type:text password email:自动审查input输入内容是否为邮箱


input常用属性
autofocus 页面刷新后自动获取焦点,一般是唯一
placeholder=”请输入帐号” input空数据时显示提示文字
required input非空判断,实现必填项效果
value=“admin” 给input添加一个默认值

type
text:文本输入
password:密码输入
email:自动判断input输入内容是否为邮箱
radio:单选框

checked input的type为radio时,添加checked可以让单选框默认选中

Correcting teacher:PHPzPHPz

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