Blogger Information
Blog 9
fans 0
comment 0
visits 9085
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
FROM表单实践以及心得
不忘初心
Original
617 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. <form action="" method="GET">
  11. <fieldset>
  12. <legend>必填项</legend>
  13. <div>
  14. <label for="username">账号:</label>
  15. <input type="text" id="username" name="username" autofocus required placeholder="请输入姓名">
  16. </div>
  17. <div>
  18. <label for="psw">密码:</label>
  19. <input type="password" id="psw" name="psw" required placeholder="请输入密码">
  20. <!-- <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button>-->
  21. </div>
  22. <div>
  23. <label for="email">邮箱:</label>
  24. <input type="email" name="email" id="email" placeholder="872065594@qq.com">
  25. </div>
  26. </fieldset>
  27. <div>
  28. <label for="secret">性别:</label>
  29. <input type="radio" name="gender" value="male"><label></label>
  30. <input type="radio" name="gender" value="female"><label></label>
  31. <input type="radio" name="gender" value="secret" checked id="secret"><label>保密</label>
  32. </div>
  33. <div>
  34. <label>爱好:</label>
  35. <input type="checkbox" name="hobby[]" id="game"><label for="game">游戏</label>
  36. <input type="checkbox" name="hobby[]" id="sing"><label for="sing">唱歌</label>
  37. <input type="checkbox" name="hobby[]" id="read"><label for="read">读书</label>
  38. </div>
  39. <div>
  40. <select name="" id="">
  41. <option value="1">铜牌会员</option>
  42. <option value="2">银牌会员</option>
  43. <option value="3" selected>金牌会员</option>
  44. <option value="4">钻石会员</option>
  45. </select>
  46. </div>
  47. <div>
  48. <label for="">搜索关键字:</label>
  49. <input type="search" name="search" list="keyword">
  50. <datalist id="keyword">
  51. <option value="html"></option>
  52. <option value="css"></option>
  53. <option value="javascript"></option>
  54. </datalist>
  55. </div>
  56. <button>提交</button>
  57. </form>
  58. </body>
  59. </html>

表单效果图片

心得

对表单的编写有了更深层次的认识,了解了每个表单的属性(文本、密码、邮件)
并且通过ID属性和LABEL标签进行绑定,这是以前不了解的。还有自动获取焦点、表单默认显示的内容。这几天一直忙,没来得及写作业。会尽快补上。

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