<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                # 第 10 章 表單元素[中] 學習要點:? 1.type 屬性總匯 ?2.type 屬性解析 主講教師:李炎恢 本章主要探討 HTML5?中表單中 input?元素的 type?屬性,根據不同的值來顯示不同的輸入框。 **一.****type****?屬性總匯** input 元素可以用來生成一個供用戶輸入數據的簡單文本框。在默認的情況下,什么樣的數據均可以輸入。而通過不同的屬性值,可以限制輸入的內容。 | **屬性名稱** | **說明** | | --- | --- | | text | 一個單行文本框,默認行為 | | password | 隱藏字符的密碼框 | | search | 搜索框,在某些瀏覽器鍵入內容會出現叉標記取消 | | submit、reset、button | 生成一個提交按鈕、重置按鈕、普通按鈕 | | number、range | 只能輸入數值的框;只能輸入在一個數值范圍的框 | | checkbox、radio | 復選框,用戶勾選框;單選框,只能在幾個中選一個 | | image、color | 生成一個圖片按鈕,顏色代碼按鈕 | | email、tel、url | 生成一個檢測電子郵件、號碼、網址的文本框 | | date、month、time、week、datetime、datetime-local | 獲取日期和時間 | | hidden | 生成一個隱藏控件 | | file | 生成一個上傳控件 | ?**二.****input****?元素解析** ****1.type?****為****?text?****值時**** ``` <input type="text"> ``` 解釋:當 type?值為 text?時,呈現的就是一個可以輸入任意字符的文本框,這也是默認行為。并且,還提供了一些額外的屬性。 | **屬性名稱** | **?說明** | | --- | --- | | list | 指定為文本框提供建議值的 datalist?元素,其值為datalist 元素的?id 值 | | maxlength | 設置文本框最大字符長度 | | pattern | 用于輸入驗證的正則表達式 | | placeholder | 輸入字符的提示 | | readonly | 文本框處于只讀狀態 | | disabled | 文本框處于禁用狀態 | | size | 設置文本框寬度 | | value | 設置文本框初始值 | | required | 表明用戶必須輸入一個值,否則無法通過輸入驗證 | //設置文本框長度 ``` <input type="text" size="50"> ``` //設置文本框輸入字符長度 ``` <input type="text" maxlength="10"> ``` //設置文本框的初始值 ``` <input type="text" value="初始值"> ``` //設置文本框輸入提示 ``` <input type="text" placeholder="請輸入內容"> ``` //設置文本提供的建議值 ``` <input list="footlist"> <datalist id="footlist"> <option value="蘋果">蘋果</option> <option value="桔子">桔子</option> <option value="香蕉" label="香蕉"> <option value="梨子"> </datalist> ``` //設置文本框內容為只讀,可以提交數據 ``` <input type="text" readonly> ``` //設置文本框內容不可用,不可以提交數據 ``` <input type="text" disabled> ``` **2.type** **為****?password** **值時** ``` <input type="password"> ``` 解釋:當 type?值為 password?時,一般用于密碼框的輸入,所有的字符都會顯示星號。密碼框也有一些額外屬性。 | **屬性名稱** | **說明** | | --- | --- | | maxlength | 設置密碼框最大字符長度 | | pattern | 用于輸入驗證的正則表達式 | | placeholder | 輸入密碼的提示 | | readonly | 密碼框處于只讀狀態 | | disabled | 文本框處于禁用狀態 | | size | 設置密碼框寬度 | | value | 設置密碼框初始值 | | required | 表明用戶必須輸入同一個值 | 這里除了正則和驗證需要放在下一節,其余和文本框一致。 **3.type** **為****?search** **時** ``` <input type="search"> ``` 解釋:和文本框一致,在除 Firefox?瀏覽器的其他現代瀏覽器,會顯示一個叉來取消搜索內容。額外屬性也和 text?一致。 **4.type** **為****?number****、****range** **時** ``` <input type="number"> <input type="range"> ``` 解釋:只限輸入數字的文本框,不同瀏覽器可能顯示方式不同。生成一個數值范圍文本框,只是樣式是拖動式。額外屬性如下: | **屬性名稱** | **說明** | | --- | --- | | list | 指定為文本框提供建議值的 datalist?元素,其值為datalist 元素的?id 值 | | min | 設置可接受的最小值 | | max | 設定可接受的最大值 | | readonly | 設置文本框內容只讀 | | required | 表明用戶必須輸入一個值,否則無法通過輸入驗證 | | step | 指定上下調節值的步長 | | value | 指定初始值 | //范圍和步長 ``` <input type="number" step="2" min="10" max="100"> ``` **5.type** **為****?date** **系列時** ``` <input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local"> ``` 解釋:實現文本框可以獲取日期和時間的值,但支持的瀏覽器不完整。我們測試 Chrome?和 Opera?支持,其他瀏覽器尚未支持。所以,在獲取日期和時間,目前還是推薦使用 jQuery?等前端庫來實現日歷功能。額外屬性和 number?一致。 **6.type** **為****?color** **時** ``` <input type="color"> ``` 解釋:實現文本框獲取顏色的功能,最新的現代瀏覽器測試后 IE?不支持,其余的都能顯示一個顏色對話框提供選擇。 **7.type** **為****?checkbox****、****radio** **時** ``` 音樂<input type="checkbox"> 體育<input type="checkbox"> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女 ``` 解釋:生成一個獲取布爾值的復選框或固定選項的單選框。額外屬性如下: | **屬性名稱** | **說明** | | --- | --- | | checked | 設置復選框、單選框是否為勾選狀態 | | required | 表示用戶必須勾選,否則無法通過驗證 | | value | 設置復選框、單選框勾選狀態時提交的數據。默認為 on | //默認勾選,默認值為?1 ``` <input type="checkbox" name="music" checked value="1"> ``` **8.type** **為****?submit****、****reset** **和****?button** **時** ``` <input type="submit"> ``` 解釋:生成一個按鈕,三種模式:提交、重置和一般按鈕,和&lt;button&gt;元素相同。 | **值名稱** | **說明** | | --- | --- | | submit? | 生成一個提交按鈕 | | reset | ?生成一個重置按鈕 | | button | ?生成一個普通按鈕 | 如果是 submit?時,還提供了和&lt;button&gt;元素一樣的額外屬性:formaction、formenctype、formmethod、formtarget 和?formnovalidate。 **9.type** **為****?image** **時** ``` <input type="image" src="img.png"> ``` 解釋:生成一個圖片按鈕,點擊圖片就實現提交功能,并且傳送了分區響應數據。圖片按鈕也提供了一些額外屬性。 | **屬性名稱** | **說明** | | --- | --- | | src | 指定要顯示圖像的 URL | | alt | 提供圖片的文字說明 | | width | 圖像的長度 | | height | 圖像的高度 | | 提交額外屬性 | formaction、formenctype、formmethod、formtarget和 formnovalidate。 | **10.type** **為****?email****、****tel****、****url** **時** ``` <input type="email"> <input type="tel"> <input type="url">? ``` 解釋:email?為電子郵件格式、tel?為電話格式、url?為網址格式。額外屬性和 text?一致。但對于這幾種類型,瀏覽器支持是不同的。email?支持比較好,現在瀏覽器都支持格式驗證;tel?基本不支持;url?支持一般,部分瀏覽器只要檢測到 http://就能通過。 **11.type** **為****?hidden** **時** ``` <input type="hidden"> ``` 解釋:生成一個隱藏控件,一般用于表單提交時關聯主鍵 ID?提交,而這個數據作為隱藏存在。 **12.type** **為****?file** **時** ``` <input type="file"> ``` 解釋:生成一個文件上傳控件,用于文件的上傳。額外提供了一些屬性: | **屬性名稱** | **說明** | | --- | --- | | accept | 指定接受的 MIME?類型 | | required | 表明用戶必須提供一個值,否則無法通過驗證 | ``` accept="image/gif, image/jpeg, image/png" ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看