個表單的form標(biāo)簽是必不可少的，所有的表單元素都應(yīng)該被他包含。一個頁面可能有多個表單，就需要對每個表單的區(qū)域進(jìn)行分組，防止表單信息混雜。

目標(biāo)

1. 表單的完整結(jié)構(gòu)？
2. 表單內(nèi)如何進(jìn)行元素分組？

表單

可以在一個網(wǎng)頁中收集用戶的數(shù)據(jù)，比如填寫用戶注冊數(shù)據(jù)、留言板、評論等內(nèi)容。

Form標(biāo)簽

一個表單的form標(biāo)簽是必不可少的，所有的表單元素都應(yīng)該被他包含。

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

一個網(wǎng)頁可能會有多個表單，就需要聲明每個表單的區(qū)域，防止表單信息混雜。

以下就是兩個表單，他們之間的表單元素就會跟隨自己的表單。

分組

有時候，表單內(nèi)的元素過多，就需要將他們進(jìn)行分類。

fieldset標(biāo)簽可以將表單內(nèi)的相關(guān)元素分組。

legend標(biāo)簽是為 fieldset元素定義標(biāo)題。

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

總結(jié)

站頁面表單設(shè)計是一種用于在行和列中顯示大量數(shù)據(jù)的設(shè)計模式，目前尚未失寵，所以讓我們看看如何在Web上創(chuàng)建更合適的表單。

頁面表單的設(shè)計模式，使其有效地對分類對象進(jìn)行比較分析，這也是被用于此目的。

網(wǎng)站頁面顯示不可避免地以表格格式顯示數(shù)據(jù)，HTML以語義和結(jié)構(gòu)上適當(dāng)?shù)姆绞匠尸F(xiàn)表格數(shù)據(jù)。但是，HTML表格上的默認(rèn)樣式并不是你見過的最美觀的頁面，根據(jù)所需的視覺設(shè)計，需要CSS前端設(shè)計美化這些表格。

如果數(shù)據(jù)集數(shù)量并不是那么龐大，并且不需要分頁或排序這樣的功能，那么我們可以優(yōu)先考慮使用無JavaScript選項，沒有加載JavaScript的頁面代碼可以使該頁面整個屏幕尺寸范圍內(nèi)都能很好地工作，而不需要增加大型庫的重量，網(wǎng)站速度也會大幅提升。

但是很不幸的是，如果前端編程沒有JavaScript的幫助，可訪問性方面的一些DOM操作，就會失去它本來需要的靈魂，只有一些靜態(tài)畫面，沒有動感效果，再或者前端就沒有能力在不刷新直接獲取服務(wù)端的內(nèi)容（ajax技術(shù)）。

我們將從低成本的方案開始，如果數(shù)據(jù)適合只有幾列和多行的表，合適集中梳理。你可能遇到的問題可能是在更寬的屏幕上占用太多空間，因此可能需要“限制”表格的最大寬度一段max-width，以便在更小屏幕或手機的屏幕上根據(jù)需要縮小。

如果你數(shù)據(jù)行數(shù)不是很多，則此類模式最有效，適合各種屏幕的設(shè)計需求。

表單設(shè)計行數(shù)過多就會溢出屏幕，所以我們只能允許用戶滾動查看更多數(shù)據(jù)。有人可能會說這不是一個完全響應(yīng)的解決方案，但從技術(shù)上講，容器正在響應(yīng)視口的寬度。

于是這種用于滾動陰影的技術(shù)它取決于在包含元素上使用多個漸變（線性和徑向）作為背景圖像，并使用background-attachment: local相對于其內(nèi)容來定位背景。

這種技術(shù)的優(yōu)點在于，對于不支持滾動陰影的瀏覽器，仍然可以按正常方式滾動表格。它根本不會破壞布局。

另一個滾動選項是將表頭從行配置翻轉(zhuǎn)到列配置，同時將水平滾動應(yīng)用到<tbody>元素的內(nèi)容上，此技術(shù)利用Flexbox行為將表的行轉(zhuǎn)換為列。

通過應(yīng)用display: flex表，它使<thead>和<tbody>下級標(biāo)簽代碼彎曲，這是默認(rèn)奠定了彼此相鄰的相同彎折線。

我們還將<tbody>元素設(shè)置為一個flex容器，從而使其中的所有<tr>元素也可以在一個彈性線中展開。最后，每個表格單元格必須將其顯示設(shè)置為block而不是默認(rèn)值table-cell。

這種技術(shù)的優(yōu)點是標(biāo)題始終在視圖中，就像固定的標(biāo)題效果一樣，因此用戶在滾動數(shù)據(jù)列時不會丟失上下文。需要注意的一點是，這種技術(shù)會導(dǎo)致視覺和源順序的差異，這會使事情略微不直觀。

如前所述，涉及通過修改display值來變形表的布局選項有時會對可訪問性產(chǎn)生負(fù)面影響，這需要一些小的DOM操作來糾正。

此外，還有一些用戶體驗的提示，包括像分頁功能，排序，過濾，等等（確實需要一些JavaScript啟用功能）。

如果正在使用相對簡單的數(shù)據(jù)集，也許你想為其中一些功能編寫自己的函數(shù)。

據(jù)我們所知，響應(yīng)式數(shù)據(jù)表技術(shù)早在2011就被流行運行在前端表單當(dāng)中，我們也稱為“ 響應(yīng)數(shù)據(jù)表 ”。

這種技術(shù)的要點是利用媒體查詢將表元素及其子元素的顯示屬性切換到block窄視口。

在窄屏幕上，表格標(biāo)題在視覺上隱藏，但仍存在于輔助功能樹中。通過將數(shù)據(jù)屬性應(yīng)用于表格單元格，我們可以通過CSS顯示數(shù)據(jù)的標(biāo)簽，同時保持HTML中標(biāo)簽的內(nèi)容。有關(guān)標(biāo)記和樣式的外觀。

原始方法在顯示標(biāo)簽文本的偽元素上應(yīng)用寬度，但這意味著需要知道標(biāo)簽開始時所需的空間量。上面的示例使用稍微不同的方法，其中標(biāo)簽和數(shù)據(jù)分別位于其包含塊的相對側(cè)。

我們可以通過flex格式化上下文中的自動邊距來實現(xiàn)這樣的效果。如果我們將每個<td>元素的display屬性設(shè)置為flex，因為偽元素生成框就好像它們是它們的原始元素的直接子元素一樣，它們變成了flex的子元素<td>。之后，設(shè)置margin-right: auto偽元素以將單元格的內(nèi)容推送到單元格的遠(yuǎn)端邊緣。執(zhí)行窄視口布局的另一種方法是使用Grid和display: contents。請注意，display: contents支持瀏覽器目前在可訪問性方面存在問題，并且在修復(fù)這些錯誤之前，不應(yīng)在使用此方法。

每個<tr>元素都設(shè)置為display: grid，并且每個<td>元素都設(shè)置為display: contents。只有網(wǎng)格容器的直接子節(jié)點才能參與網(wǎng)格格式化上下文; 在這種情況下，它是<td>元素。當(dāng)display: contents應(yīng)用于<td>它時，它被其內(nèi)容“替換”，在這種情況下，偽元素<span>內(nèi)部<td>變?yōu)榫W(wǎng)格子代。喜歡這種方法的方法是能夠用來max-content確定偽元素列的大小，確保列始終是最長標(biāo)簽的寬度，而不必為此手動分配寬度值。

以下示例顯示了一個基本的分頁實現(xiàn)：

從布局的角度來看，F(xiàn)lexbox非常便于將分頁元素定位到各種視口大小。不同的項目設(shè)計會有不同的要求，但Flexbox的多功能性應(yīng)該可以相應(yīng)地滿足這些差異。

在這種情況下，分頁以頁面為中心，位于表格上方。向后和向前導(dǎo)航的控件放在較寬屏幕上的頁面指示器的兩側(cè)，但所有四個都顯示在窄屏幕上的頁面指示器上方。

以下示例顯示基本排序?qū)崿F(xiàn)，以滿足文本和數(shù)字：

如何對某個列進(jìn)行排序以及按什么順序進(jìn)行排序?qū)苡杏茫课覀兛梢酝ㄟ^添加CSS類來實現(xiàn)這一點，然后可以根據(jù)需要設(shè)置樣式，在這種情況下，指示符符號是在單擊目標(biāo)標(biāo)題時切換的偽元素。

以下示例是一個基本過濾功能，它遍歷每個表格單元格的所有文本內(nèi)容，并應(yīng)用CSS類來隱藏與搜索輸入字段不匹配的所有行。

搜索功能使用上JavaScript技術(shù)，方便我們完成過濾功能。

以上是我們在設(shè)計網(wǎng)頁表單是常用到的設(shè)計方案，或許并不是適合每個方案的需求，但是我們一直在尋找在Web上創(chuàng)建更合適的表單。

?

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

HTML表單

HTML 表單用于搜集不同類型的用戶輸入。

<form> 元素

<form> 元素定義 HTML 表單：

語法：<form></form>

HTML 表單包含表單元素。

表單元素指的是不同類型的 input 元素、復(fù)選框、單選按鈕、提交按鈕等等。

<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。

1. 文本輸入

<input type="text"> 定義用于文本輸入的單行輸入字段

2、密碼框

<input type="password"> 定義單選按鈕。

密碼框是為了隱藏用戶密碼信息的輸入框，語法形式與文本框差不多，不同的是類型 為 password。

3、單選按鈕輸入

<input type="radio"> 定義單選按鈕。

單選按鈕是在表單中有多個選項，且只能選一個的情況下使用。

注：checked表示默認(rèn)選中項。

如：<input type="radio" name="sex"checked> 男

<input type="radio" name="sex"> 女

表示默認(rèn)選中男項。

4、復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框。

復(fù)選框是可以選多個選項的選項框，與單選不同的是復(fù)選框可以選取多個選項，而且也可以默認(rèn)幾個選項都處于選中狀態(tài)。

注：checked表示默認(rèn)選中項。

如：<input type="checkbox" checked>

5、<select> 元素（下拉列表）

下拉列表是可以選擇的列表，當(dāng)在列表中選擇要選的選項時使用，只能選其中一個選項（通過設(shè)置也可以選幾項）。

語法：

<select>

<option>北京</option>

<option selected>上海</option>

</select>

注：selected 表示默認(rèn)選中項

6、<textarea> 元素（文本域）

<textarea> 元素定義多行輸入字段：

文本域是用在要輸入多行文本，填寫大量的文字時用到。