📌  相关文章
📜  输入类型样式组件 - Javascript (1)

📅  最后修改于: 2023-12-03 15:28:17.650000             🧑  作者: Mango

JavaScript 输入类型样式组件

JavaScript 输入类型样式组件是指可以将表单中的输入框、下拉框、单选框、复选框等输入类型进行美化和定制化的组件库。

为什么需要输入类型样式组件？

在一个网站或应用中，表单是用户进行交互的重要元素，而输入框、下拉框、单选框、复选框等输入类型是表单的重要组成部分。然而，浏览器默认渲染的这些输入类型的样式并不总是符合网站或应用的整体设计和用户体验。此时，输入类型样式组件就能够发挥重要作用，将这些默认样式美化和定制化，使其更符合整体设计与用户体验。

常用的输入类型样式组件库
1. Bootstrap

Bootstrap 是一款流行的 CSS、JavaScript 和 HTML 开发框架，具有全面、响应式和移动设备优先的设计风格，并且易于扩展和定制。其中，Bootstrap Form 是 Bootstrap 框架内置的一个表单样式组件，使用灵活方便，同时提供了多个表单布局和样式选择。

示例代码：

在 head 标签中添加以下 JS 和 CSS 可以引入 Bootstrap 的表单样式组件：

<head>
  <!-- 引入 Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />

  <!-- 引入 jQuery 和 Popper.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <!-- 引入 Bootstrap JS -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</head>

在表单元素上添加 class="form-control" 选择器即可使用 Bootstrap 的表单输入类型样式：

<form>
  <div class="form-group">
    <label>姓名</label>
    <input type="text" class="form-control" placeholder="请输入姓名">
  </div>
  <div class="form-group">
    <label>性别</label>
    <select class="form-control">
      <option>男</option>
      <option>女</option>
    </select>
  </div>
  <div class="form-group">
    <label>爱好</label><br>
    <input type="checkbox" class="form-check-input">
    <label class="form-check-label">篮球</label><br>
    <input type="checkbox" class="form-check-input">
    <label class="form-check-label">足球</label><br>
    <input type="checkbox" class="form-check-input">
    <label class="form-check-label">游泳</label><br>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
2. Element

Element 是一款由饿了么前端团队开发的 Vue.js 2.0 风格的组件库，包括丰富的基础组件和功能组件，在表单输入类型的样式设计上很有特色，使用方便，功能强大。

示例代码：

在 head 标签中添加以下 JS 和 CSS 可以引入 Element 的表单样式组件：

<head>
  <!-- 引入 Element CSS -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.5/theme-chalk/index.css" />

  <!-- 引入 Vue.js 和 Element JS -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.5/index.js"></script>
</head>

在表单元素上添加组件库提供的组件即可使用 Element 的表单输入类型样式：

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input placeholder="请输入姓名"></el-input>
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group>
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="爱好">
      <el-checkbox-group>
        <el-checkbox label="篮球">篮球</el-checkbox>
        <el-checkbox label="足球">足球</el-checkbox>
        <el-checkbox label="游泳">游泳</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary">提交</el-button>
    </el-form-item>

  </el-form>
</template>
3. Semantic UI

Semantic UI 是一个 UI 组件库，在表单输入类型样式设计上也有很好的表现，使用方便。

示例代码：

在 head 标签中添加以下 JS 和 CSS 可以引入 Semantic UI 的表单样式组件：

<head>
  <!-- 引入 Semantic UI CSS -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

  <!-- 引入 jQuery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- 引入 Semantic UI JS -->
  <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>

在表单元素上添加 class 属性和标签选择器即可使用 Semantic UI 的表单输入类型样式：

<form class="ui form">
  <div class="field">
    <label>姓名</label>
    <input type="text" name="name" placeholder="请输入姓名">
  </div>
  <div class="field">
    <label>性别</label>
    <select class="ui dropdown">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div class="field">
    <label>爱好</label>
    <div class="ui checkbox">
      <input type="checkbox" name="hobby" tabindex="0" class="hidden">
      <label>篮球</label>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" name="hobby" tabindex="0" class="hidden">
      <label>足球</label>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" name="hobby" tabindex="0" class="hidden">
      <label>游泳</label>
    </div>
  </div>
  <button class="ui button" type="submit">提交</button>
</form>
总结

JavaScript 输入类型样式组件为网站或应用提供了表单输入类型的美化和定制化，以更好的满足整体设计和用户体验要求。常用的输入类型样式组件库有 Bootstrap、Element 和 Semantic UI 等，都有着丰富的表单输入类型样式提供选择和使用。