10-form.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!--
  10. 表单的重要功能是 要将用户输入的信息提交到服务端
  11. form
  12. 属性action 用于定义要提交信息的地址
  13. 属性method 对于http请求而言 最常见的请求方式 GET和POST
  14. -->
  15. <form action="hello.html" method="get">
  16. <!-- 盛放请求所需要的信息/参数 -->
  17. <!-- 使用input表示输入框 type代表类型 如果是text 代表文本输入框 -->
  18. <!-- 使用name属性 声明输入框的名字 用户名一般使用username -->
  19. 用户名 <input type="text" name="username" /> <br />
  20. <!-- 如果input type类型是password 代表密文输入框 输入时会自动显示* -->
  21. 密码 <input type="password" name="password" /> <br />
  22. <!-- radio代表单选框类型 -->
  23. <!-- 如果希望某一项默认被选中 那么增加属性 checked -->
  24. <input type="radio" name="sex" value="1" /> 男
  25. <input type="radio" name="sex" value="0" checked="checked"/> 女
  26. <!-- 此时没有区分出要选择的数据 -->
  27. <!-- http://127.0.0.1:5500/hello.html?username=12&password=12&sex=on -->
  28. <!-- 如果设定了value值 那么可以传输出去 -->
  29. <!-- http://127.0.0.1:5500/hello.html?username=12&password=12&sex=1 -->
  30. <br />
  31. <br />
  32. <!-- checkbox代表复选框类型 -->
  33. <!-- 当属性名和属性值相同时 可以简写 -->
  34. <input type="checkbox" name="city" value="Beijing" checked/> 北京
  35. <input type="checkbox" name="city" value="Harbin" checked="checked"/> 哈尔滨
  36. <input type="checkbox" name="city" value="Shanghai"/> 上海
  37. <input type="checkbox" name="city" value="Guangzhou"/> 广州
  38. <input type="checkbox" name="city" value="Shenzhen"/> 深圳
  39. <br />
  40. <br />
  41. 喜欢的运动是
  42. <!-- 下拉框 select -->
  43. <select name="interest">
  44. <option value="running">跑步</option>
  45. <option value="swimming">游泳</option>
  46. <option value="shooting">射击</option>
  47. <option value="null" selected="selected">--请选择--</option>
  48. </select>
  49. <br />
  50. <br />
  51. <input type="submit" value="登录" />
  52. <input type="reset" value="重置" />
  53. </form>
  54. </body>
  55. </html>