H5表单控件

琑95

已于 2024-03-22 15:45:30 修改

阅读量336

点赞数 5

文章标签：前端 html5

于 2024-03-22 14:50:38 首次发布

本文链接：https://blog.csdn.net/qq_64662981/article/details/136939998

版权

element网址：Element - The world's most popular Vue UI framework

H5内置控件

分类一：按照控件的外观或信息类型分类

文本框类：text textarea email tel password number search url
按钮类：button image checkbox radio reset submit
弹框类：alert() prompt() confirm()
列表类：select（option optgroup ）datalist（option ）
时间日期类：time data month week datetime datetime-local
其他：label range progress color file hidden form(fieldset legend) output
颜色示例：非input标签非html标签

分类二：按照控件信息的输入、输出和操作，等功能分类

注意，输入类的控件一般同时可以用来输出，例如：矩形计算器中，面积和周长数据的输出用的是文本框。
但是输入类的控件一般会以输入信息为主要用途，用于输出，需要特别考虑一下，是否合适，当然，还需要设置控件 disable，屏蔽输入功能
输出类的控件只能输出，没有任何歧义。
容器类的控件 page 相当于 HTML 标签中的 body，代表整个页面

属性、方法、事件

DOM 对象或者控件的属性和事件是 UI 编程的重点，属性，比如按钮控件，按钮上的文字是属性，按钮的样式是属性，按钮的状态是属性。属性决定这控件的外观和样式。事件控制交互，对于按钮控件，我们一般需要编写 Click 事件的响应代码。而控件的方法用的比较少。

GUI 界面编程的主要套路就是编写事件响应代码

事件响应代码就是对用户在界面上的交互或者操作进行处理和响应。在事件处理代码中做什么呢？

- 可以控制控件或者界面元素的属性，包括：文字内容、控件或界面元素的位置、颜色、外观，等

- 可以将用户输入的数据发送到服务器端，进行后台计算和处理

- 可以直接在浏览器里对用户的数据进行计算和处理，等

示例：

input标签的range属性

概述和样式

属性、方法、事件

常用属性（max min step）

使用场合

代码展示

<!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>
      label::before {
        padding: 3px;
        background-clip: content-box;
        box-sizing: border-box;
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid black;
        border-radius: 50%;
        margin-right: 10px;
      }

      input:checked + label::before {
        background-color: black;
      }
      input {
        display: none;
      }
      label {
        line-height: 30px;
        display: flex;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" name="gender" value="male" />男性
    <input type="checkbox" name="gender" value="female" />女性

    <input type="radio" id="radio1" />
    <label for="radio1">选项1</label>

    <input type="radio" id="radio2" />
    <label for="radio2">选项2</label>

    <input type="radio" id="radio3" />
    <label for="radio3">选项3</label>

    <input type="text" />爱好
    <br />
    <button id="btn">按钮</button>

    <input type="range" id="range1" value="10" />
  </body>

  <script>
    let btn = document.querySelector("#btn");
    btn.onclick = function (e) {
      console.log(e);
    };

    let range1 = document.querySelector("#range1");
    range1.oninput = function (e) {
      console.log(this.value);
      console.log(e.target);
    };
  </script>
</html>

琑95

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5表单控件

编程的重点，属性，比如按钮控件，按钮上的文字是属性，按钮的样式是属性，按钮的状态是属性。但是输入类的控件一般会以输入信息为主要用途，用于输出，需要特别考虑一下，是否合适，当然，还需要设置控件。注意，输入类的控件一般同时可以用来输出，例如：矩形计算器中，面积和周长数据的输出用的是文本框。在事件处理代码中做什么呢？可以控制控件或者界面元素的属性，包括：文字内容、控件或界面元素的位置、颜色、外观，等。分类二：按照控件信息的输入、输出和操作，等功能分类。而控件的方法用的比较少。输出类的控件只能输出，没有任何歧义。
复制链接

扫一扫