2019.2.3學習：html表屬性+表的字段+表的

2019.2.3學習：html表屬性+表的字段+表的標題

高認知的一句話，增加對莆田系醫院的認識：莆田系醫院-你有病，病很重，我有藥，藥很貴

關鍵詞：

1修改表的邊框顯示，表寬度，高度，表位置

2如何給Excel做表頭

3如何給Excel做標題

內容：

web前端-html

0.修改表寬度，高度，位置

body

table

在這里修改

width=500寬度

height=300高度

align=center，居中顯示

table

/body

成果：

齊是一種常見的設計方式，它符合用戶的觀看習慣。作為B端設計，對齊有多少種方式？設計的時候有什么講究呢？本文作者對此進行了分析，與你分享。

關于對齊，大部分設計師可能會覺得非常簡單，不就是那幾種對齊方式嘛，難道還有很復雜的操作？深入研究才發現，B端對齊還真沒你想象的那么簡單。如果不信，請接著往下看。

01 對齊的含義

對齊，顧名思義就是將文字或圖片等信息以某種對齊規則進行排列。我們常用的對齊規則分為三類，即：左對齊、右對齊、居中對齊。

02 通用場景對齊方式

2.1 左對齊簡述

左對齊是最為常見的場景，因為它符合人們的閱讀動線——從左到右進行閱讀。在大部分的設計場景中都可以運用左對齊。比如我們常見的工作臺卡片、導航欄等都可以使用左對齊。

在使用左對齊時，不僅需要考慮物理對齊，在特定場景下需要考慮視覺對齊：比如在對于圖標和文字混排時，記得文字跟文字對齊，視覺效果會更加整齊（因為格式塔原理，人們對于類似的東西會將其看做同一類，而同一類對齊視覺上會舒適）。

2.2 右對齊簡述

右對齊可能在很多時候運用得比較少，在普通設計場景的右對齊用來填補設計中右側的視覺空缺，比如以下兩種應用場景：

1.內容或者輔助信心使用右對齊。

2.操作類的右對齊，比如移動端表單或者web端操作。

2.3 居中對齊簡述

居中對齊則一般是根據設計場景而選擇使用的，一般在兩種場景中：

1.特定狀態，比如空狀態中插畫與文字相結合，地圖標志等都是使用居中對齊的形式

2.特定組件，對于步驟條或者加載等特殊組件，一般也使用居中對齊

03 表格場景對齊方式

表單在B端設計中是非常常見的一種設計方式，表單中三種對齊方式都存在，目前有以下區分：

3.1 常規字段左對齊

在默認情況下基本都按照左對齊來進行排列，因為大部分表格字段都是非固定的，左對齊能夠讓整體有一個比較良好的展示效果。

3.2 固定短字段居中對齊

2.居中對齊一般針對固定長度類型的數據，比如我們常見的性別、狀態和樓層等。采用居中對齊能夠很好的和表頭進行對齊，視覺上更舒適。

3.3 金融數字右對齊

而右對齊則一般針對金融類，比如價格等數字，因為數字采用右對齊能夠更好地進行價格的比較。

在這里要注意，使用數字時最好使用等寬的數字，第一是為了避免因為數字不同的寬度而不太整齊，第二則是為了更好地進行金額等的對比。

比如DIN字體、微軟雅黑、思源黑體都屬于等寬字體，而我們常見的蘋方字體則為非等寬。

04 表單場景對齊方式

在錄入場景中，一般分為標題和內容兩個字段進行展示，因此這兩種字段可以組合成以下幾種對齊方式：標題左對齊、標題右對齊、整體左對齊、頂對齊。

那么這幾種到底有什么區別呢？我們接著往下看。

4.1 標題左對齊

這是一種目前在很多B端產品中比較常見的對齊方式。

優勢：視覺上看著非常整齊，縱向瀏覽標題也會更容易，美觀度相對會更高；
劣勢：左側區域會固定寬度，對于較短標題字段會與標題隔得較開，對于整體信息獲取效率降低。但因此也可以讓用戶在錄入時更加謹慎。

比如在神策或者coding等很多產品的配置場景中，基本采用左對齊的方式進行配置。

coding的：

4.2 標題右對齊

這種對齊方式犧牲了視覺對齊，換來了標簽和內容的間距一致，讓其親密性更強，從操作效率上來講會得到一定的提高。比如在釘釘的新版后臺中，基本采用了此種對齊方式。

優勢：標簽和內容距離更近，信息獲取和操作效率更高；
劣勢：犧牲了一定的視覺美觀度，并且如果出現過長的字段，左對齊的折行的體驗會非常不好；

我們在使用此類對齊方式時對于標題的字數有一個合理的限制。

4.3 整體左對齊

這種方式就是標題與內容進行貼合設計，整體左對齊。

優勢：標簽和內容距離更近，且整體會呈現左對齊，視覺效果也相對較好。
劣勢：內容區域縱向看不會對齊，對于內容區域的整體識別會相對較弱。

運用此方式的場景大部分在多列字段的設計場景中，因為相較于前兩種方式來講，多列字段（2列及以上）同步呈現時，該類方式會讓整體表單顯得更緊湊與合理。

但從目前市場上的競品來看，運用此類排列方式的場景比較少，僅有少部分在展示字段時運用了此種方式。

猜測有2點原因：

大部分情況下表單類都采用單列排列，因此使用場景較少。
該種排列方式不太適用于編輯狀態，會造成呈現狀態與編輯狀態切換上呈現上有差異。

所以某些配置場景為了讓編輯也保持一致性，會放棄上述的對齊方式改為標題右對齊,比如acro design的設計案例：

雖然目前應用得不多，但我們在平日的運用中，也需要留意此種應用場景。

4.4 頂對齊

這種相對于是另外一種方式，這種方式降低了對頁面寬度的要求，提供了更多的橫向空間。從用并且目前很多產品已經在各個功能模塊運用頂對齊來記性錄入：

優勢：不僅提升了用戶獲取信息的效率，據研究發現只要50ms。同時標題的拓展性更強了，能夠容納更長的標題
劣勢：從布局上來看是犧牲了一定的縱向利用空間的，對于在設計場景中縱向空間較少的需要考慮使用。

目前國外產品和國內錄入場景頂對齊用的也比較多。

4.5 如何選擇

那么我們在進行表單設計時如何選擇呢，這就需要根據我們的實際情況了。

從信息獲取效率來講，頂對齊最快（50ms)，標題右對齊其次(240ms)，左對齊最慢（500ms）；
從視覺和閱讀觀感上來講，標題左對齊和整體左對齊的視覺表達會更好；

因此我們需要考慮當前頁面的使用場景：

1.更偏向于錄入場景的話，且橫向空間充足，選擇標題右對齊，否則頂對齊。

2.更偏向于閱讀或瀏覽的話，選擇標題左對齊或整體左對齊。而這兩者的細致場景區分，需要考慮當前場景標題字段的差異性：

A.如果標題字段都比較接近，選擇標題左對齊；

B.如果標題字段相差比較大，尤其是字段需要配置的場景，那么可以選擇整體左對齊。比如我舉一個例子你就明白了：

當標題差異過大的時候，標題左對齊會讓某些標題與內容間隔特別長，閱讀體驗就會降低很多。

通過這樣的場景和使用分析，我們就能夠更加清晰地使用各類對齊方式，來讓我們整體的使用體驗更好。那么看到這里，你有掌握關于B端對齊的全部細節嗎？

本文由 @蒙東東原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議

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

TML5 為前端開發者帶來了許多表單增強功能，這些功能使得創建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實際項目中應用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數據輸入，比如電子郵件、日期等。

例子：電子郵件和網址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體 */
            padding: 20px; /* 頁面內邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 5px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框寬度 */
            padding: 8px; /* 內邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個人網站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網址。如果用戶輸入的不符合格式，瀏覽器會在提交表單前顯示一個警告。

2. 占位符屬性

placeholder 屬性允許我們在輸入字段中設置一個提示文本，當輸入字段為空時顯示，一旦開始輸入，提示文本就會消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體 */
            padding: 20px; /* 頁面內邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 10px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框寬度，減去內邊距和邊框的寬度 */
            padding: 10px; /* 內邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請輸入搜索關鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請輸入搜索關鍵字" 就是一個占位符，它會在用戶輸入之前顯示在搜索框中。

3. 自動聚焦屬性

autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。

例子：自動聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，當頁面加載完成后，姓名輸入框將自動獲得焦點。

4. 表單驗證

HTML5 為表單驗證提供了內置支持，通過簡單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進行基本的驗證。

例子：表單驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內邊距在內的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請輸入5位數字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，年齡字段要求用戶輸入一個介于 18 到 99 之間的數字，而郵編字段要求用戶輸入一個符合特定模式（5位數字）的文本。

結語

HTML5 的表單增強功能大大簡化了表單處理和驗證的工作，使得開發更加高效，同時也提高了用戶體驗。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創建功能強大且易于使用的表單。隨著技術的不斷進步，我們作為開發者應該不斷學習和實踐，以便更好地利用這些新工具來構建更好的網頁。

在線咨詢

上一篇：10年總結：JavaScript性能優化的小知識總結
下一篇：如何使用Nginx配置端口轉發

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商