欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML基础:FORM表单元素(按钮、下拉列表、文本域、表单域)

程序员文章站 2022-03-27 08:25:14
...

1、按钮常用属性

1.1 <button type="submit">:提交按钮

1.2 <button type="button">:可点击的按钮

1.3 <button type="reset">:重置按钮

1.4 button常用属性

序号 属性 描述
1 type 必须使用预定义的submit, button, reset之一
2 name 按钮的唯一名称,与 ID 等效
3 value 按钮文本初始值,可通过 JavaScript 修改
4 disabled 禁用按钮
5 form 按钮所属表单(此时按钮type默认类型为submit提交)
6 formaction 设置不同按钮可将表单数据提交到不同的 URL 处理
7 form*** 动态设置<form>属性值,如formmethod="GET"

1.5 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>按钮元素</title>
  6. <style>
  7. h3 {
  8. text-align: center;
  9. }
  10. form {
  11. padding: 20px;
  12. box-sizing: border-box;
  13. width: 350px;
  14. box-shadow: 0 0 8px #888;
  15. border-radius: 10px;
  16. margin: auto;
  17. background-color: #0077aa;
  18. display: grid;
  19. gap: 15px;
  20. }
  21. input {
  22. width: 240px;
  23. height: 25px;
  24. }
  25. label {
  26. font-size: 20px;
  27. }
  28. section:last-of-type {
  29. display: flex;
  30. justify-content: center;
  31. margin-left: 45px;
  32. }
  33. button {
  34. height: 25px;
  35. width: 64px;
  36. border: none;
  37. outline: none;
  38. font-size: 12px;
  39. margin: 0 14px;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <h3>登录与注册</h3>
  45. <form action="">
  46. <section>
  47. <label for="tel">手机:</label><input type="tel" name="tel" id="tel">
  48. </section>
  49. <section>
  50. <label for="psd">密码:</label><input type="password" name="psd" id="psd">
  51. </section>
  52. <!--动态设置登录注册,使用不同的脚本进行处理,使用不同方式提交参数-->
  53. <section>
  54. <button type="submit" formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
  55. <button type="submit" formaction="register.php" formmethod="GET" formtarget="_blank">注册</button>
  56. <button type="reset">重置</button>
  57. <!--<button type="button">button</button>-->
  58. </section>
  59. </form>
  60. </body>
  61. </html>

1.5 代码运行效果展示

http://www.dashushu.club/homework0404/demo1.html


2、下拉列表常用属性与事件:<select> + <optgroup> + <option>

  • <select>:表示是下拉列表
  • <optgroup>:给下拉列表分组
  • <option>:下拉列表的值
  • <optgroup label="...">: 分组名称
  • 参数名name定义在<select>中,参数值value,定义在<option>

2.1 <select>属性

序号 属性 描述
1 name 请求参数名称/变量名
2 multiple 是否允许多选(布尔属性)
3 size 允许同时显示的列表项
4 disabled 是否禁用(布尔属性)
5 onchange 事件属性当下拉列表选项值发生变化时才会触发
6 onclick 事件属性只要点击就会触发(选项值可以不改变)

2.2 <option>属性

序号 属性 描述
1 value 请求参数的值
2 label 默认选项文本值
3 selected 是否选中(布尔属性)
3 disabled 是否禁用(布尔属性)

2.3 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>下拉列表</title>
  6. </head>
  7. <body>
  8. <form action="">
  9. <!--size="10":下拉显示数量-->
  10. <!--onchange="alert(this.value)":当前默认选项值是"北京", 点击北京不会触发change事件,除此之外都会触发-->
  11. <!--onclick="alert(this.value)":click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别-->
  12. <select
  13. id=""
  14. name=""
  15. multiple=""
  16. onchange="alert(this.value)"
  17. onclick="alert(this.value)"
  18. >
  19. <optgroup label="直辖市">
  20. <option value="" selected>北京</option>
  21. <option value="">天津</option>
  22. <option value="">上海</option>
  23. <option value="">重庆</option>
  24. </optgroup>
  25. <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
  26. <optgroup label="省份">
  27. <option value="" label="云南">
  28. <option value="" label="贵州">
  29. <option value="" label="四川">
  30. </optgroup>
  31. </select>
  32. </form>
  33. </body>
  34. </html>

2.4 代码运行效果展示

http://www.dashushu.club/homework0404/demo2.html


3、文本域常用属性与事件

3.1 常用属性

序号 属性 描述
1 cols 文本域可视宽度
2 rows 文本域可输入的行数
3 name 文本域参数名称
4 form 绑定所属表单元素
5 minlength 允许输入最小字符长度
6 maxlength 允许输入最大字符长度
7 maxlength 允许输入最大字符长度
8 placeholder 提示信息占位符
9 wrap 换行方式:hard/soft默认
10 disabled 禁用(布尔属性)
11 autofocus 自动获取焦点(布尔属性)
12 autocomplete 自动完成(布尔属性)
13 onclick 事件属性点击时触发
14 onchange 事件属性文本被修改时触发
15 onselect 事件属性文本被选中时触发

3.2 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文本域</title>
  6. <style>
  7. body {
  8. width: 80%;
  9. margin: auto;
  10. display: grid;
  11. row-gap: 15px;
  12. }
  13. button {
  14. height: 30px;
  15. border: none;
  16. outline: none;
  17. background-color: lightseagreen;
  18. color: white;
  19. }
  20. button:hover {
  21. background-color: orangered;
  22. cursor: pointer;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <!-- 表单内部为空,控件全部使用form属性与之绑定 -->
  28. <form action="" id="common"></form>
  29. <!-- change:值改变时触发, select:选中文本时触发 -->
  30. <textarea
  31. name="reply"
  32. id=""
  33. cols="30"
  34. rows="10"
  35. minlength="5"
  36. maxlength="50"
  37. form="common"
  38. placeholder="不超过100字"
  39. onchange="alert('请确认修改')"
  40. onselect="this.style.color='red'"
  41. ></textarea>
  42. <!-- 动态设置处理脚本与请求类型 -->
  43. <button
  44. type="submit"
  45. form="common"
  46. formaction="register.php"
  47. formmethod="POST"
  48. >提交</button>
  49. </body>
  50. </html>

3.3 代码运行效果展示

http://www.dashushu.club/homework0404/demo3.html


4、表单域常用属性与事件

  • 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
  • 它只有一个子元素<legend>,设置分组标题

4.1 常用属性

序号 属性 描述
1 name 分组名称
2 form 分组所属表单,默认是最近的表单
3 disabled 禁用分组(布尔属性)

name,form属性仅供参考,提交参数仍依赖内部控件中的form属性

4.2 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表单域</title>
  6. <style>
  7. body {
  8. display: grid;
  9. row-gap: 15px;
  10. width: 800px;
  11. }
  12. h3 {
  13. text-align: center;
  14. color: red;
  15. }
  16. fieldset {
  17. color: lightseagreen;
  18. border-radius: 6px;
  19. border: 2px solid lightseagreen;
  20. }
  21. fieldset:hover {
  22. background-color: lightcyan;
  23. }
  24. fieldset > section {
  25. display: grid;
  26. grid-template-columns: 1fr;
  27. column-gap: 15px;
  28. }
  29. fieldset > legend {
  30. text-align: center;
  31. }
  32. input {
  33. width: 280px;
  34. border-bottom: 1px solid #666;
  35. background-color: transparent;
  36. margin: 5px;
  37. }
  38. button {
  39. height: 30px;
  40. border: none;
  41. outline: none;
  42. border-radius: 6px;
  43. background-color: lightseagreen;
  44. color: white;
  45. }
  46. button:hover {
  47. background-color: darkorchid;
  48. cursor: pointer;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <h3>个人简历表</h3>
  54. <!-- 提交设置通过<button>元素完成 -->
  55. <form action="" id="register"></form>
  56. <!-- 表单域分组-基本信息 -->
  57. <fieldset name="base" form="register">
  58. <legend>基本信息</legend>
  59. <section>
  60. <input type="text" name="email" placeholder="姓名:" form="register" autofocus/>
  61. <input type="tel" name="tel" placeholder="电话:" form="register"/>
  62. <input type="email" name="email" placeholder="您的邮箱:" form="register" autofocus/>
  63. <input type="number" name="wechat" placeholder="微信:" form="register"/>
  64. </section>
  65. </fieldset>
  66. <!-- 表单域分组-工作经历 -->
  67. <fieldset name="other" form="register">
  68. <legend>工作经历</legend>
  69. <section>
  70. <input type="text" name="nickname" placeholder="公司名称" form="register"/>
  71. <input type="text" name="nickname" placeholder="所属部门" form="register"/>
  72. <input type="text" name="nickname" placeholder="岗位" form="register"/>
  73. <input type="text" name="nickname" placeholder="薪资情况" form="register"/>
  74. <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  75. form="common"
  76. placeholder="职责描述"
  77. ></textarea>
  78. </section>
  79. </fieldset>
  80. <!-- 表单域分组-项目经验 -->
  81. <fieldset name="other" form="register">
  82. <legend>项目经验</legend>
  83. <section>
  84. <input type="text" name="nickname" placeholder="项目名称" form="register"/>
  85. <input type="text" name="nickname" placeholder="项目描述" form="register"/>
  86. <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  87. form="common"
  88. placeholder="不超过100字"
  89. onchange="alert('请确认修改')"
  90. onselect="this.style.color='red'"
  91. ></textarea>
  92. </section>
  93. </fieldset>
  94. <!-- 表单域分组-自我评价 -->
  95. <fieldset name="other" form="register">
  96. <legend>自我评价</legend>
  97. <section>
  98. <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  99. form="common"
  100. placeholder="不超过100字"
  101. onchange="alert('请确认修改')"
  102. onselect="this.style.color='red'"
  103. ></textarea>
  104. </section>
  105. </fieldset>
  106. <!-- 表单域分组-附加信息 -->
  107. <fieldset name="other" form="register">
  108. <legend>附加信息</legend>
  109. <section>
  110. <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  111. form="common"
  112. placeholder="不超过100字"
  113. onchange="alert('请确认修改')"
  114. onselect="this.style.color='red'"
  115. ></textarea>
  116. </section>
  117. </fieldset>
  118. <button
  119. type="submit"
  120. form="register"
  121. formaction="register.php"
  122. formmethod="POST"
  123. formtarget="_blank"
  124. >提交</button>
  125. </body>
  126. </html>

4.3 代码运行效果展示

http://www.dashushu.club/homework0404/demo4.html