Qt編寫自定義控件-光暈日歷

、前言

操作系統的更新迭代速度非?？欤旧先迥昃陀袀€新版本出來，WIN10操作系統還是一個比較成功的系統，據說現在市場份額越來越大，XP的份額已經很小，WIN7的份額也在逐步減少，在最新的WIN10系統中，右下角有個日歷控件，還是自帶農歷的，這個本地化做的蠻好的，鼠標移上去還有光暈背景效果，體驗非常賞心悅目，于是打算用Qt也高仿一個。
本控件的技術難點有兩個，一個是根據當前月份自動排列星期和日期，這個需要自動計算的，難點二是繪制光暈背景，需要用到painter中的圖像疊加模式setCompositionMode，設置好圖像疊加模式以后，可以將多個繪制重疊，按照設定的規則組合，比如將光暈背景繪制在背后。

二、實現的功能

1:可設置背景顏色
2:可設置光暈顏色
3:可設置文字顏色
4:可設置選中日期背景
5:光暈跟隨鼠標移動

三、效果圖

四、頭文件代碼

#ifndef SHADOWCALENDAR_H
#define SHADOWCALENDAR_H

/**
 * 光暈日歷控件 作者:雨田哥(QQ:3246214072) 整理:feiyangqingyun(QQ:517216493) 2019-10-07
 * 1:可設置背景顏色
 * 2:可設置光暈顏色
 * 3:可設置文字顏色
 * 4:可設置選中日期背景
 * 5:光暈跟隨鼠標移動
 */

#include <QWidget>
#include <QDate>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ShadowCalendar : public QWidget
#else
class ShadowCalendar : public QWidget
#endif

{
    Q_OBJECT
    Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
    Q_PROPERTY(QColor shadowColor READ getShadowColor WRITE setShadowColor)
    Q_PROPERTY(QColor selectColor READ getSelectColor WRITE setSelectColor)

public:
    struct DateItem {
        int year;
        int month;
        int day;

        DateItem()
        {
            year = -1;
            month = -1;
            day = -1;
        }
    };

    explicit ShadowCalendar(QWidget *parent = 0);
    ~ShadowCalendar();

public:
    void updateCalendar(const QDate &selectDate);

protected:
    void leaveEvent(QEvent *);
    void mouseMoveEvent(QMouseEvent *);
    void paintEvent(QPaintEvent *);

private:
    QColor bgColor;             //背景顏色
    QColor textColor;           //文字顏色
    QColor shadowColor;         //光暈顏色
    QColor selectColor;         //選中顏色

    QDate selectDate;           //今天日期
    DateItem dateItem[6][7];    //日期數組

public:
    QColor getBgColor()         const;
    QColor getTextColor()       const;
    QColor getShadowColor()     const;
    QColor getSelectColor()     const;

    QSize sizeHint()            const;
    QSize minimumSizeHint()     const;

public Q_SLOTS:
    //設置背景顏色+文字顏色+光暈顏色+選中顏色
    void setBgColor(const QColor &bgColor);
    void setTextColor(const QColor &textColor);
    void setShadowColor(const QColor &shadowColor);
    void setSelectColor(const QColor &selectColor);
};

#endif // SHADOWCALENDAR_H

【領QT開發教程學習資料，點擊下方鏈接莬費領取↓↓，先碼住不迷路~】

點擊這里：Qt資料領取（視頻教程+文檔+代碼+項目實戰）

五、核心代碼

void ShadowCalendar::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);

    int sw = 336;
    int sh = 336;
    qreal scaleX = this->width() * 1.0 / sw;
    qreal scaleY = this->height() * 1.0 / sh;

    painter.scale(scaleX, scaleY);
    painter.setPen(Qt::NoPen);
    painter.fillRect(0, 0, sw, sh, bgColor);

    qreal iw = sw / 7.0;
    qreal ih = sh / 7.0;

    //mask
    QPointF globalpoint = this->mapFromGlobal(QCursor::pos());
    const QPointF &point = QPointF(globalpoint.x() / scaleX, globalpoint.y() / scaleY);

    //繪制光暈背景
    if (this->underMouse()) {
        int effectradius = 58;
        painter.setCompositionMode(QPainter::CompositionMode_DestinationIn);
        QRadialGradient radialGrad(point, effectradius);
        radialGrad.setColorAt(0, QColor(0, 0, 0, 120));
        radialGrad.setColorAt(1, QColor(0, 0, 0, 255));
        painter.setBrush(radialGrad);
        painter.drawEllipse(point, effectradius, effectradius);

        painter.setCompositionMode(QPainter::CompositionMode_DestinationOver);
        painter.setBrush(Qt::NoBrush);

        for (int row = 0; row < 6; row++) {
            for (int column = 0; column < 7; column++) {
                QRectF rect = QRectF(column * iw, (row + 1) * ih, iw, ih).adjusted(3, 3, -3, -3);
                if (rect.contains(point)) {
                    painter.save();
                    painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
                    painter.setPen(QPen(QColor(220, 220, 220, 160), 2));
                    painter.drawRoundedRect(rect, 2, 2);
                    painter.restore();
                    continue;
                } else {
                    painter.setPen(QPen(shadowColor, 2));
                }

                painter.drawRoundedRect(rect, 2, 2);
            }
        }

        //繪制圓形的光暈底層背景
        painter.fillRect(0, 0, sw, sh, QColor(200, 200, 200, 50));
    }

    //繪制頭部中文數字,先設置圖像疊加模式為源在上面
    painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
    painter.setPen(textColor);
    QStringList listHead;
    listHead << "一" << "二" << "三" << "四" << "五" << "六" << "日";
    for (int i = 0; i < 7; i++) {
        painter.drawText(i * iw, 0, iw, ih, Qt::AlignCenter, listHead.at(i));
    }

    //繪制日期
    for (int row = 0; row < 6; row++) {
        for (int column = 0; column < 7; column++) {
            if (dateItem[row][column].day > 0) {
                QRectF rect = QRectF(column * iw, (row + 1) * ih, iw, ih).adjusted(3, 3, -3, -3);

                //如果是選中的日期則突出繪制背景
                if (QDate::currentDate() == QDate(dateItem[row][column].year, dateItem[row][column].month, dateItem[row][column].day)) {
                    painter.setPen(QPen(selectColor, 2));
                    painter.setBrush(Qt::NoBrush);

                    //如果和光暈效果重疊則邊框高亮
                    if (rect.contains(point)) {
                        painter.setPen(QPen(selectColor.lighter(), 2));
                    }

                    //繪制圓角邊框
                    painter.drawRoundedRect(rect, 2, 2);

                    //繪制里邊背景
                    painter.setPen(Qt::NoPen);
                    painter.setBrush(selectColor);
                    painter.drawRoundedRect(rect.adjusted(4, 4, -4, -4), 2, 2);
                }

                painter.setPen(textColor);
                painter.drawText(rect, Qt::AlignCenter, QString::number(dateItem[row][column].day));
            }
        }
    }
}

六、控件介紹

超過160個精美控件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農歷等。遠超qwt集成的控件數量。
每個類都可以獨立成一個單獨的控件，零耦合，每個控件一個頭文件和一個實現文件，不依賴其他文件，方便單個控件以源碼形式集成到項目中，較少代碼量。qwt的控件類環環相扣，高度耦合，想要使用其中一個控件，必須包含所有的代碼。
全部純Qt編寫，QWidget+QPainter繪制，支持Qt4.6到Qt5.13的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意操作系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控件一樣使用，大部分效果只要設置幾個屬性即可，極為方便。
每個控件都有一個對應的單獨的包含該控件源碼的DEMO，方便參考使用。同時還提供一個所有控件使用的集成的DEMO。
每個控件的源代碼都有詳細中文注釋，都按照統一設計規范編寫，方便學習自定義控件的編寫。
每個控件默認配色和demo對應的配色都非常精美。
超過130個可見控件，6個不可見控件。
部分控件提供多種樣式風格選擇，多種指示器樣式選擇。
所有控件自適應窗體拉伸變化。
集成自定義控件屬性設計器，支持拖曳設計，所見即所得，支持導入導出xml格式。
自帶activex控件demo，所有控件可以直接運行在ie瀏覽器中。
集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。
所有控件最后生成一個動態庫文件(dll或者so等)，可以直接集成到qtcreator中拖曳設計使用。
目前已經有qml版本，后期會考慮出pyqt版本，如果用戶需求量很大的話。
自定義控件插件開放動態庫使用（永久免費），無任何后門和限制，請放心使用。
目前已提供32個版本的dll，其中qt_5_7_0_mingw530_32這個版本會一直保證最新的完整的。
不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
Qt入門書籍推薦霍亞飛的《Qt Creator快速入門》《Qt5編程入門》，Qt進階書籍推薦官方的《C++ GUI Qt4編程》。
強烈推薦程序員自我修養和規劃系列書《大話程序員》《程序員的成長課》《解憂程序員》，受益匪淺，受益終生！
SDK地址：https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

原文鏈接：https://www.cnblogs.com/feiyangqingyun/p/11646186.html

【領QT開發教程學習資料，點擊下方鏈接莬費領取↓↓，先碼住不迷路~】

點擊這里：「鏈接」

輯導讀：前段時間， iOS14 升級了。蘋果的每一次升級都會引起人們的廣泛關注，畢竟它代表著行業標桿。本文作者在使用的過程中，對iOS14 中「時間控件」的設計產生了疑問，并從三個方面展開分析，提出自己的一點思考，與你分享。

前幾天升級 iOS14 后在「日歷APP」中遇到個「時間控件」使用體驗問題，在朋友圈「吐了個槽」后收到很多類似反饋，后來在使用「提醒事項APP」中發現有個類似「時間控件」，體驗下來感覺挺順溜，于是想做個對比分析看看區別。

防杠說明1：接下來聊的體驗純我的「主觀感受」，對比分析也是基于過往的經驗來聊，沒有數據也沒有其他支撐，交流為主，無他意求放過。

防杠說明2：蘋果在「日歷APP」和「提醒事項APP」這 2 個 APP 設計一定有考慮過，文章純粹從外部視角去聊體驗感受，不聊 APP 的場景&戰略&定位。

一、iOS14 的「時間控件」長什么樣

iOS14 「日歷APP」新建日程&點擊展開「時間控件」后的狀態

先介紹下「時間控件」長什么樣，上圖左邊是「日歷APP」中「新建日程」界面，點擊「開始-時間」后就展開了「時間控件」，控件中分別有這5個功能：時鐘控件（鍵盤+觸摸）、年月控件、快捷切換月份控件、日歷控件、時區功能，「提醒事項APP」的「時間控件」界面基本差不多，具體差異會在在對比中展示。

二、開始做3個角度對比

對比1：日歷間距處理

整體來看「時間控件」中的「日歷」是問題最大影響體驗最大的地方，「日歷」中的日期和日期之間的距離是大過日期和左右屏幕的距離，這會導致日歷看起來比較散不是一個整體，見下圖中黃色標記和藍色標記。

這類型的問題屬于「格式塔理論」中的「Law of Proximity接近法則」，間距沒有起到把相關元素粘起來的作用，相反把元素拆散，有種信息量很多密密麻麻的感受。

「日歷APP」中日期之間間距和屏幕間距對比

具體「Law of Proximity 接近法則」的意思是：相互接近的事物被認為比相隔較遠的事物更加相關。

格式塔理論中的接近法則示意圖

這里密密麻麻的感受還有另一個理論基礎「米勒定律」，因為人同時處理信息大約是「7±2」條信息，當信息量超出這個數量后出現，本能上一定是先排斥的，大家回想下如果你要填寫一個復雜表單時候的場景，就是這樣的感覺。

米勒定律的示意圖

我們對比下「提醒事項APP」中的日歷選擇，間距處理保證了日期距離是比外面小的，日歷看起來就是一個整體可操作的控件狀態，如果拿「格式塔理論」和「米勒定律」來看的話都是在合理范圍內，事實感受也是這樣

「日歷APP」和「提醒事項APP」日歷進行對比

對比2：上下層級關系處理

「時間控件」是通過點擊展開的，如果這個簡單控件，僅展開動效足以讓用戶理解，只是這「時間控件」中包含5個功能占了 1/2 的屏幕，動效解決不了，加上「對比1」的日歷間距問題，信息量巨大且復雜。控件里面除了標題做了「文字加粗」處理去表現層級，在「上下銜接 or 左右遞進 or 背景顏色」都沒做很多工作。

和上一級樣式是在太接近，沒有能明顯區分開，和上一層級融合到一起后，界面看起來從一行行就變成點擊后一下子增加「爆發式」的信息出現，觀感復雜+信息量變大。如果處理合適「理想中的層級關系」應該是圖片右邊這樣的，用戶一眼看到的是一塊塊而不是一個個。

日歷APP 時間控件展開后感覺是「碎裂」，理想應該右側這樣塊狀的層級結構展開。

再來對比「提醒事項APP」中的層級關系，整個「時間控件」左右都有縮進，左上和上一級的銜接處分割線也做了處理，加上上一級日期標題前有個「日歷ICON」，很自然在視覺上就出現了上下層級關系出現，內容一樣看起來清晰簡潔很多。

「提醒事項APP」中用縮進和風格線去表現層級關系

對比3：頁面布局上的對比

再把視角放到頁面布局中，「日歷APP」采用的是邊到邊布局（Edge to Edge）方式，「提醒事項APP」采用的是卡片式布局（Card）方式。

在 iOS 系統中「邊到邊布局」是從 iOS7 后蘋果開始采用的方式，優勢是把極大增加了屏幕空間利用率，可顯示內容增加，當時主打機型是 4 英寸屏的iPhone5s，，屏幕空間有限。

iOS6 和 iOS7 設置界面的對比

從圖片中里面是不是感覺 iOS6 也有點卡片式布局的意思，其實大家當時對 iOS6 印象還是「擬物化」，這里也就不展開了。

「卡片式布局」是被 Google 推崇起來的，當時有款產品叫「Google Now」（現在已經下線），這個產品可以語音互動&主動提醒（飛機、路況、比賽比分、突發新聞等等）信息內容給到你，包含的信息內容多樣且復雜，用了卡片設計去解決了信息多而不亂的問題，信息和信息之間互不受到影響。

GoogleNow 主界面，卡片設計為主

「Google Now」產品已經下線，找了個介紹視頻（https://v.qq.com/x/page/f03052ojg4u.html），大家可以注意里面不同場景下的卡片的布局都是不同的，也方便未來的擴展。

回到這兩個頁面布局對比中，不過不展開「時間控件」這樣對比來看兩邊布局并沒有很大的問題，具體看是要更多「包容」還是要「屏效」。

不過這里我們對比的是「時間控件」，這部分看來「卡片式布局」是更合適的，布局能包容不同復雜的信息，塊和塊&功能和功能之間是更加清楚，不會引起混亂。

現在很多產品也都在考慮「卡片式布局」，像「手機淘寶」這兩年基本上已經完全改造成「卡片式布局」，我理解是因為手淘信息流復雜&個性，照片和元素的出現都不是固定的，用卡片作為「容器」去包容「內容」，讓界面有秩序。

但這里還是要提一嘴信息流不要「無腦」追「卡片式布局」是最好，比如媒體為場景的APP，顯然「邊到邊布局」顯然更合適，比如 Instagram ，要給照片以更多的展示空間，也比如電商中對商品品質有信心的，那也適合「邊到邊布局」，比如 SNKRS，對球鞋品質表現的更加到位。

先理解再去設計「適合自家產品」的風格是個挺重要的事，畢竟一個產品風格會用很久，改動成本很高。

三、最后總結一下

真的是抱著「心驚膽戰」的心情去做的對比，蘋果設計一直都是行業標桿，這次是想趁聊對比時「拋磚引玉」聊聊「界面細節是如何決定設計品質」，這些東西非常小，合作上下游也不一定在意，覺得差不多就好?，F在產品迭代速度飛快，留給設計師的時間也不多，怎么樣能夠快速有效地把細節處理好，是一個值得長期討論的話題。

最后抽取一些文章中的「關鍵詞」做個總結：

間距控制：有些設計師出稿或工程師開發&驗收時會忽略「間距」的價值，其實「間距」對設計品質影響非常大，背后設計理論支撐是「格式塔理論」，如果對「間距」不敏感，那要多練習練習去找好的產品設計去觀察和感受。
米勒定律：很多人看界面覺得亂，為什么感覺亂背后可以通過「米勒定律」做設計理論支撐，人在同一時間處理信息程度是「7±2」個，數量越多越亂。
層級關系：表單或復雜頁面中的界面需要把層級關系表現到位，不然界面會亂七八糟，在 iOS11 時候蘋果已經注意到這一點并且已經提倡過，閱讀了解「iOS11 設計理念和 3 個設計方向」。
邊到邊布局：一種屏幕效率利用高的界面布局，在iOS7 開始后被使用
卡片式布局：一種能夠把復雜信息有序融合在一起的布局，更多包容和擴展

好了，今天和大家就嘮叨到這。

作者：icojump，微信公眾號：邊設計邊管理

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

題圖來自Unsplash，基于CC0協議

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數據

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區別，不能包含特殊字符，也不可使用html 標簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時自動對電子郵件地址進行驗證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。

如下實例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內容，是一種特殊按鈕。

如剛才的登錄表單，提交后會返回結果：

重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。

輸入數據

點擊重置按鈕后，表單數據清空

重置清空數據

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網頁中使用窗口框架

在線咨詢

上一篇：第13天 - 16天搞定前端，CSS的動畫效果，酷
下一篇：免費的報表工具—JimuReport 積木報表 v1.6.4 穩定版本發布

您的項目需求

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

整合營銷服務商

Qt編寫自定義控件-光暈日歷

、前言

二、實現的功能

三、效果圖

四、頭文件代碼

五、核心代碼

六、控件介紹

一、iOS14 的「時間控件」長什么樣

二、開始做3個角度對比

對比1：日歷間距處理

對比2：上下層級關系處理

對比3：頁面布局上的對比

三、最后總結一下

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

您的項目需求

、前言

二、實現的功能

五、核心代碼

六、控件介紹

一、iOS14 的「時間控件」長什么樣

二、開始做3個角度對比