「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小時內與您取得聯系。

整合營銷服務商