Niushop開源商城表單單選按鈕、開關按鈕及表單展示等開發代碼

2021-01-10 阿牛ger

上一期,阿牛ger與大家分享了創建表單的基本功能,調整表單寬度、表單輸入框、表單必輸標識、表單注釋及複選框功能的添加代碼,這一期,阿牛ger接著與大家分享Niushop開源商城表單開發那些事兒:

單選按鈕

效果圖:

代碼如下:

<!-- 單選框 -->

<div>

<label>單選框</label>

<div>

<input type="radio" name="sex" value="0" title="男">

<input type="radio" name="sex" value="1" title="女" checked>

</div>

</div>

注意:

checked 表示選中

開關按鈕

效果圖:

代碼如下:

<!-- 開關按鈕 -->

<div>

<label>開關關</label>

<div>

<input type="checkbox" value="1" lay-skin="switch">

</div>

</div>

表單展示

效果圖:

代碼如下:

<div>

<label>表單展示</label>

<div>

<p>2019-11-11 15:30:29</p>

</div>

</div>

表單 - 按鈕

效果圖:

代碼如下:

<div>

<button>保存</button>

<button type="reset">返回</button>

</div>

一行多列

效果圖:

代碼如下:

<div>

<label>縮略大圖(單位:px)</label>

<div>

<div>寬</div>

<div>

<input name="thumb_big_width" type="number" lay-verify="int">

</div>

<div>高</div>

<div>

<input name="thumb_big_height" type="number" lay-verify="int">

</div>

</div>

</div>

手動觸發select事件

layui沒有封裝手動觸發select的事件,可以參考以下代碼:

$("select[name='category']").siblings("div.layui-form-select").find("dl dd[lay-value='" + value + "']").click();

欄位集區塊

效果圖:

代碼如下:

<fieldset>

<legend>標題</legend>

<div>內容區域</div>

</fieldset>

你學會了嗎?關注我,分享更多開發代碼小知識!

相關焦點

  • Niushop開源商城系統表單搭建
    表單搭建,是商城系統觸發按鈕的重要模塊之一,有工整詳細的表單,不僅能讓頁面更加美觀大氣,還可以讓後臺代碼更加規整與規範,方便及時查漏或者商家再次二開!表單label寬度layui-form-label 155pxlayui-form-label sm 100pxinput寬度input框 最短(100px): ns-len-small
  • 簡單表單實現
    網站上一般都有登錄、註冊、評論什麼的,這裡就需要form表單來處理了常用的表單標籤有:form:表單容器input:輸入控制項select:選擇控制項input[type="radio"]:單選控制項input[type="checkbox"]:複選控制textarea:文本域button:按鈕組合的效果如果:相應代碼如下:
  • HTML表單標籤基礎
    HTML表單一、傳統表單(一)1、表單是什麼?01.在網頁中主要負責數據採集功能的組件。02.通常與資料庫相連。03.由表單元素組成。2、表單組件介紹:01.文本(欄位)02.選擇03.單選按鈕(組)04.文本域05.複選框06.密碼(欄位)07.文件域08.提交按鈕09.重置按鈕3、form 標籤 (表單範圍)...
  • Python學習第224課——html表單
    input標籤的主要類型如下:文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。●html表單的格式一個表單大概是下面這樣的格式:<form>...
  • 由淺入深地聊聊html的表單
    今天和大家分享學習一下html的表單一、HTML標籤:表單標籤表單的概念:用於採集用戶輸入的數據的。用於和伺服器進行交互。1、form表單標籤他是用於定義表單的,本身並沒有什麼樣式,可以定義一個範圍,範圍代表採集用戶數據的範圍,通俗易懂的說就是 被他包裹的數據可以被提交給伺服器。
  • B端交互組件之:表單篇
    一、表單所處位置設計一款產品時,表單會用的比較多,作為主要的輸入操作的表現形式,會體現在很多的地方,下面會對表單所處位置進行詳細講解。1. 頁面打開某個頁面時,可以看到表單組件,用戶輸入數據後,點擊提交按鈕,數據傳遞給系統。
  • 前端入門須知:輕鬆學會form表單製作!
    表單是由窗體和控制項組成的,一個表單一般應該包含用戶填寫信息的輸入框,提交按鈕等,這些輸入框,按鈕叫做控制項,表單很像容器,它能夠容納各種各樣的控制項。二、表單元素一個完整的表單包含三個基本組成部分:表單標籤、表單域、表單按鈕。
  • Web後臺產品的表單頁規範
    編輯導讀:不管是APP還是網頁端,表單頁都是經常用到的功能之一。網頁端PM需要了解常見表單頁的相關規範,作者根據多年的經驗總結出了通用邏輯和文檔規範,希望對你有所啟發。表單頁通常由多種輸入組件和提交按鈕組成,輸入組件通常包含輸入框、下拉列表框、單選框、複選框等等。
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!我們一起來看看吧!
  • 「Flask web 開發」第4章 Web表單
    第 4 章 Web表單第 2 章中介紹的請求對象包含客戶端發出的所有請求信息。其中, request.form 能獲取POST 請求中提交的表單數據。儘管 Flask 的請求對象提供的信息足夠用於處理 Web 表單,但有些任務很單調,而且要重複操作。比如,生成表單的 HTML 代碼和驗證提交的表單數據。
  • 界面設計方法(5):表單功能的設計
    系統需求:從開發實現的角度看,一張表單上表達的內容過多、邏輯過於複雜,有可能造成日後對表單內容的維護困難,因此內容和維護要適當平衡。2)功能表單是用來展示具有固化格式的數據,主要有兩類表達形式:報表形式、單據形式。報表形式:通常展示的是多條數據,針對某個題目,將系統中某個時間段內符合條件的數據進行抽提、加工、形成分析報表。
  • 開源軟體分享-基於.net core 3.1的快速開發框架
    曾幾何時.NET們很羨慕JAVA的生態,java開源生態裡面你用得著的幾乎都有開源的實現。比如大數據、微服務、以及各種各樣的快速開發框架,特別是spring boot出來以後,簡化了SSM那套繁瑣的配置文件,搭建框架也越來越方便了。
  • layui的彈出框、form表單、表格使用常見問題解決方案
    其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。最近公司開始全面的更改前端的框架,由bootstrap更改為layui'框架,在嘗試使用layui編寫前臺邏輯時,遇到了很多的坑,在此做一些常用坑的解決辦法的總結。
  • 新功能|如何將表單數據批量生成二維碼
    有細心的小夥伴一定發現了,自上次版本更新之後,在表單設置頁面,API欄位列表的最下方,欄位代碼中多了一個「${q}」,這就是要給你們介紹的新功能 — 數據支持使用Word模板生成二維碼。是什麼意思呢?此時的文檔是空白的,需要在文檔中添加指定的「欄位代碼」才能使表單數據導出生成為二維碼。點擊表單設置 >>API>>欄位列表,可以看到每個欄位對應的代碼,二維碼的欄位代碼在列表的最下方。
  • FHS-Framework V2.0.3 發布,開源快速開發平臺
    開發模式下,自動填充表單功能,適用於CRUD測試的時候,自動填充數據。
  • JeecgBoot 2.4 微服務正式版發布,基於 SpringBoot 的低代碼平臺
    強大的代碼生成器讓前後端代碼一鍵生成,實現低代碼開發! JeecgBoot 引領新的低代碼開發模式(OnlineCoding-> 代碼生成-> 手工MERGE), 幫助解決Java項目70%的重複工作,讓開發更多關注業務。既能快速提高效率,節省研發成本,同時又不失靈活性!
  • 如何用表單流程搭建維修申報系統?
    設計流程用戶填寫維修申請登記表 → 客服回訪確認維修信息 → 師傅上門維修並填寫維修結果 → 滿意度回訪操作步驟1.創建表單首先,創建一張表單,表單中需要包含維修申報信息、客服電話回訪確認維修事宜、上門維修結果記錄、滿意度回訪這些內容。
  • JavaWeb_Cloud_Pro 旗艦版 v1.1.0 發布,完善代碼生成器
    1、解決登錄過期卡死,無法跳轉登錄頁的問題;2、解決近期客戶使用過程中反饋的BUG修復;3、優化微服務認證中心和網關服務;項目介紹JavaWeb_Cloud_Pro 是基於 SpringBoot2+Vue+ElementUI+MybatisPlus 研發的權限(RBAC)及內容管理系統,致力於做更簡潔的後臺管理框架,包含系統管理、代碼生成
  • 熱點:建德開關按鈕廠家/微型開關按鈕價格
    熱點:建德開關按鈕廠家/微型開關按鈕價格我公司專業生產:智能型框架斷路器、塑料外殼式斷路器、小型斷路器、雙電源自動轉換開關、控制與保護開關、交流接觸器等產品。/微型開關按鈕價格輕觸開關的使用大家一定會了解過,在市場中的佔有率也是日漸上升,所以說我們大家要把握好這些方面的知識和情況,下面的詳細的細節介紹。提到輕觸開關這個,很多人似乎還覺得有有些陌生。其實在我們的日常生活中,天天和這些高科技打交道,它給我們的日常生活帶來各種便利,只是人們並未留意它的學名。
  • 體驗設計:不起眼卻非常重要的表單交互!
    由於使用場景不同,很多公司都是電腦網頁和移動app同時開發的,然後把pc端的所有功能都移植到移動app上,表單也全部挪到移動端,造成app體量非常龐大,功能也臃腫,用戶使用起來非常不便。新開頁面輸入-有時候我們一個表單的內容很多,輸入和選擇混雜在一起,輸入的文字也非常多,那我們可以可以考慮在當前頁面展示,輸入則進到新開頁面進行。