表单的基础知识


  1. <from>
  2. <fieldset>
  3. <legend>表单</legend>
  4. <div>
  5. <label for="account">账号:</label>
  6. <input type="text" placeholder="你开心就好" id="account" required />
  7. </div>
  8. <div>
  9. <label for="psd">密码:</label>
  10. <input type="password" placeholder="这是秘密啊" id="psd" required />
  11. </div>
  12. <div>
  13. <label>性别:</label>
  14. <input type="radio" id="male" name="gender" />
  15. <label for="male"></label>
  16. <input type="radio" id="famale" name="gender" />
  17. <label for="famale"></label>
  18. </div>
  19. <div>
  20. <label>爱好:</label>
  21. <input type="checkbox" id="male" name="hobby[]" />
  22. <label for="male">篮球</label>
  23. <input type="checkbox" id="famale" name="hobby[]" />
  24. <label for="famale">足球</label>
  25. </div>
  26. </fieldset>
  27. <div>
  28. <select>
  29. <option>12</option>
  30. <option value="34"></option>
  31. <option>56</option>
  32. </select>
  33. </div>
  34. <div>
  35. <input type="search" list="search" />
  36. <datalist id="search">
  37. <option value="456"></option>
  38. <option value="">123</option>
  39. <option value="789"></option>
  40. </datalist>
  41. </div>
  42. </from>
  43. <iframe srcdoc="点击按钮进百度" width="200" height="200" name="baidu"></iframe>
  44. <a href="https://baidu.com" target="baidu"></a>
  • 需要注意的点
    1.label 标签的 for 属性,和 input 绑定; 2.下拉框 select 与 input、datalist 组合:select 下面的 option 标签里面写内容,不用写 value 也可以显示;但是 datalist 下面的 option 必须在 value 属性里面写;
    3.iframe 标签里面的 src 和 srcdoc 属性;