search

博客列表 >HTML基础:FORM表单元素（按钮、下拉列表、文本域、表单域）

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

赵大叔
赵大叔原创
2020年04月05日 11:21:541707浏览

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.         }
  11.         form {
  12.             padding: 20px;
  13.             box-sizing: border-box;
  14.             width: 350px;
  15.             box-shadow: 0 0 8px #888;
  16.             border-radius: 10px;
  17.             margin: auto;
  18.             background-color: #0077aa;
  19.             display: grid;
  20.             gap: 15px;
  21.         }
  23.         input {
  24.             width: 240px;
  25.             height: 25px;
  26.         }
  28.         label {
  29.             font-size: 20px;
  30.         }
  32.         section:last-of-type {
  33.             display: flex;
  34.             justify-content: center;
  35.             margin-left: 45px;
  36.         }
  38.         button {
  39.             height: 25px;
  40.             width: 64px;
  41.             border: none;
  42.             outline: none;
  43.             font-size: 12px;
  44.             margin: 0 14px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  50. <h3>登录与注册</h3>
  52. <form action="">
  53.     <section>
  54.         <label for="tel">手机：</label><input type="tel" name="tel" id="tel">
  55.     </section>
  56.     <section>
  57.         <label for="psd">密码：</label><input type="password" name="psd" id="psd">
  58.     </section>
  60. <!--动态设置登录注册，使用不同的脚本进行处理，使用不同方式提交参数-->
  61. <section>
  62.     <button type="submit" formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
  63.     <button type="submit" formaction="register.php" formmethod="GET" formtarget="_blank">注册</button>
  64.     <button type="reset">重置</button>
  65.     <!--<button type="button">button</button>-->
  66. </section>
  67. </form>
  68. </body>
  69. </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>
  9. <form action="">
  12.     <!--size="10"：下拉显示数量-->
  13.     <!--onchange="alert(this.value)"：当前默认选项值是"北京", 点击北京不会触发change事件,除此之外都会触发-->
  14.     <!--onclick="alert(this.value)"：click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别-->
  15.     <select
  16.         id=""
  17.         name=""
  18.         multiple=""
  19.         onchange="alert(this.value)"
  20.         onclick="alert(this.value)"
  21.     >
  23.         <optgroup label="直辖市">
  24.             <option value="" selected>北京</option>
  25.             <option value="">天津</option>
  26.             <option value="">上海</option>
  27.             <option value="">重庆</option>
  28.         </optgroup>
  31.         <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
  32.         <optgroup label="省份">
  33.             <option value="" label="云南">
  34.             <option value="" label="贵州">
  35.             <option value="" label="四川">
  36.         </optgroup>
  37.     </select>
  38. </form>
  40. </body>
  41. </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.         }
  14.         button {
  15.             height: 30px;
  16.             border: none;
  17.             outline: none;
  18.             background-color: lightseagreen;
  19.             color: white;
  20.         }
  22.         button:hover {
  23.             background-color: orangered;
  24.             cursor: pointer;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <!-- 表单内部为空,控件全部使用form属性与之绑定 -->
  30. <form action="" id="common"></form>
  31. <!-- change:值改变时触发, select:选中文本时触发 -->
  32. <textarea
  33.         name="reply"
  34.         id=""
  35.         cols="30"
  36.         rows="10"
  37.         minlength="5"
  38.         maxlength="50"
  39.         form="common"
  40.         placeholder="不超过100字"
  41.         onchange="alert('请确认修改')"
  42.         onselect="this.style.color='red'"
  43. ></textarea>
  44. <!-- 动态设置处理脚本与请求类型 -->
  45. <button
  46.         type="submit"
  47.         form="common"
  48.         formaction="register.php"
  49.         formmethod="POST"
  50. >提交</button>
  52. </body>
  53. </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.         }
  17.         fieldset {
  18.             color: lightseagreen;
  19.             border-radius: 6px;
  20.             border: 2px solid lightseagreen;
  21.         }
  23.         fieldset:hover {
  24.             background-color: lightcyan;
  25.         }
  27.         fieldset > section {
  28.             display: grid;
  29.             grid-template-columns: 1fr;
  30.             column-gap: 15px;
  31.         }
  32.         fieldset > legend {
  33.             text-align: center;
  34.         }
  36.         input {
  37.             width: 280px;
  38.             border-bottom: 1px solid #666;
  39.             background-color: transparent;
  40.             margin: 5px;
  41.         }
  43.         button {
  44.             height: 30px;
  45.             border: none;
  46.             outline: none;
  47.             border-radius: 6px;
  48.             background-color: lightseagreen;
  49.             color: white;
  50.         }
  52.         button:hover {
  53.             background-color: darkorchid;
  54.             cursor: pointer;
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  59. <h3>个人简历表</h3>
  60. <!-- 提交设置通过<button>元素完成 -->
  61. <form action="" id="register"></form>
  63. <!-- 表单域分组-基本信息 -->
  64. <fieldset name="base" form="register">
  65.     <legend>基本信息</legend>
  66.     <section>
  67.         <input type="text" name="email" placeholder="姓名：" form="register" autofocus/>
  68.         <input type="tel" name="tel" placeholder="电话：" form="register"/>
  69.         <input type="email" name="email" placeholder="您的邮箱：" form="register" autofocus/>
  70.         <input type="number" name="wechat" placeholder="微信：" form="register"/>
  71.     </section>
  72. </fieldset>
  74. <!-- 表单域分组-工作经历 -->
  75. <fieldset name="other" form="register">
  76.     <legend>工作经历</legend>
  77.     <section>
  78.         <input type="text" name="nickname" placeholder="公司名称" form="register"/>
  79.         <input type="text" name="nickname" placeholder="所属部门" form="register"/>
  80.         <input type="text" name="nickname" placeholder="岗位" form="register"/>
  81.         <input type="text" name="nickname" placeholder="薪资情况" form="register"/>
  82.         <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  83.                   form="common"
  84.                   placeholder="职责描述"
  85.         ></textarea>
  86.     </section>
  87. </fieldset>
  89. <!-- 表单域分组-项目经验 -->
  90. <fieldset name="other" form="register">
  91.     <legend>项目经验</legend>
  92.     <section>
  93.         <input type="text" name="nickname" placeholder="项目名称" form="register"/>
  94.         <input type="text" name="nickname" placeholder="项目描述" form="register"/>
  95.         <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  96.                   form="common"
  97.                   placeholder="不超过100字"
  98.                   onchange="alert('请确认修改')"
  99.                   onselect="this.style.color='red'"
  100.         ></textarea>
  101.     </section>
  102. </fieldset>
  104. <!-- 表单域分组-自我评价 -->
  105. <fieldset name="other" form="register">
  106.     <legend>自我评价</legend>
  107.     <section>
  108.         <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  109.                 form="common"
  110.                 placeholder="不超过100字"
  111.                 onchange="alert('请确认修改')"
  112.                 onselect="this.style.color='red'"
  113.         ></textarea>
  114.     </section>
  115. </fieldset>
  117. <!-- 表单域分组-附加信息 -->
  118. <fieldset name="other" form="register">
  119.     <legend>附加信息</legend>
  120.     <section>
  121.         <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
  122.                   form="common"
  123.                   placeholder="不超过100字"
  124.                   onchange="alert('请确认修改')"
  125.                   onselect="this.style.color='red'"
  126.         ></textarea>
  127.     </section>
  128. </fieldset>
  130. <button
  131.         type="submit"
  132.         form="register"
  133.         formaction="register.php"
  134.         formmethod="POST"
  135.         formtarget="_blank"
  136. >提交</button>
  138. </body>
  139. </html>

4.3 代码运行效果展示

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

上一条：form表单的一些用法下一条：表单控件学习展示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多