Bootstrap響應(yīng)式Web開發(fā)（第2版）第6章 Bootstrap表單

第6章Bootstrap表單《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

掌握表單控件樣式的使用方法，能夠靈活設(shè)置文本框、下拉列表、單選按鈕、復(fù)選框和輸入組的樣式掌握表單布局方式的使用方法，能夠?qū)崿F(xiàn)行內(nèi)表單布局、水平表單布局

和響應(yīng)式表單布局效果

掌握表單驗(yàn)證的使用方法，能夠?qū)Ρ韱沃械臄?shù)據(jù)進(jìn)行驗(yàn)證章節(jié)概述/Summary在Web開發(fā)中，表單是網(wǎng)頁常見的組成部分，可以實(shí)現(xiàn)用戶注冊(cè)、登錄、留言等功能。Bootstrap提供了一系列的類來應(yīng)用表單控件的樣式、布局和驗(yàn)證。本章將詳細(xì)講解如何使用Bootstrap來創(chuàng)建和定制表單，以及如何應(yīng)用表單控件樣式、布局和驗(yàn)證來滿足實(shí)際需求。目錄/Contents6.16.26.3表單控件樣式表單布局方式表單驗(yàn)證表單控件樣式6.1

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置文本框的樣式6.1.1文本框6.1.1文本框文本框通常指<input>標(biāo)簽和<textarea>標(biāo)簽。<input>標(biāo)簽用于創(chuàng)建單行文本框，用戶可以在其中輸入單行文本內(nèi)容，其type屬性值可以是text、password、number、email、tel和file等；<textarea>標(biāo)簽用于創(chuàng)建多行文本框，用戶可以在其中輸入多行文本內(nèi)容。6.1.1文本框Bootstrap提供了應(yīng)用于文本框的相關(guān)類，具體解釋如下：.form-control類：用于創(chuàng)建基本文本框樣式，設(shè)置默認(rèn)的邊框、填充和字體樣式。.form-control-lg類：用于創(chuàng)建較大尺寸的文本框，增加文本框的高度和字號(hào)。.form-control-sm類：用于創(chuàng)建較小尺寸的文本框，減小文本框的高度和字號(hào)。.form-text類：用于文本框下方的輔助文本，如提供額外的說明或提示。.form-label類：用于<label>標(biāo)簽，可以與相關(guān)的文本框關(guān)聯(lián)，以改善可訪問性和用戶體驗(yàn)。.form-control-plaintext類：用于創(chuàng)建只讀文本框，適用于顯示只讀或不可編輯的文本且沒有邊框樣式。下面通過案例的形式講解如何使用文本框控件結(jié)合相關(guān)類實(shí)現(xiàn)項(xiàng)目進(jìn)度表單。6.1.1文本框創(chuàng)建D:\Bootstrap\chapter06目錄，并使用VSCode編輯器打開該目錄。放入bootstrap-5.3.0-dist文件夾。創(chuàng)建textInput.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫頁面結(jié)構(gòu)。步驟1步驟2步驟3步驟4使用文本框控件結(jié)合相關(guān)類實(shí)現(xiàn)一個(gè)項(xiàng)目進(jìn)度表單6.1.1文本框編寫頁面邏輯，使用JavaScript獲取滑動(dòng)條文本框的數(shù)值，在頁面加載時(shí)顯示初始值，拖動(dòng)滑動(dòng)條時(shí)實(shí)時(shí)顯示數(shù)值。步驟5在瀏覽器中打開textInput.html文件，項(xiàng)目進(jìn)度表單效果如下圖所示。6.1.1文本框圖中可以看出，單行文本框和多行文本框都添加了一個(gè)帶有圓角的淺色邊框，且文本框的文字顏色較淺。

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置下拉列表的樣式6.1.2下拉列表下拉列表可以使用<select>和<option>標(biāo)簽創(chuàng)建。<select>標(biāo)簽定義了下拉列表的整體結(jié)構(gòu)，而<option>標(biāo)簽定義了下拉列表中的選項(xiàng)。用戶可以從預(yù)定義的選項(xiàng)中選擇一個(gè)或多個(gè)值。6.1.2下拉列表Bootstrap提供了應(yīng)用于下拉列表的相關(guān)類，具體解釋如下：.form-select類：用于為下拉列表設(shè)置基本樣式，將下拉列表呈現(xiàn)為可單擊的選擇框。.form-select-lg類：用于創(chuàng)建較大尺寸的下拉列表，增加選擇框的高度和字號(hào)。.form-select-sm類：用于創(chuàng)建較小尺寸的下拉列表，減小選擇框的高度和字號(hào)。默認(rèn)尺寸較大尺寸較小尺寸6.1.2下拉列表下面通過案例的形式講解如何使用下拉列表控件結(jié)合相關(guān)類實(shí)現(xiàn)一個(gè)選擇支付方式的下拉列表。6.1.2下拉列表使用下拉列表結(jié)合相關(guān)類實(shí)現(xiàn)選擇支付方式的下拉列表創(chuàng)建radioSelect.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫頁面結(jié)構(gòu)。步驟1步驟26.1.2下拉列表在瀏覽器中打開radioSelect.html文件，選擇支付方式的下拉列表效果如下圖所示。默認(rèn)選中的選項(xiàng)是“微信支付”。6.1.2下拉列表單擊下拉列表，即可顯示展開后的列表選項(xiàng)，列表選項(xiàng)效果如下圖所示。6.1.2下拉列表

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置單選按鈕和復(fù)選框的樣式6.1.3單選按鈕和復(fù)選框單選按鈕和復(fù)選框提供預(yù)定義的選項(xiàng)供用戶選擇，用戶只能從給定的選項(xiàng)中進(jìn)行選擇，不能自由輸入文本。單選按鈕通常以圓形按鈕的形式呈現(xiàn)，適用于只允許選擇一個(gè)選項(xiàng)的情況。復(fù)選框通常以方形框的形式呈現(xiàn)，適用于允許選擇多個(gè)選項(xiàng)的情況。6.1.3單選按鈕和復(fù)選框Bootstrap提供了應(yīng)用于單選按鈕和復(fù)選框的相關(guān)類，具體解釋如下。.form-check類：用于為一組單選按鈕或復(fù)選框設(shè)置樣式。可將這個(gè)類應(yīng)用于包裹單選按鈕或復(fù)選框的容器元素（例如<div>），為整個(gè)組設(shè)置樣式，使其呈現(xiàn)為可單擊的選項(xiàng)。.form-check-inline類：與form-check類的功能相同，將一組單選按鈕或復(fù)選框元素水平排列，使它們?cè)谕恍酗@示。.form-check-input類：用于單選按鈕或復(fù)選框的<input>標(biāo)簽上，定義單選按鈕或復(fù)選框的樣式。.form-check-label類：用于與單選按鈕或復(fù)選框關(guān)聯(lián)的<label>標(biāo)簽上，確保標(biāo)簽與單選按鈕或復(fù)選框一起呈現(xiàn)，保持一致的樣式。6.1.3單選按鈕和復(fù)選框下面通過案例的形式講解如何使用單選按鈕和復(fù)選框結(jié)合相關(guān)類實(shí)現(xiàn)問卷調(diào)查表單。6.1.3單選按鈕和復(fù)選框使用單選按鈕和復(fù)選框結(jié)合相關(guān)類實(shí)現(xiàn)一個(gè)問卷調(diào)查表單創(chuàng)建radioInput.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫頁面結(jié)構(gòu)。步驟1步驟26.1.3單選按鈕和復(fù)選框在瀏覽器中打開radioInput.html文件，問卷調(diào)查表單效果如下圖所示。圖中可以看出，性別的選項(xiàng)使用了單選按鈕，愛好的選項(xiàng)使用了復(fù)選框，且性別和愛好的選項(xiàng)都呈水平排列，并添加了合適的樣式。6.1.3單選按鈕和復(fù)選框

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置輸入組的樣式6.1.4輸入組輸入組用于對(duì)文本框進(jìn)行擴(kuò)展，通常由一個(gè)文本框和一個(gè)或多個(gè)附加元素組成，附加元素可以是文本、圖標(biāo)、按鈕、下拉菜單和復(fù)選框等，它們都是表單控件的一部分，用于增強(qiáng)用戶輸入的交互性和功能性。6.1.4輸入組Bootstrap提供了應(yīng)用于輸入組的相關(guān)類，具體解釋如下：.input-group類：應(yīng)用于包含輸入組元素的父容器，創(chuàng)建一個(gè)輸入組，可以將多個(gè)表單控件組合在一起，形成一個(gè)整體，為輸入組提供基本的樣式。.input-group-lg類：用于創(chuàng)建較大尺寸的輸入組，增加輸入組容器的大小和字號(hào)。.input-group-sm類：用于創(chuàng)建較小尺寸輸入組，減小輸入組容器的大小和字號(hào)。.input-group-text類：用于輸入組內(nèi)的附加文本或附加元素上，為附加文本或附加元素提供樣式，并確保它們與文本框?qū)R，與輸入組的整體樣式保持一致。6.1.4輸入組下面演示如何創(chuàng)建一個(gè)輸入組，示例代碼如下。6.1.4輸入組<divclass="input-group"><inputtype="text"class="form-control"placeholder="商品價(jià)格"><spanclass="input-group-text">￥</span></div>下面通過案例的形式講解如何使用輸入組結(jié)合相關(guān)類實(shí)現(xiàn)商品搜索表單，表單包括商品名稱、搜索按鈕和商品價(jià)格范圍。6.1.4輸入組6.1.4輸入組使用輸入組結(jié)合相關(guān)類實(shí)現(xiàn)一個(gè)商品搜索表單復(fù)制本章配套源代碼中的bootstrap-icons-1.10.5文件夾并放入chapter06目錄下，該文件夾保存了圖標(biāo)相關(guān)文件。創(chuàng)建groupInput.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap-icons.min.css文件。步驟1步驟2步驟3編寫頁面結(jié)構(gòu)，創(chuàng)建一個(gè)包含商品名稱輸入組和商品價(jià)格輸入組的表單。在瀏覽器中打開groupInput.html文件，商品搜索表單效果如下圖所示。6.1.4輸入組圖中可以看出，第一個(gè)輸入組包含1個(gè)單行文本框和1個(gè)搜索按鈕；第二個(gè)輸入組包含2個(gè)單行文本框和3個(gè)附加文本，且附加文本都添加了一個(gè)特定的背景色。表單布局方式6.2

先定一個(gè)小目標(biāo)！掌握表單布局的使用方法，能夠?qū)崿F(xiàn)行內(nèi)表單布局效果6.2.1行內(nèi)表單布局行內(nèi)表單布局是一種將表單控件在同一行內(nèi)水平排列的布局方式，適用于表單內(nèi)容較少、緊湊的情況。在Bootstrap中，可以使用柵格系統(tǒng)的.row類和.col-auto類實(shí)現(xiàn)行內(nèi)表單布局。6.2.1行內(nèi)表單布局首先，使用<div>標(biāo)簽創(chuàng)建一個(gè)行容器，并添加.row類；然后，在行容器內(nèi)添加一個(gè)<div>標(biāo)簽用于包裹表單控件，并添加.col-auto類。這樣可以使表單控件在同一行內(nèi)水平排列，并根據(jù)內(nèi)容自動(dòng)調(diào)整寬度，示例代碼如下。<formaction=""><divclass="row"><divclass="col-auto"><!--表單控件1--></div><divclass="col-auto"><!--表單控件2--></div></div></form>6.2.1行內(nèi)表單布局6.2.1行內(nèi)表單布局下面通過案例的形式講解如何使用行內(nèi)表單布局實(shí)現(xiàn)員工篩選表單，該表單的內(nèi)容包括員工姓名、部門、崗位和入職日期范圍。創(chuàng)建inlineForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫頁面結(jié)構(gòu)。步驟1步驟2使用行內(nèi)表單布局實(shí)現(xiàn)一個(gè)員工篩選表單6.2.1行內(nèi)表單布局在瀏覽器中打開inlineForm.html文件，員工篩選表單效果如下圖所示。6.2.1行內(nèi)表單布局6.2.2水平表單布局

先定一個(gè)小目標(biāo)！掌握表單表單布局的使用方法，能夠?qū)崿F(xiàn)水平表單布局效果水平表單布局將表單控件（如<label>標(biāo)簽）和輸入控件（如<input>標(biāo)簽、<select>標(biāo)簽、<textarea>標(biāo)簽等）放置在同一行內(nèi)，每個(gè)表單組單獨(dú)占一行，這樣就可避免一行顯示太多的內(nèi)容。6.2.2水平表單布局通過柵格系統(tǒng)的.row類和.col-{sm|md|lg|xl|xxl}-{value}類可以創(chuàng)建水平表單布局。6.2.2水平表單布局為<label>標(biāo)簽添加.col-form-label類，可以使表單標(biāo)簽與其關(guān)聯(lián)的表單控件在同一行內(nèi)水平排列，并且垂直對(duì)齊。如果需要調(diào)整標(biāo)簽的尺寸，可以使用.col-form-label-sm類設(shè)置小尺寸樣式，使用.col-form-label-lg類設(shè)置大尺寸樣式。<form><divclass="row"><labelclass="col-form-labelcol-sm-3">Label1</label><divclass="col-sm-9"><inputtype="text"class="form-control"></div></div><divclass="row"><labelclass="col-form-labelcol-sm-3">Label2</label><divclass="col-sm-9"><inputtype="text"class="form-control"></div></div></form>6.2.2水平表單布局下面演示如何創(chuàng)建一個(gè)在小型及以上設(shè)備（視口寬度≥576px）中呈水平布局的表單。下面通過案例的形式講解如何實(shí)現(xiàn)一個(gè)登錄表單，該表單在小型及以上設(shè)備（視口寬度≥576px）中呈水平布局。6.2.2水平表單布局創(chuàng)建horizontalForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫頁面結(jié)構(gòu)。步驟1步驟2登錄表單在小型及以上設(shè)備中呈水平布局6.2.2水平表單布局在瀏覽器中打開horizontalForm.html文件，登錄表單效果如下圖所示。6.2.2水平表單布局6.2.3響應(yīng)式表單布局

先定一個(gè)小目標(biāo)！掌握表單布局的使用方法，能夠?qū)崿F(xiàn)響應(yīng)式表單布局效果6.2.3響應(yīng)式表單布局在Bootstrap中可以將柵格系統(tǒng)和其他相關(guān)類結(jié)合使用，以實(shí)現(xiàn)響應(yīng)式表單布局。以下是對(duì)響應(yīng)式表單布局相關(guān)類的具體解釋。.row-cols-{sm|md|lg|xl|xxl}-auto類：用于根據(jù)不同視口寬度響應(yīng)式地調(diào)整列的寬度。例如.row-cols-sm-auto類將使表單控件在小型及以上設(shè)備（視口寬度≥576px）中自動(dòng)調(diào)整列寬，而在超小型設(shè)備（視口寬度<576px）中垂直堆疊。.g-{sm|md|lg|xl|xxl}-{value}類：用于設(shè)置垂直方向的間距。其中，value表示間距的數(shù)值，取值為0~5，分別表示的間距為0、0.25rem、0.5rem、1rem、1.5rem和3rem。.align-items-center類：用于將表單的控件在垂直方向上居中對(duì)齊，該類應(yīng)用于包含表單控件的容器元素。下面通過案例的形式講解如何實(shí)現(xiàn)一個(gè)產(chǎn)品篩選的響應(yīng)式表單。在中型及以上設(shè)備（視口寬度≥768px）中自動(dòng)調(diào)整表單控件的寬度，而在中型以下設(shè)備（視口寬度<768px）中垂直堆疊表單控件。6.2.3響應(yīng)式表單布局創(chuàng)建responseForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫頁面結(jié)構(gòu)。步驟1步驟2實(shí)現(xiàn)一個(gè)產(chǎn)品篩選的響應(yīng)式表單6.2.3響應(yīng)式表單布局在瀏覽器中打開responseForm.html文件，產(chǎn)品篩選表單在中型及以上設(shè)備（視口寬度≥768px）中的頁面效果如下圖所示。6.2.3響應(yīng)式表單布局圖中可以看出，表單控件呈水平排列顯示。產(chǎn)品篩選表單在中型及以下設(shè)備（視口寬度＜768px）中的頁面效果如下圖所示。6.2.3響應(yīng)式表單布局圖中可以看出，表單控件呈垂直堆疊顯示。表單驗(yàn)證6.3

先定一個(gè)小目標(biāo)！掌握表單驗(yàn)證的使用方法，能夠?qū)Ρ韱沃械臄?shù)據(jù)進(jìn)行驗(yàn)證6.3表單驗(yàn)證6.3表單驗(yàn)證在瀏覽器向服務(wù)器提交表單數(shù)據(jù)時(shí)，為了確保表單數(shù)據(jù)的正確性，需要對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。在表單驗(yàn)證過程中，前端（客戶端）和后端（服務(wù)器）需要共同發(fā)揮作用。在這里僅對(duì)前端表單驗(yàn)證進(jìn)行講解。6.3表單驗(yàn)證前端表單驗(yàn)證階段：可以使用JavaScript等技術(shù)對(duì)用戶輸入的數(shù)據(jù)進(jìn)行實(shí)時(shí)驗(yàn)證，以確保其符合特定規(guī)則或格式要求。例如，驗(yàn)證電子郵件地址的格式、檢查密碼的長度和包含特殊字符等。如果用戶的輸入不能通過前端驗(yàn)證，可以通過顯示錯(cuò)誤消息或高亮無效字段的方式提醒用戶重新輸入數(shù)據(jù)。常見的驗(yàn)證樣式類如下表所示。類描述.needs-validation用于表單的父元素或包含表單控件的父元素，觸發(fā)表單驗(yàn)證.valid-feedback用于為通過驗(yàn)證的表單控件提供附加的反饋信息或圖標(biāo)，通常與.is-valid類一起使用.invalid-feedback用于為未通過驗(yàn)證的表單控件提供附加的反饋信息或圖標(biāo)，通常與.is-invalid類一起使用.is-valid用于表單控件，用于標(biāo)識(shí)輸入為有效狀態(tài)，觸發(fā)正確狀態(tài)樣式.is-invalid用于表單控件，用于標(biāo)識(shí)輸入為無效狀態(tài)，觸發(fā)錯(cuò)誤狀態(tài)樣式.was-validated用于整個(gè)表單，在驗(yàn)證后將驗(yàn)證狀態(tài)應(yīng)用于表單，并將無效表單的字段顯示為紅色6.3表單驗(yàn)證Bootstrap提供了內(nèi)置的驗(yàn)證樣式類，用于顯示表單控件的正確狀態(tài)或錯(cuò)誤狀態(tài)，通過驗(yàn)證樣式的變化，用戶可以清楚地知道哪些輸入是有效的，哪些輸入存在錯(cuò)誤。6.3表單驗(yàn)證注意：為了使表單驗(yàn)證正常工作，需要確保在提交表單時(shí)取消瀏覽器的默認(rèn)驗(yàn)證行為，可以通過在<form>標(biāo)簽上添加novalidate屬性以禁用瀏覽器的默認(rèn)驗(yàn)證行為。此外，在提交表單時(shí)，默認(rèn)的表單提交行為會(huì)被執(zhí)行。如果開發(fā)者希望在表單提交之前處理表單數(shù)據(jù)或執(zhí)行其他操作，可以通過調(diào)用事件對(duì)象的preventDefault()方法阻止瀏覽器按照默認(rèn)方式處理表單提交。6.3表單驗(yàn)證考慮到在一些情況下，可能會(huì)有嵌套的元素或事件捕獲的情況，可以通過調(diào)用事件對(duì)象的stopPropagation()方法阻止事件冒泡，確保僅在當(dāng)前的元素上阻止默認(rèn)行為。下面演示如何實(shí)現(xiàn)一個(gè)簡單的用戶名文本框驗(yàn)證效果。這個(gè)示例只關(guān)注樣式的改變，不考慮具體的校驗(yàn)規(guī)則。當(dāng)用戶輸入的用戶名為空時(shí)，會(huì)阻止表單提交，并顯示提示信息“請(qǐng)輸入用戶名”。當(dāng)輸入用戶名后，會(huì)顯示提示信息“輸入正確”，示例代碼如下。6.3表單驗(yàn)證<formclass="needs-validationtext-center"novalidate><divclass="input-groupmy-3"><labelclass="input-group-text"for="username">用戶名：</label><inputtype="text"class="form-control"id="username"required><divclass="invalid-feedbacktext-center">請(qǐng)輸入用戶名</div><divclass="valid-feedbacktext-center">輸入正確</div></div><buttontype="submit"class="text-whitebg-primaryborder-0rounded-1px-5py-2">注冊(cè)</button></form>6.3表單驗(yàn)證>>接上頁代碼<script>varform=document.querySelector('.needs-validation');form.addEventListener('submit',function(event){if(!form.checkValidity()){event.preventDefault();event.stopPropagation();}form.classList.a