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

第6章Bootstrap表單《Bootstrap響應式Web開發(fā)（第2版）》學習目標/Target

掌握表單控件樣式的使用方法，能夠靈活設置文本框、下拉列表、單選按鈕、復選框和輸入組的樣式掌握表單布局方式的使用方法，能夠實現(xiàn)行內表單布局、水平表單布局

和響應式表單布局效果

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

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

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

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

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

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

先定一個小目標！掌握表單表單布局的使用方法，能夠實現(xiàn)水平表單布局效果水平表單布局將表單控件（如<label>標簽）和輸入控件（如<input>標簽、<select>標簽、<textarea>標簽等）放置在同一行內，每個表單組單獨占一行，這樣就可避免一行顯示太多的內容。6.2.2水平表單布局通過柵格系統(tǒng)的.row類和.col-{sm|md|lg|xl|xxl}-{value}類可以創(chuàng)建水平表單布局。6.2.2水平表單布局為<label>標簽添加.col-form-label類，可以使表單標簽與其關聯(lián)的表單控件在同一行內水平排列，并且垂直對齊。如果需要調整標簽的尺寸，可以使用.col-form-label-sm類設置小尺寸樣式，使用.col-form-label-lg類設置大尺寸樣式。<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)建一個在小型及以上設備（視口寬度≥576px）中呈水平布局的表單。下面通過案例的形式講解如何實現(xiàn)一個登錄表單，該表單在小型及以上設備（視口寬度≥576px）中呈水平布局。6.2.2水平表單布局創(chuàng)建horizontalForm.html文件，在該文件中創(chuàng)建基礎HTML5文檔結構并引入bootstrap.min.css文件。編寫頁面結構。步驟1步驟2登錄表單在小型及以上設備中呈水平布局6.2.2水平表單布局在瀏覽器中打開horizontalForm.html文件，登錄表單效果如下圖所示。6.2.2水平表單布局6.2.3響應式表單布局

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

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