首页 > 博客列表 > HTML按钮、下拉菜单、文本域以及表单域分组元素的常用属性及事件

博主信息

博文 5

粉丝 0

访问量 6079

专题推荐

更多>

HTML 基础知识

1. 按钮控件元素`<button>`

1.1 常用属性

序号	属性	描述
1	`type`	必须使用预定义的`submit`,`button`,`reset`之一
2	`name`	按钮的位移名称，与ID等效
3	`value`	按钮文本初始值，可通过JavaScript修改
4	`disabled`	禁用按钮
5	`form`	按钮所属表单（此时按钮`type`默认类型为`submit`提交）
6	`formaction`	设置不同按钮可将表单数据提交到不同的 URL 处理
7	`formmethod`	动态设置`<form>`属性值，如`formmethod="GET"`
8	`formtarget`	设置数据接收页面打开方式分别为`_self`和`_blank`

1.2 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮元素</title>
    <style>
      form {
        padding: 20px;
        width: 350px;
        box-shadow: 0 0 8px #888;
        border-radius: 10px;
        box-sizing: border-box;
        margin: auto;
        background-color: lightskyblue;
        display: grid;
        gap: 15px;
      }
      form > section {
        display: grid;
        grid-template-columns: 60px 1fr;
      }
      h3 {
        text-align: center;
      }
      section:last-of-type {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
      }
      button {
        height: 30px;
        border: none;
        outline: none;
      }
      button:hover {
        background-color: lightseagreen;
        color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h3>登录/注册</h3>
    <form action="">
      <section>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required />
      </section>
      <section>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required />
      </section>
      <section>
        <button formaction="login.php" formmethod="POST" formtarget="_blank">
          登录
        </button>
        <button formaction="register.php" formmethod="GET" formtarget="_blank">
          注册
        </button>
      </section>
    </form>
  </body>
</html>

1.3 效果图

1.4 运行效果

http://211.149.219.93:90/0404/button.html

2. 下拉列表元素 `<select>`

下拉列表使用<select> + <optgroup> + <option>组合元素实现
参数名name定义在<select>中,参数值value,定义在<option>中

2.1 `<select>`属性

序号	属性	描述
1	`name`	请求参数名称/变量名
2	`multiple`	是否允许多选(布尔属性)
3	`size`	允许同时显示的列表项
3	`disabled`	是否禁用(布尔属性)

2.2 `<optgroup>`属性

属性	描述
`label`	列表分组名称

2.3 `<option>`属性

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

2.4 `<select>`事件属性

序号	事件属性	描述
1	`onchange`	当下拉列表选项值发生变化时才会触发
2	`onclick`	只要点击就会触发(选项值可以不改变)

2.5 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单中的下拉列表</title>
  </head>
  <body>
    <form action="">
      <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
      <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
      <select
        name="lang"
        id="lang"
        size="8"
        multiple
        onchange="alert(this.value)"
        onclick="alert(this.value)"
      >
        <optgroup label="前端">
          <option value="html5">HTML5</option>
          <option value="css3" selected>CSS3</option>
          <option value="javascript">JavaScript</option>
        </optgroup>
        <optgroup label="后端">
          <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
          <option value="php" label="PHP"> </option>
          <option value="mysql" label="MySQL"></option>
          <option value="laravel" label="Laravel"></option>
        </optgroup>
      </select>
    </form>
  </body>
</html>

2.6 效果图

2.7 运行效果

http://211.149.219.93:90/0404/select.html

3. 多行文本域元素`<textarea>`

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`	自动完成(布尔属性)

3.2 事件属性

序号	事件	描述
1	`onclick`	点击时触发
2	`onchange`	文本被修改时触发
3	`onselect`	文本被选中时触发

提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值

3.3 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本域</title>
    <style>
      body {
        width: 80%;
        margin: auto;
        display: grid;
        row-gap: 15px;
      }
      button {
        height: 30px;
        border: none;
        outline: none;
        background-color: lightseagreen;
        color: white;
      }
      button:hover {
        background-color: blueviolet;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <form action="" id="common"></form>
    <!-- onchang:当内容改变时触发 -->
    <!-- onselect:当内容被选中时触发 -->
    <textarea
      name="replay"
      cols="30"
      rows="10"
      minlength="5"
      maxlength="50"
      form="common"
      placeholder="不能超过50个字"
      onchange="alert('内容改变了')"
      onselect="this.style.color = 'red'"
    >
    hello,word
</textarea
    >
    <button
      type="submit"
      form="common"
      formaction="register.php"
      formmethod="POST"
    >
      提交
    </button>
  </body>
</html>

3.4 效果图

3.5 运行效果

http://211.149.219.93:90/0404/textarea.html

4. 表单域分组元素`<fieldset>`

4.1 常用属性

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

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

4.2 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单域分组元素</title>
    <style>
      body {
        display: grid;
        row-gap: 15px;
      }
      fieldset {
        color: lightseagreen;
        border-radius: 6px;
        border: 2px solid lightseagreen;
      }
      fieldset > section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 15px;
      }
      input {
        border: none;
        outline: none;
        border-bottom: 1px solid #666;
        background-color: transparent;
      }
      button {
        height: 30px;
        border: none;
        outline: none;
        border-radius: 6px;
        background-color: lightseagreen;
        color: white;
      }
      button:hover {
        background-color: darkorchid;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <form action="" id="register"></form>
    <!-- 第一个表单分组 -->
    <fieldset name="base" form="register">
      <legend>基本信息</legend>
      <section>
        <input
          type="email"
          name="email"
          placeholder="你的邮箱"
          form="register"
          autofocus
        />
        <input
          type="password"
          name="pasw1"
          placeholder="你的密码"
          form="register"
        />
        <input
          type="password"
          name="pasw2"
          placeholder="重复密码"
          form="register"
        />
      </section>
    </fieldset>
    <!-- 第二表单分组 -->
    <fieldset name="base" form="register">
      <legend>选填信息</legend>
      <section>
        <input
          type="text"
          name="nickname"
          placeholder="你的昵称"
          form="register"
        />
        <input
          type="number"
          name="age"
          min="0"
          max="120"
          placeholder="你的年龄"
          form="register"
        />
      </section>
    </fieldset>
    <button
      type="submit"
      form="register"
      formaction="register.php"
      formmethod="POST"
      formtarget="_blank"
    >
      提交
    </button>
  </body>
</html>

4.3 效果图

4.4 运行效果

http://211.149.219.93:90/0404/fieldset.html

5 总结

学习button标签的常用属性，与input标签中type=button的用法区别。
学习下拉列表select标签元素的常用属性与事件，常用事件有onchange和onclick。
学习文本域<textarea>元素常用属性与事件，了解<textarea>事件属性的用法。
学习表单域分组元素<fieldset>用法，一般用在表单字段过多时，进行分组管理

批改老师：

天蓬老师

批改状态：合格

老师批语：表单值得好好学

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前段基础（PHP开发环境与工具）

2020-04-02 02:21:13

HTML 基础知识

1. 按钮控件元素<button>

1.1 常用属性

1.2 示例

1.3 效果图

1.4 运行效果

2. 下拉列表元素 <select>

2.1 <select>属性

2.2 <optgroup>属性

2.3 <option>属性

2.4 <select>事件属性

2.5 示例

2.6 效果图

2.7 运行效果

3. 多行文本域元素<textarea>

3.1 常用属性

3.2 事件属性

3.3 示例

3.4 效果图

3.5 运行效果

4. 表单域分组元素<fieldset>

4.1 常用属性

4.2 示例

4.3 效果图

4.4 运行效果

5 总结

1. 按钮控件元素`<button>`

2. 下拉列表元素 `<select>`

2.1 `<select>`属性

2.2 `<optgroup>`属性

2.3 `<option>`属性

2.4 `<select>`事件属性

3. 多行文本域元素`<textarea>`

4. 表单域分组元素`<fieldset>`