表单与控件元素

[toc]

表单分为表单元素与控件元素二部分
表单元素仅一个: <form>
表单控件元素,根据类型不同,有多个

1. 表单元素`<form>`

1.1 常用属性

序号	属性	描述
1	`action`	表单提交的 URL 地址(处理表单请求的脚本)
2	`method`	表单提交类型:`GET/POST`
3	`enctype`	设置表单提交数据的编码方式
4	`name`	表单唯一名称,与 ID 同义
5	`target`	打开请求 URL 的方式,如果`_blank`

1.2 请求类型`method`

web 请求方式有二种: 超链接与表单提交
超链接就是使用<a>标签发起请求,其实就是GET请求
表单提交默认就是GET请求,但例用最多的是POST
请求类型属性action的取值

序号	允许值	描述
1	`GET`	默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 `2K`
2	`POST`	表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式`enctype`

序号	允许值	适用场景	描述
1	`application/x-www-form-urlencoded`	接收`value`值	默认值,使用 URL 编码,GET/POST 均适合
2	`multipart/form-data`	文件上传	采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3	`text/plain`	电子邮件	如`action="mailto:URL`

1.4 表单名称`name`

序号	功能	描述
1	标识表单元素	与`id`一样,用来唯一标识该表单元素
2	绑定表单元素	用于表单控件元素的 form 属性,用来绑定所属表单
3	访问表单元素	快捷访问内部控件元素,如`form.input.value`

1.5 打开方式`target`

序号	允许值	描述
1	`_self`	默认值,当前窗口打开提交的 URL
2	`_blank`	新窗口打开提交的 URL
3	`_parent`	父窗口打开提交的 URL
4	`_top`	顶层窗口打开提交的 URL

2. 表单控件元素`<input>`

2.1 常用属性

序号	属性	描述
1	`type`	控件类型,如文本框, 复选框…
2	`name`	请求参数的名称,对应于脚本处理的变量名
3	`value`	请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4	`form`	控件所属表单
5	`placeholder`	限输入框`text`和`password`,输入框的提示信息
6	`list`	限输入框`text`和`password`,下拉框智能提示
7	`autocomplate`	限输入框`text`和`password`,自动完成(历史记录)
8	`maxlength`	限输入框`text/password`, 允许输入最大字符数量
9	`checked`	限单选框`radio`, 复选框`checkbox`(布尔属性)
10	`readonly`	元素只读,但通过 JavaScript 可修改(布尔属性)
11	`disabled`	元素禁用,(布尔属性)
12	`autofocus`	自动获取焦点,一个表单限一个控件
13	`src`	限图像域`images`, 图像 URL 地址
14	`width`	限图像域`images`, 图像宽度
15	`height`	限图像域`images`, 图像高度

2.2 `type`类型

常用类型

序号	类型	描述
1	`<input type="text">`	单行文本框 (默认值)
2	`<input type="password">`	密码输入框
3	`<input type="radio">`	单选框
4	`<input type="checkbox">`	复选框
5	`<input type="image">`	图像域/提交表单
6	`<input type="file">`	文件上传域
7	`<input type="hidden">`	隐藏域

html5 新增类型

序号	类型	描述
1	`<input type="email">`	电子邮件
2	`<input type="data">`	日期
2	`<input type="data">`	日期
4	`<input type="datetime-local">`	本地日期时间
5	`<input type="tel">`	电话号码
6	`<input type="url">`	URL 地址
7	`<input type="number">`	数值
8	`<input type="range">`	范围拖动条
9	`<input type="search">`	搜索框/移动
10	`<input type="color">`	拾色器

2.3 常用事件属性

序号	事件属性	描述
1	`onfocus`	获取焦点时触发
2	`onblur`	失去焦点时触发
3	`onchange`	失去焦点,且值发生变化时触发
4	`oninput`	值发生变化(不等失去焦点)时触发
5	`onkeydown`	按下键盘时触发
6	`onkeyup`	抬起键盘时触发
7	`onclick`	鼠标单击时触发
8	`onselect`	选择内容文本时触发

2.4 示例

效果图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单之input</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;
      }
      input[type="image"] {
        justify-self: center;
      }
    </style>
  </head>
  <body>
    <h3>用户注册</h3>
    <form
      action="handle.php"
      method="post"
      enctype="application/x-www-form-urlencoded"
      id="register"
    >
      <!-- 单行文本输入框 -->
      <section>
        <label for="username">用户名:</label>
        <!-- 必选且自动获取焦点 -->
        <input
          type="text"
          name="username"
          id="username"
          maxlength="20"
          placeholder="不少于6位"
          required
          autofocus
        />
      </section>
      <!-- 密码输入框 -->
      <section>
        <label for="password">密码:</label>
        <input
          type="password"
          name="password"
          id="password"
          size="10"
          placeholder="不少于8位"
          required
        />
      </section>
      <!-- 单选框 -->
      <section>
        <label for="secret">性别:</label>
        <div>
          <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
          <input type="radio" name="gender" id="male" value="male" /><label
            for="male"
            >男</label
          >
          <input type="radio" name="gender" id="female" value="female" /><label
            for="male"
            >女</label
          >
          <!-- checked: 默认选项 -->
          <input
            type="radio"
            name="gender"
            id="secret"
            value="female"
            checked
          /><label for="secret">保密</label>
        </div>
      </section>
      <!-- 复选框 -->
      <section>
        <label for="programme">兴趣:</label>
        <div>
          <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
          <input type="checkbox" name="hobby[]" id="game" checked /><label
            for="game"
            >游戏</label
          >
          <input type="checkbox" name="hobby[]" id="travel" checked /><label
            for="travel"
            >旅游</label
          >
          <input
            type="checkbox"
            name="hobby[]"
            value="shoot"
            id="shoot"
          /><label for="shoot">摄影</label>
          <input
            type="checkbox"
            name="hobby[]"
            value="programme"
            id="programme"
            checked
          /><label for="programme">编程</label>
        </div>
      </section>
      <!-- 文件域 -->
      <section>
        <label for="userpic">头像:</label>
        <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
        <input type="file" name="user_pic" id="userpic" />
        <!-- 隐藏域: 限制上传文件大小不超过8M -->
        <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
      </section>
      <!-- 预定义复合框 -->
      <section>
        <label for="course">课程:</label>
        <input type="text" name="course" list="course" />
        <datalist id="course">
          <!-- 此<option>使用单标签,与<select>中不同 -->
          <option value="HTML/CSS开发与实战"> </option>
          <option value="JavaScript基础与实战"> </option>
          <option value="PHP开发基础"> </option>
          <option value="Laravel基础与实战"> </option>
        </datalist>
      </section>
      <!-- 图像域: 提交按钮为图像 -->
      <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
      <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
      <input
        type="image"
        src="btn.png"
        alt="submit"
        name="submit"
        width="100"
      />
    </form>
    <hr />
    <!-- 表单控件元素不一定必须写到<form>标签内 -->
    <!-- 表单控件使用form属性,将它与所属表单绑定 -->
    <section>
      <label for="email">邮箱:</label>
      <input type="email" name="email" id="email" form="register" />
    </section>
    <section>
      <label for="age">年龄:</label>
      <input
        type="number"
        name="age"
        id="age"
        form="register"
        min="18"
        max="60"
        step="2"
        value="22"
      />
    </section>
  </body>
</html>

3. 控件标签元素`<label>`

<label>元素没有name和value属性,不会创建请求参数
它存在的意义就是关联控件,当点击它时将焦点自动落在关联控件内部
语法: <label for="关联控件的id属性值">(也支持三大通用属性)
<label>有二种方式与控件元素进行关联/绑定

序号	关联方式	示例代码
1	显式关联	`<label for="email">Email:</label><input type="email" id="email">`
1	隐式关联	`<label>Email:</label><input type="email"></label>`

推荐使用显式关联, 案例参考<input>示例

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

4.1 与`<input>`对比

序号	`<button>`	替代的`<input>`
1	`<button type="...">按钮文本</button>`	`<input type="..." value="按钮文本">`
2	`<button><img src="..."></button>`	`<input type="image" src="...">`图像域

4.2 常用属性

序号	属性	描述
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"`

4.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>
      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="register.php" method="post">
      <section>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" required autofocus />
      </section>
      <section>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" required />
      </section>
      <section>
        <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
        <button
          type="submit"
          formaction="login.php"
          formmethod="POST"
          formtarget="_blank"
        >
          登录
        </button>
        <button
          type="submit"
          formaction="register.php"
          formmethod="GET"
          formtarget="_blank"
        >
          注册
        </button>
      </section>
    </form>
  </body>
</html>

register.php和login.php源码

<?php
// 查看表单提交的请求参数
print_r($_REQUEST);

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

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

5.1 `<select>`属性

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

5.2 `<optgroup>`属性

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

5.3 `<option>`属性

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

5.4 `<select>`事件属性

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

5.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=""
        id=""
        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" disabled>JavaScript</option>
          <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
          <option value="es6" label="ECMScript6"> </option
          ><option value="jquery" label="jQuery"> </option
        ></optgroup>
        <optgroup label="后端">
          <option value="php" label="PHP"> </option
          ><option value="mysql" label="MySQL"> </option
          ><option value="javascript" label="Laravel"> </option
        ></optgroup>
      </select>
    </form>
  </body>
</html>

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

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

6.2 事件属性

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

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

6.3 示例

效果图

```html
<!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>

HTML-表单与控件元素

表单与控件元素

1. 表单元素`<form>`

1.1 常用属性

1.2 请求类型`method`

1.3 编码方式`enctype`

1.4 表单名称`name`

1.5 打开方式`target`

2. 表单控件元素`<input>`

2.1 常用属性

2.2 `type`类型

2.3 常用事件属性

2.4 示例

3. 控件标签元素`<label>`

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

4.1 与`<input>`对比

4.2 常用属性

4.3 示例

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

5.1 `<select>`属性

5.2 `<optgroup>`属性

5.3 `<option>`属性

5.4 `<select>`事件属性

5.5 示例

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

6.1 常用属性

6.2 事件属性

6.3 示例

相关文章

HTML-表单与控件元素

表单与控件元素

1. 表单元素<form>

1.1 常用属性

1.2 请求类型method

1.3 编码方式enctype

1.4 表单名称name

1.5 打开方式target

2. 表单控件元素<input>

2.1 常用属性

2.2 type类型

2.3 常用事件属性

2.4 示例

3. 控件标签元素<label>

4. 按钮控件元素<button>

4.1 与<input>对比

4.2 常用属性

4.3 示例

5. 下拉列表元素<select>

5.1 <select>属性

5.2 <optgroup>属性

5.3 <option>属性

5.4 <select>事件属性

5.5 示例

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

6.1 常用属性

6.2 事件属性

6.3 示例

相关文章

1. 表单元素`<form>`

1.2 请求类型`method`

1.3 编码方式`enctype`

1.4 表单名称`name`

1.5 打开方式`target`

2. 表单控件元素`<input>`

2.2 `type`类型

3. 控件标签元素`<label>`

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

4.1 与`<input>`对比

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

5.1 `<select>`属性

5.2 `<optgroup>`属性

5.3 `<option>`属性

5.4 `<select>`事件属性

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