.槪念

用來收集用戶輸入的信息，定義采集數據的范圍，并且完成與用戶的基本交互的作用。

表單就是輸入框、單選框、復選框、按鈕、選項菜單等網頁元素，也稱表單元素。

2.語法

form標簽，所有表單元素都要放在form標簽中。

<form action = "#" method = "get">xx</form>   <!-- # 是沒有數據時的占位--> 

from標簽屬性：

① action：設置發送數據的位置；

② method：用什么方式發送數據。

屬性值分為get和post：get，發送數據時直接顯示在url欄中，發

送數據量小，且不安全；post，直接通過服務器發送數據，用戶看不到過

程，且數據量較大。

3.表單元素

一般使用 input標簽：

<form action = "#" method>
 			<input type  = "text" name = "age"/>
  </form>

input標簽屬性：

type屬性：設置當前輸入框的不同形態。值分別為：

password 密碼框，text輸入文字、字母、數字等

submit 提交按鈕，reset 重置按鈕

button 普通按鈕，checkbox 表單復選框

radio表單單選框。

name 屬性：給當前的表單元素數據起個名字，不能是中文和特殊符號。 （除了按鈕標簽外需要輸入數據的都要加name屬性）

value 屬性：當前表單元素的默認值，在按鈕標簽中會顯示在按鈕上，在選項框里必須有，否則后端看到為on。

例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數據為sex=男，如果不寫value，則顯示sex=on。

placeholder屬性：輸入框的提示信息。

maxlength屬性：設置輸入text和password輸入框的最大字符數。

size屬性：當type = "text"或"password"時，設置元素的寬度。

checked屬性：當type為radio或checkbox時，設置單選框或復選框的默認選中項。

4.擴展表單元素

如圖，select 標簽表示聲明下拉列表；option 標簽用于聲明列表項；selected 改變下拉列表默認選中項。

多文本域（textarea）：

單的本質是業務，沒有表單是無法完成業務系統的，而動態表單使業務系統更高級。動態表單是什么呢？它是如何工作的？應用場景有哪些？一起來看一下吧。

一、表單

表單在網頁中主要負責數據采集功能，是提交數據的一切形式。表單的本質是提交數據，不僅僅包含輸入框、下拉選擇框等這些控件，常見的按鈕空間也屬于一個表單。

1. 動態表單

動態表單（Dynamic Form），指在前端運行過程中可依賴某些業務邏輯發生表單項變化的表單，還包括表單布局、表單數據管理、表單校驗、表單交互、表單項聯動邏輯等原本由前端編程完成的表單開發，轉由后端通過 API 接口輸出表單描述自動完成上述所有內容的表單開發形式。

（動態表單原理示意圖）

2. 動態表單的特點優勢

表單的本質是業務，而動態表單使業務系統更高級。

普通表單是一個表單寫一份前端的代碼，代碼全部由前端開發者完成（后端配合接口輸出）。而動態表單則是一個表單對應一個 JSON（由后端輸出），所有表單由一份代碼（動態表單引擎）進行加載和渲染。

所以，動態表單具有以下優勢：

• 客戶端運行的代碼量更少；
• 每個表單的JSON按需加載；
• 表單需求變化時，無需前端修改發版，只需編輯數據庫中的JSON。

二、表單控件

表單控件是提供一組允許用戶操作的對象，從而接收用戶輸入的數據，用戶可操作該對象來執行對表單設計，修改等操作。

1. HTML表單種常見的13個控件

input元素無疑是一個龐大和復雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個傳統表單控件，datalist、progress、meter、output、keygen這五個新增表單控件。

2. 動態表單控件

動態表單是老廠商天翎核心技術之一，也是天翎公司核心產品MyApps的重要組成部分。通過對于動態表單的應用，可以避免在電子流程系統中硬編碼的數據采集及處理表單，提高系統的可維護性。

說明：

Form，動態表單實現的基本入口，描述了DynaForm的最基本屬性，比如名稱、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過此XML描述兩類信息：

1. Form中所具有的Field以及Field的類型、名稱、長度、計算代碼等等，XML；
2. Form的格式，比如排列次序、表格定列化的過程當中，系統自動解析XML的內容并將其轉換為Java Object并由此具備Object的行為特性；位等。Form作為一個ValueObject存儲在數據庫中。

FormElement，接口，表示Form中的基本元素；

FormField，動態表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴于具體的SubClass實現；

TextField，單行文本框，繼承FormField；

SelectField，下拉選擇框，繼承FormField；

TextareaField，多行文本框，繼承FormField；

CheckBoxField，復選框，繼承FormField；

RadioBoxField，單選框，繼承FormField；

Textpart，靜態文本段，除各種Field以外的靜態文本部分，繼承FormElement；

ComponentField，自定義組件，繼承FormField；

AttachmentUploadField，附件上傳組件，繼承FormField；

ImageUploadField，圖片上傳組件，繼承FormField；

ViewDialogField，視圖組件，用于實現主從結構的表單，繼承FormField；

CalctextField，計算文本組件，用于實現需要計算的文本，繼承FormField；

IncludeField，實現SubForm的包含，繼承FormField；

WordField，Word組件，繼承FormField；

OcrField，為將來預留的接口，系統暫未實現；

三、表單引擎

表單引擎是為快速實施項目研發的輕量級表單設計工具。采用表單引擎工具可在不開發和新增加代碼的情況下設計出新表單樣式，同比程序開發可省掉程序員差不多70%的開發工作量，并且后期維護相對簡單，管理方便。

1. 工作原理

在了解了表單的基本機構后，進一步看看表單引擎是如何工作的。

從客戶端（Client）輸入數據（Document），比如一個excel文件，表單（Form）結合excel文件自動生成HTML，如下圖：

（表單結合文檔生成HTML過程）

（XML解析為表單對象的過程）

（表單轉為HTML過程）

（表單生成數據庫）

2. 應用場景

天翎Myapps低代碼開發平臺的表單引擎是基于Web界面上可視化編輯的表單設計系統，同時支持印刷模式和拖拽模式兩種設計方式，形象可見，操作方便。印刷模式可以做一些復雜的表單配置，同時還支持word表格的導入；拖拽模式：基于Vue的表單設計器，采用可視化拖拉拽的模式進行表單的設計。

（表單前臺）

（表單后臺）

本文由 @周志軍Jarod 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

eb前端開發課程：html表單-單選框多選框。

講課人：波波老師。

radio單選框、checkbox多選框，這兩個只需要選擇不需要輸入。現在來看一下單選框和多選框的演示。

·首先是單選框，輸入一個inputradio，可以看到默認給了兩個屬性：name和id。把name="radio"，id="radio1"。當然光一個單選框也沒有用，還需要給它加一個label，for-"radio1"，這個4abel for="">。這里要放上前面這個(單選框的id)"radio1"，代表著這是它的label。

·這里輸入一個單選選項一，可以看到點擊單選選項一，同時也可以把radio選中，這就是label的作用。多復制幾個，可以看到選擇"選項一"它被選中了，選擇選項二，選項二被選中的時候，選項一的選中狀態就被去掉了，它們三個只能選中一個，這就叫單選框。它們是以什么為同組標準的？就是以name為同組標準。

·假設現在再建一個單選框<input>，選擇name="radioradio"，id"radio4"，label for="radio4"。單選選項4，選擇1234，選4的時候對前面三個選項不產生影響，這就是單選框。

·接著再來看多選框，多選框，input：checkbox，4abel for="checkbox1"。選項一，把這行復制一下，可以看多選框也輸入完了。點擊多選框，可以看到它是可以同時選擇多個項目的，這就是多選框。