「UI框架」Layui的页面元素之form表单基本介绍

端框架Layui的页面元素form表单比较使用起来简单，通过在容器中设定class="layui-form"标识一个form表单元素块，通过layui内置的form模块可以完成各种交互，包括表单的各种验证，因此需要依赖加载内置的form模块，如果不加载form模块，select、checkbox、radio等元素无法正常显示，并且无法使用form相关交互功能。

关于layui框架相关文件的加载，移步《你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui》查看，这里采用的是模块化加载方式。

使用form元素，加载form模块的方式如下：

<script>
layui.use('form', function(){
 var form = layui.form;
});
</script>

先看一个整体表单，代码如下：

上述代码效果如下：

是不是有点丑？那是因为我将form表单放在了一个设定了class="layui-main"的div中，整体宽度为1140px，而form元素最基本的行区块结构（下面有介绍）提供了响应式的支持。

为解决表单大小的问题，我预设了几个样式来规范input的大小，分别为：

.input-mini { width: 72px }
.input-small { width: 90px }
.input-medium { width: 150px }
.input-large { width: 210px }
.input-xlarge { width: 300px }
.input-xxlarge { width: 540px }

然后，我再上述表单中的layui-input后面追加了对应的input-{size}类名，组合成新的表单，感觉好多了，新样式如下：

行区块结构

现在介绍一下form表单的基本行区块结构：

<div class="layui-form-item">
 <label class="layui-form-label">标签区域</label>
 <div class="layui-input-block">
 <!--原始表单元素区域-->
 <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 </div>
</div>

当然，你可以修改这个行区块结构，或者完全抛弃这个结构，用自己的结构。其中，required注册浏览器所规定的必填字段，与平常的HTML表单没区别；lay-verify注册form模块需要验证的类型，form模块验证需要用到；class="layui-input"是layui.css提供的通用CSS类。

比如，当我设置手机号码为必填项时，不写的情况下提交表单会有对应的弹窗提示，实际效果如下：

下拉选择框

layui表单的基本下拉选择框已经在上述案例中展示了，不多说了，与常规的select元素没啥区别，有区别的是通过给select设定lay-search属性可以开启搜索匹配功能。

代码如下：

<select name="city" lay-verify="required" lay-search>
<option value=""></option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
<option value="5">郑州</option>
</select>

开关按钮

layui提供了开关表单元素，本质上是CheckBox复选框的变种，通过设定 lay-skin="switch" 形成开关风格，

<input type="checkbox" name="kaiguan" lay-skin="switch" lay-text="ON|OFF" checked>

通过属性lay-text自定义开关两种状态的文本，设置value=""自定义值，不设置的话，选中时返回默认的on。

其他表单元素，比如单选、复选框等与常规的一样。

忽略美化渲染

如果不喜欢layui的ui，layui还提供了lay-ignore属性，禁止layui对标签进行美化渲染。使用比较简单，比如：

<select name="city" lay-verify="required" lay-search lay-ignore>
<option value=""></option>
</select>

设置后，表单会保留原有系统风格，不过layui提供相应的接口和交互也会失效，这个例子中不能搜索了。

layui组装行内表单

layui的行内表单其实是改变了原有的表单元素区块接口，比较简单，比如价格范围表单：

好了，这就是layui表单form的基本介绍，下次将推layui页面元素之导航模块。

载说明：原创不易，未经授权，谢绝任何形式的转载

表单是现代网页开发的重要组成部分，创建表单通常是一项耗时且繁琐的任务。这就是FormKit的用武之地；它是一个功能强大的现代表单构建库，旨在帮助开发人员轻松高效地创建表单。

在本文中，我们将探讨使用FormKit的好处，并提供一个逐步指南，教你如何使用这个强大的工具构建表单。请继续阅读，了解FormKit如何帮助您简化表单构建过程，更快地构建更好的表单！

FormKit是什么？

FormKit是一个免费、开源的框架，仅适用于Vue 3（如果你使用的是Vue 2，请查看Vue Formulate），旨在为您提供创建生产就绪表单所需的所有工具。安装FormKit后，您将立即获得许多输入类型、通过可序列化JSON模式生成表单、广泛的验证规则以及创建自定义表单输入和自定义现有输入行为的能力。

FormKit并不过多关注您构建的表单的布局或美学 - 这取决于您自己。但是，它确实附带了一个最小的样式主题，您可以用于快速而简单的工作。如果您想详细了解FormKit的功能，请阅读它们的文档。

项目设置

如果您想跟随本指南进行操作，您需要先进行一些设置工作。

你的第一个任务是使用Vite创建一个Vue项目。首先，在终端中导航到你想要项目存放的位置。接下来，运行以下命令：

npm create vite@latest

create-vite 命令会向您提出几个问题。请按照下方截图中的示例进行回答：

然后进入项目文件夹并安装必要的依赖项：

cd formkit-demo
npm install

接下来，通过运行 npm run dev 启动开发服务器，然后访问localhost:5173以查看您的应用程序。

现在您已经设置好了Vue项目，是时候安装FormKit和默认主题了。打开另一个终端窗口并运行以下代码：

npm i @formkit/vue @formkit/themes

你最后的设置任务是清理掉你不需要的样板文件。删除 src/assets 文件夹， src/components/HelloWorld.vue ，和 src/style.css 。此时，你的项目目录应该有以下结构：

将 src/App.vue 的内容替换为一个空模板和脚本，如下所示：

<script setup></script>

<template></template>

然后通过将 src/main.js 的内容替换为以下内容，导入样式并在Vue应用程序中注册Formkit

import { createApp } from "vue";
import { plugin, defaultConfig } from "@formkit/vue";
import "@formkit/themes/genesis";
import App from "./App.vue";

createApp(App).use(plugin, defaultConfig).mount("#app");

设置完成。

使用FormKit构建表单

为了展示使用FormKit构建表单的简易性，您将使用它创建一个预约请求表单，该表单如下所示：

让我们从创建表单容器和标题开始。打开 src/App.vue 并将以下代码放入其中：

<template>
  <FormKit
    type="form"
    #default="{ value }"
    form-class="outer-container"
    :config="{
      validationVisibility: 'dirty',
    }"
  >
    <h1>Appointment Request form</h1>
    <h3>Fill out the form below, and we'll be in touch via email</h3>
  </FormKit>
</template>

<style>
.outer-container {
  width: 400px;
  border: 1px solid #e4e4e4;
  padding: 1.5em;
  border-radius: 1em;
  margin: 0 auto 1em auto;
}

.input-group {
  display: flex;
  gap: 1em;
}

h1,
h3 {
  text-align: center;
}
</style>

FormKit有一个独特的功能：所有的表单输入都是使用 <FormKit> 组件创建的。您传递给 <FormKit> 组件的props决定了渲染哪个输入，以及标签和样式等内容。让我们更仔细地看一下 <FormKit> 组件。以下是代码：

<FormKit
  type="form"
  #default="{ value }"
  form-class="outer-container"
  :config="{
    validationVisibility: 'dirty',
  }"
>

这段代码使用 type 属性来指定组件应该是一个 form 输入框。 form-class 属性指定要应用于渲染的输入框的类。 validationVisibility: 'dirty' 属性的 config 属性指定当输入值不符合验证规则时，表单输入的任何验证错误都应该立即显示出来。 default 插槽非常重要，因为我们稍后可以使用表单输入的值来编写逻辑。

接下来，您将要创建一些表单输入。请在模板中的 <h3> 标签后添加以下代码：

<div class="input-group">
  <FormKit
    type="text"
    label="First name"
    placeholder="John"
    validation="required|length:3"
  ></FormKit>

  <FormKit
    type="text"
    label="Last name"
    placeholder="Doe"
    validation="required|length:3"
  ></FormKit>
</div>

<FormKit
  type="date"
  label="Date of Birth"
  validation="required|date_before:2023-01-01"
></FormKit>

<div class="input-group">
  <FormKit
    type="text"
    label="Gender"
    placeholder="Your gender"
    validation="required"
  ></FormKit>

  <FormKit
    type="text"
    label="Phone number"
    suffix-icon="telephone"
    placeholder="555-5555-555"
    validation="required"
  ></FormKit>
</div>

这段代码介绍了如何使用FormKit来生成具有 text 和 date 输入的 type 属性。它还展示了验证和图标的工作原理。

当您安装FormKit时，您还会安装一套免费的、MIT许可的图标。您可以通过在输入字段的 prefix-icon 和 suffix-icon 属性中指定图标的名称来在您的表单中使用这些图标。

要对输入应用验证，您需要将一组验证规则（用竖杠“|”分隔）提供给验证属性，并通过冒号（“:”）为每个验证规则提供参数。

添加此代码后，您的表单应该是这样的：

当您填写每个字段时，一旦输入违反验证规则，您将看到显示错误。当您尝试提交表单时，所有剩余的错误都将显示，无论输入值是否已被修改。

接下来，您将编写类似的代码来创建地址和电子邮件地址字段。将以下代码添加到您的模板中：

<FormKit
  type="text"
  label="Address"
  placeholder="21st Random Street"
  validation="required"
></FormKit>

<FormKit
  type="email"
  label="Email address"
  placeholder="JohnDoe@gmail.com"
  suffix-icon="email"
  validation="required|email"
></FormKit>

新字段将显示如下：

为了你的下一个技巧，你将要构建一些新的东西：一个有条件渲染的输入框。如果用户在询问是否有首选医生的单选按钮上选择了“是”，我们希望出现一个文本输入框，询问你想要选择哪位医生。

将以下代码添加到您的模板末尾：

<FormKit
  type="radio"
  label="Do you have a doctor you would prefer to attend to you?"
  name="preferred"
  :options="['Yes', 'No']"
  validation="required"
></FormKit>

<FormKit
  v-if="value.preferred === 'Yes'"
  type="text"
  label="What's the name of this doctor?"
  validation="required"
></FormKit>

这段代码使用默认插槽的 value 对象来访问每个输入字段的值。因此，在后续的输入中，你只需要使用v-if来根据值对象隐藏输入，直到单选按钮的值为“是”。

只剩下一个 select 和一个 date-time 输入框来完成您的表单。像这样添加它们：

<FormKit
  type="select"
  label="Which procedure do you want done?"
  :options="['Check up', 'Result analysis', 'Medical exam']"
  placeholder="Select a procedure"
  validation="required"
></FormKit>

<FormKit
  type="datetime-local"
  label="Preferred appointment date and time"
  validation="required"
></FormKit>

你已经填写完整了！

结束

总之，FormKit为现代Web开发提供了一个强大而灵活的构建表单的解决方案。该库使开发人员能够轻松创建复杂的表单，并具有许多功能和工具来简化表单构建过程。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

级元素与内联元素的概念与区别

在HTML中，大多数元素都被定义为块级元素或内联元素。

块级元素通常会独立成行，而内联元素会并排显示。

在我们学过的元素中，

块级元素如：<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示，代码如下：

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图：

内联元素展示如下

示例代码：这段代码被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>

效果如图：

其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。

HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。

比如这个！

笔者第一个漫画作品

如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：

强制为其添加边框分割：

大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：应届生4天的时间来制作一个简单的HTML按钮和CSS，应该解雇他吗？
下一篇：HTML5(七)-SVG基础入门

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商