热门关键字：
jquery > jquery教程 > jquery教程 > 一、HTML表单

一、HTML表单

400
作者：管理员
发布时间：2020/7/5 9:15:57
评论数：0
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=2048

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <!-- 1.表单元素
  9. 用来声明数据提交的范围
  10. 只有在此元素内的数据可以提交给服务器 -->
  11. <!-- action属性用来声明数据提交的目标 -->
  12. <form action="http://www.baidu.com">
  13. <!-- 2.表单控件
  14. 用来让用户输入数据的
  15. 1）input元素（9个 ），它们之间用type元素区分-->
  16. <!-- 文本框
  17. value:设置默认值 maxlength:设置最大长度 readonly:设置只读 -->
  18. <p>
  19. 账号:<input type="text" value="lcz" maxlength="10"/>
  20. </p>
  21. <!-- 密码框 属性同上 -->
  22. <p>
  23. 密码:<input type="password">
  24. </p>
  25. <!-- 单选框 name:组名。同一组名互相排斥
  26. checked设置默认选中-->
  27. <p>
  28. 性别:
  29. <input type="radio" name="sex" checked="checked"/>男
  30. <input type="radio" name="sex"/>女
  31. </p>
  32. <!-- 多选框 checked:设置默认选中 -->
  33. <p>
  34. 兴趣爱好:
  35. <input type="checkbox" checked="checked"/>音乐
  36. <input type="checkbox" checked="checked"/>看书
  37. <input type="checkbox"/>打球
  38. </p>
  40. <!-- 文件框 -->
  41. <p>
  42. 头像上传:<input type="file"/>
  43. </p>
  45. <!-- 隐藏框 -->
  46. <p>
  47. <input type="hidden" value="abc"/>
  48. </p>
  50. <!-- 按钮
  51. submit：提交表单中的数据
  52. reset：将表单中的数据重置为初始值
  53. button:没有任何功能，需通过js定义功能 -->
  54. <p>
  55. <!-- 提交按钮 -->
  56. <input type="submit" value="注册">
  57. <!-- 重置按钮 -->
  58. <input type="reset" value="重置">
  59. <!-- 普通按钮 -->
  60. <input type="button" value="按钮">
  61. </p>
  62. <!--2)其他元素（3个） -->
  63. <!-- label：用来管理表单中的文本 id:是元素的唯一标志，相当于元素的身份证号，任何元素都可以由id，程序员有义务保证元素的id不重复
  64. 可以将文本与空间绑定在一起，从而增加了控件的受力面积。-->
  65. <p>
  66. <input type="checkbox" id="xieyi"/>
  67. <label for="xieyi">我已阅读并且自愿遵守此协议！</label>
  68. </p>
  69. <!-- select:下拉选 selected:设置默认选中 -->
  70. <p>
  71. 城市:
  72. <select>
  73. <option>请选择</option>
  74. <option selected="selected">北京</option>
  75. <option>上海</option>
  76. <option>广州</option>
  77. <option>深圳</option>
  78. <option>杭州</option>
  79. </select>
  80. </p>
  81. <!-- textarea:文本域 -->
  82. <p>
  83. 简介：<br>
  84. <textarea rows="10" cols="100">这是文本域的默认值</textarea>
  85. </p>
  86. </form>
  87. </body>
  88. </html>




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：HTML
友荐云推荐