11-form-1.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. <form action="hello.html" method="get">
  10. 手机号 <input type="text" name="mobile"/>
  11. <br/>
  12. <!-- 如果希望提交一些信息 但是不显示在页面中 -->
  13. <input type="hidden" name="id" value="1111"/>
  14. <!-- 在提交数据时 可以将隐藏域中的name和value拼接到url中 -->
  15. <!-- http://127.0.0.1:5500/hello.html?mobile=123&id=1111 -->
  16. <!-- 如果希望显示数据 但是用户不允许修改 可以增加属性readonly -->
  17. <input type="text" name="tid" value="2222" readonly/>
  18. <br/>
  19. <!-- 此时的数据会被提交 -->
  20. <!-- http://127.0.0.1:5500/hello.html?mobile=12&id=1111&tid=2222&desc=232 -->
  21. <!-- 如果希望显示数据 也不允许修改 但也不希望提交 disabled 意思是不可用的-->
  22. <input type="text" name="did" value="3333" disabled/>
  23. <br/>
  24. <!-- 此时的did不在提交的url参数中 -->
  25. <!-- http://127.0.0.1:5500/hello.html?mobile=12&id=1111&tid=2222&desc=12 -->
  26. <br/>
  27. <!-- 多行文本框 对应标签textarea -->
  28. 备注 <textarea name="desc"></textarea>
  29. <br/>
  30. <!-- 文件标签 -->
  31. 头像 <input type="file" name="file" />
  32. <br/>
  33. <button type="submit">提交button</button>
  34. <input type="submit" value="提交" />
  35. <br />
  36. <button type="reset">重置button</button>
  37. <input type="reset" value="重置" />
  38. <br />
  39. <!-- 对于普通类型的按钮 点击后无效果 要结合javascript绑定单击函数 -->
  40. <button type="button">普通button</button>
  41. <input type="button" value="普通" />
  42. </form>
  43. </body>
  44. </html>