TML作為一種用來描述網頁的語言，是制作網頁必不可少的，但HTML 不是一種編程語言，而是一種標記語言 (markup language），本著為了更好的了解大數據開發的基礎，今天就帶著大家更進一步的了解HTML的使用，HTML的表格與表單。

1.HTML表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的作用就不言而喻了，讓看起來更簡潔直觀有序性。

下面給大家帶來一些常用的標簽：

<table> 表格的最外層容器

<tr> 定義表格行

<th> 定義表頭

<td> 定義表格單元

<caption>定義表格表題

　　<width>:寬度。可以用像素或百分比表示。 常用960像素。

　　<border>：邊框，常用值為0。

　　<cellpadding>：內容跟邊框的距離，常用值為0。

　　<cellspacing>：單元格與單元格之間的間距，常用值為0。

　　<algin>：對齊方式。

　　<bgcolor>：背景色。

<background>：背景圖片。

<align>: 一行內容的水平對齊方式。

<valign>: 一行內容的垂直對齊方式。

<height>：行高。

創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。

創建表格的基本語法：

<table>

<tr>

<td>單元格內的文字</td>

...

</tr>

...

</table>

舉個例子

其中：table用于定義一個表格標簽。

tr標簽 用于定義表格中的行，必須嵌套在 table標簽中。

td 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

字母 td 指表格數據（table data），即數據單元格的內容。

再比如說我們可以建立個有顏色的格子，如下圖

表格的作用除了可以顯示一個表格外，有的時候還可以用于輔助排版。但現在都不怎么使用了，因為時代的進步，以前的表格排版的網頁已經被淘汰了。

2. HTML表單

關于表單的制定，因為在瀏覽器中輸入的內容都必須要經過網絡提交到服務器端再處理，所以需要把所有的控件都包含在一個form表單控件中，然后一次提交給服務器，再由服務器處理用戶提交的數據。

HTML 支持有序列表(有序列表是一列項目，列表項目使用數字進行標記。

有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。)無序列表(無序列表也是一個項目的列表，此列項目使用粗體圓點“典型的小黑圓圈“進行標記。)和定義列表(自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。)。

表單常用標簽：

form: 表單的最外層容器

input: 用于搜集用戶信息,根據不同的type屬性值,展示不同的控件

Text：普通的文本輸入框

Password：密碼輸入框

Checkbox：復選框

Radio：單選框

File：上傳文件

Submit：提交按鈕

Reset：重置按鈕

Cols：列

Rows：行

注意事項：

<form id="" name="" method="post/get" action="負責處理的服務端">--輸入系統時，必須有

Name ：定義表單的名稱；

Method: 定義表單結果從瀏覽器傳送到服務器的方式，默認參數為：get

Action ：用來指定表單處理程序的位置(服務器端腳本處理程序）

Fieldset：把表單分組；

Legend：分組名稱。

id不可重復，name可重復，get提交有長度限制，并且編碼后的內容在地址欄可見，post提交沒有長度限制，且編碼后內容不可見。

舉個例子

<form action="login.asp" method="post">

<label>用戶名: </label><input type="text" name="username" />

<label>密碼: </label><input type="password" name="password" />

</form>

得到結果如圖

本期的內容比較多，大家可以在平日里多加練習，這是大數據開發基礎的重要部分，做到能更熟練，更準確，希望大家能有所進步。

<form >
	<input type="text" />			
</form>

<fieldset >
	<legend>學生信息</legend>
	姓名：<input type="text" /><br>
	班級：<input type="text" /><br>			
</fieldset>

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

一、表單

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

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協議

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