整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.槪念
用來收集用戶輸入的信息，定義采集數(shù)據(jù)的范圍，并且完成與用戶的基本交互的作用。
表單就是輸入框、單選框、復(fù)選框、按鈕、選項菜單等網(wǎng)頁元素，也稱表單元素。
2.語法
form標(biāo)簽，所有表單元素都要放在form標(biāo)簽中。
<form action = "#" method = "get">xx</form> <!-- # 是沒有數(shù)據(jù)時的占位--> from標(biāo)簽屬性：
① action：設(shè)置發(fā)送數(shù)據(jù)的位置；
② method：用什么方式發(fā)送數(shù)據(jù)。
屬性值分為get和post：get，發(fā)送數(shù)據(jù)時直接顯示在url欄中，發(fā)
送數(shù)據(jù)量小，且不安全；post，直接通過服務(wù)器發(fā)送數(shù)據(jù)，用戶看不到過
程，且數(shù)據(jù)量較大。
3.表單元素
一般使用 input標(biāo)簽：
<form action = "#" method>
<input type = "text" name = "age"/>
</form>input標(biāo)簽屬性：
type屬性：設(shè)置當(dāng)前輸入框的不同形態(tài)。值分別為：
password 密碼框，text輸入文字、字母、數(shù)字等
submit 提交按鈕，reset 重置按鈕
button 普通按鈕，checkbox 表單復(fù)選框
radio表單單選框。
name 屬性：給當(dāng)前的表單元素數(shù)據(jù)起個名字，不能是中文和特殊符號。 （除了按鈕標(biāo)簽外需要輸入數(shù)據(jù)的都要加name屬性）
value 屬性：當(dāng)前表單元素的默認(rèn)值，在按鈕標(biāo)簽中會顯示在按鈕上，在選項框里必須有，否則后端看到為on。
例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數(shù)據(jù)為sex=男，如果不寫value，則顯示sex=on。
placeholder屬性：輸入框的提示信息。
maxlength屬性：設(shè)置輸入text和password輸入框的最大字符數(shù)。
size屬性：當(dāng)type = "text"或"password"時，設(shè)置元素的寬度。
checked屬性：當(dāng)type為radio或checkbox時，設(shè)置單選框或復(fù)選框的默認(rèn)選中項。
4.擴(kuò)展表單元素
如圖，select 標(biāo)簽表示聲明下拉列表；option 標(biāo)簽用于聲明列表項；selected 改變下拉列表默認(rèn)選中項。
多文本域（textarea）：
單的本質(zhì)是業(yè)務(wù)，沒有表單是無法完成業(yè)務(wù)系統(tǒng)的，而動態(tài)表單使業(yè)務(wù)系統(tǒng)更高級。動態(tài)表單是什么呢？它是如何工作的？應(yīng)用場景有哪些？一起來看一下吧。
表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。表單的本質(zhì)是提交數(shù)據(jù)，不僅僅包含輸入框、下拉選擇框等這些控件，常見的按鈕空間也屬于一個表單。
動態(tài)表單（Dynamic Form），指在前端運(yùn)行過程中可依賴某些業(yè)務(wù)邏輯發(fā)生表單項變化的表單，還包括表單布局、表單數(shù)據(jù)管理、表單校驗、表單交互、表單項聯(lián)動邏輯等原本由前端編程完成的表單開發(fā)，轉(zhuǎn)由后端通過 API 接口輸出表單描述自動完成上述所有內(nèi)容的表單開發(fā)形式。
（動態(tài)表單原理示意圖）
表單的本質(zhì)是業(yè)務(wù)，而動態(tài)表單使業(yè)務(wù)系統(tǒng)更高級。
普通表單是一個表單寫一份前端的代碼，代碼全部由前端開發(fā)者完成（后端配合接口輸出）。而動態(tài)表單則是一個表單對應(yīng)一個 JSON（由后端輸出），所有表單由一份代碼（動態(tài)表單引擎）進(jìn)行加載和渲染。
所以，動態(tài)表單具有以下優(yōu)勢：
表單控件是提供一組允許用戶操作的對象，從而接收用戶輸入的數(shù)據(jù)，用戶可操作該對象來執(zhí)行對表單設(shè)計，修改等操作。
input元素?zé)o疑是一個龐大和復(fù)雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個傳統(tǒng)表單控件，datalist、progress、meter、output、keygen這五個新增表單控件。
動態(tài)表單是老廠商天翎核心技術(shù)之一，也是天翎公司核心產(chǎn)品MyApps的重要組成部分。通過對于動態(tài)表單的應(yīng)用，可以避免在電子流程系統(tǒng)中硬編碼的數(shù)據(jù)采集及處理表單，提高系統(tǒng)的可維護(hù)性。
說明：
Form，動態(tài)表單實(shí)現(xiàn)的基本入口，描述了DynaForm的最基本屬性，比如名稱、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過此XML描述兩類信息：
FormElement，接口，表示Form中的基本元素；
FormField，動態(tài)表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴于具體的SubClass實(shí)現(xiàn)；
TextField，單行文本框，繼承FormField；
SelectField，下拉選擇框，繼承FormField；
TextareaField，多行文本框，繼承FormField；
CheckBoxField，復(fù)選框，繼承FormField；
RadioBoxField，單選框，繼承FormField；
Textpart，靜態(tài)文本段，除各種Field以外的靜態(tài)文本部分，繼承FormElement；
ComponentField，自定義組件，繼承FormField；
AttachmentUploadField，附件上傳組件，繼承FormField；
ImageUploadField，圖片上傳組件，繼承FormField；
ViewDialogField，視圖組件，用于實(shí)現(xiàn)主從結(jié)構(gòu)的表單，繼承FormField；
CalctextField，計算文本組件，用于實(shí)現(xiàn)需要計算的文本，繼承FormField；
IncludeField，實(shí)現(xiàn)SubForm的包含，繼承FormField；
WordField，Word組件，繼承FormField；
OcrField，為將來預(yù)留的接口，系統(tǒng)暫未實(shí)現(xiàn)；
表單引擎是為快速實(shí)施項目研發(fā)的輕量級表單設(shè)計工具。采用表單引擎工具可在不開發(fā)和新增加代碼的情況下設(shè)計出新表單樣式，同比程序開發(fā)可省掉程序員差不多70%的開發(fā)工作量，并且后期維護(hù)相對簡單，管理方便。
在了解了表單的基本機(jī)構(gòu)后，進(jìn)一步看看表單引擎是如何工作的。
從客戶端（Client）輸入數(shù)據(jù)（Document），比如一個excel文件，表單（Form）結(jié)合excel文件自動生成HTML，如下圖：
（表單結(jié)合文檔生成HTML過程）
（XML解析為表單對象的過程）
（表單轉(zhuǎn)為HTML過程）
（表單生成數(shù)據(jù)庫）
天翎Myapps低代碼開發(fā)平臺的表單引擎是基于Web界面上可視化編輯的表單設(shè)計系統(tǒng)，同時支持印刷模式和拖拽模式兩種設(shè)計方式，形象可見，操作方便。印刷模式可以做一些復(fù)雜的表單配置，同時還支持word表格的導(dǎo)入；拖拽模式：基于Vue的表單設(shè)計器，采用可視化拖拉拽的模式進(jìn)行表單的設(shè)計。
（表單前臺）
（表單后臺）
本文由 @周志軍Jarod 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
eb前端開發(fā)課程：html表單-單選框多選框。
講課人：波波老師。
radio單選框、checkbox多選框，這兩個只需要選擇不需要輸入。現(xiàn)在來看一下單選框和多選框的演示。
·首先是單選框，輸入一個inputradio，可以看到默認(rèn)給了兩個屬性：name和id。把name="radio"，id="radio1"。當(dāng)然光一個單選框也沒有用，還需要給它加一個label，for-"radio1"，這個4abel for="">。這里要放上前面這個(單選框的id)"radio1"，代表著這是它的label。
·這里輸入一個單選選項一，可以看到點(diǎn)擊單選選項一，同時也可以把radio選中，這就是label的作用。多復(fù)制幾個，可以看到選擇"選項一"它被選中了，選擇選項二，選項二被選中的時候，選項一的選中狀態(tài)就被去掉了，它們?nèi)齻€只能選中一個，這就叫單選框。它們是以什么為同組標(biāo)準(zhǔn)的？就是以name為同組標(biāo)準(zhǔn)。
·假設(shè)現(xiàn)在再建一個單選框<input>，選擇name="radioradio"，id"radio4"，label for="radio4"。單選選項4，選擇1234，選4的時候?qū)η懊嫒齻€選項不產(chǎn)生影響，這就是單選框。
·接著再來看多選框，多選框，input：checkbox，4abel for="checkbox1"。選項一，把這行復(fù)制一下，可以看多選框也輸入完了。點(diǎn)擊多選框，可以看到它是可以同時選擇多個項目的，這就是多選框。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
