0404 表单元素及表单控件元素--input button select - 经验总结

Home > List of blog posts > 0404 表单元素及表单控件元素--input button select

Blogger Information

Blog 5

fans 0

comment 0

visits 4505

Special Recommendation

More>

Related recommendations

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 input 常用事件属性

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

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

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"`

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`	只要点击就会触发(选项值可以不改变)

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

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0404 表单元素及表单控件元素--input button select

2020-04-06 14:47:47

2. 表单控件元素<input>

2.1 常用属性

2.2 type类型

2.3 input 常用事件属性

3. 控件标签元素<label>

4. 按钮控件元素<button>

4.1 与<input>对比

4.2 常用属性

5. 下拉列表元素<select>

5.1 <select>属性

5.2 <optgroup>属性

5.3 <option>属性

5.4 <select>事件属性