HTML5 表單元素 —— input元素

2024-04-27 15:05:20

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE HTML><html lang="en"> <head> <meta charset="utf8"> <style> body { font-size: 14px; } ol { margin: 0; margin-bottom: 10px; } table { margin-bottom: 10px; border-spacing: 0px; border: 1px solid black; } table td, table th { padding: 5px; border: 1px solid black; } label { display: block; } .container { border: 1px groove black; padding: 5px; margin-bottom: 5px; } </style> </head> <body> <div>input element type</div> <ol> <li>list</li> <li>text</li> <li>passWord</li> <li>radio</li> <li>checkbox</li> <li>button</li> <li>submit</li> <li>reset</li> <li>number</li> <li>color</li> <li>range</li> <li>date</li> <li>month</li> <li>week</li> <li>time</li> <li>datetime</li> <li>datetime-local</li> <li>email</li> <li>search</li> <li>tel</li> <li>url</li> <li>hidden</li> <li>image</li> <li>file</li> </ol> <table> <tr> <th>input param</th> <th>description</th> </tr> <tr> <td>autocomplete</td> <td>規定表單或輸入字段是否應該自動完成,取值為on或off.如果是on,瀏覽器會自動填寫值.</td> </tr> <tr> <td>autofocus</td> <td>規定頁面加載時,元素是否自動獲得焦點(autofocus屬性不需要值)</td> </tr> <tr> <td>disabled</td> <td>規定輸入字段是禁用的.被禁用的元素是不可用和不可點擊的.被禁用的元素不會被提交.(disabled屬性不需要值.它等同于disabled="disabled")</td> </tr> <tr> <td>maxlength</td> <td>規定輸入字段允許的最大長度(僅適用于email和file)</td> </tr> <tr> <td>multiple</td> <td>規定是否允許用戶輸入一個以上的元素(autofocus屬性不需要值)</td> </tr> <tr> <td>pattern</td> <td>是一個正則表達式,提交時會自動校驗輸入值的合法性</td> </tr> <tr> <td>placeholder</td> <td>在輸入值之前顯示的文本</td> </tr> <tr> <td>readonly</td> <td>規定輸入字段為只讀(不能修改.readonly屬性不需要值.它等同于readonly="readonly")</td> </tr> <tr> <td>required</td> <td>限制了輸入的內容不能為空</td> </tr> <tr> <td>size</td> <td>規定輸入字段的尺寸(以字符計)</td> </tr> <tr> <td>step</td> <td>步長,只有和初始值距離該步長的整數倍的值才是合法的,其它值雖然也可能被填入,但是不一定會校驗通過</li></td> </tr> <tr> <td>value</td> <td>規定輸入字段的初始值</td> </tr> <tr> <td>height 和 width</td> <td>規定元素的寬度和高度</td> </tr> <tr> <td>min 和 max</td> <td>規定元素的最小值和最大值</td> </tr> <tr> <td>onchange</td> <td>當輸入框的值改變時,會觸發該變量對應的函數</li></td> </tr> </table> <div class="container"> <label>list</label> <div>list屬性引用<datalist>元素中包含的預定義選項.用戶輸入這些值時會有相應的提示.當然用戶也可以輸入其它值.</div> <input list="mylist"/> <datalist id="mylist"> <option value="Chrome"> <option value="ie"> <option value="Edge"> <option value="Firefox"> </datalist> </div> <div class="container"> <label>text</label> <div>文本域,用戶可以在文本域中寫入文本</div> <input type="text"/> </div> <div class="container"> <label>password</label> <div>密碼字段,密碼字段中的字符顯示為圓點</div> <input type="password" placeHolder="請輸入密碼" maxlength="6" id="pwdInput" /> </div> <div class="container"> <label>radio</label> <div>復選框,默認無文本.根據name屬性分組.</div> <input type="radio" name="group" value="1"/> <input type="radio" name="group" value="2"/> </div> <div class="container"> <label>checkbox</label> <div>復選框,默認無文本</div> <input type="checkbox" value="1"/> <input type="checkbox" value="2"/> </div> <div class="container"> <label>button</label> <div>按鈕,默認無文本</div> <input type="button"/> </div> <div class="container"> <label>submit</label> <div>提交按鈕,默認的文本是"提交".會使用form的method方法將數據發送到action的地址上.</div> <input type="submit"/> </div> <div class="container"> <label>reset</label> <div>重置按鈕,默認的文本是"重置".會將form表單的所有數據重置為html中元素的value值.</div> <input type="reset"/> </div> <div class="container"> <label>number</label> <div>數字框.只能輸入整數或小數.右側有上下的三角按鈕,步長默認為1</div> <input type="number"/> </div> <div class="container"> <label>color</label> <div>顏色選擇域.</div> <input type="color"/> </div> <div class="container"> <label>range</label> <div>滑動條.</div> <input type="range" min="0" max="100" step="1" value="0"/> </div> <div class="container"> <label>date</label> <div>日期選擇框.可以選擇"年月日"."叉按鈕"用來重置數據.上下的三角按鈕用來對"年或月或日"進行加減.最右側的大三角可以彈出選擇框.</div> <form> <input type="date" step="5"/> <input type="submit"/> </form> </div> <div class="container"> <label>month</label> <div>年月選擇框.可以選擇"年月"."叉按鈕"用來重置數據.上下的三角按鈕用來對"年或月"進行加減.最右側的大三角可以彈出選擇框.</div> <input type="month"/> </div> <div class="container"> <label>week</label> <div>年周選擇框.可以選擇"年/第幾周"."叉按鈕"用來刪除數據.上下的三角按鈕用來對"年或周"進行加減.最右側的大三角可以彈出選擇框.</div> <input type="week"/> </div> <div class="container"> <label>time</label> <div>時間選擇框.可以選擇"上/下午"、幾時幾分."叉按鈕"用來刪除數據.上下的三角按鈕用來對"上/下午"、"小時或分鐘"進行加減.</div> <input type="time"/> </div> <div class="container"> <label>datetime</label> <div>日期時間框.奇怪的是:無數據校驗功能!!!</div> <form> <input type="datetime"/> <input type="submit"/> </form> </div> <div class="container"> <label>datetime-local</label> <div>本地日期時間框.可以選擇"年月日,上/下午時分"."叉按鈕"用來重置數據.上下的三角按鈕用來對"年月日,上/下午時分"進行加減.最右側的大三角可以彈出選擇框.</div> <input type="datetime-local"/> </div> <div class="container"> <label>email</label> <div>郵件域.如果輸入錯誤,submit時會提示"請在電子郵件地址中包括@"(空是合法的).</div> <form> <input type="email"/> <input type="submit"/> </form> </div> <div class="container"> <label>search</label> <div>搜索框.右側"叉按鈕"用來清空數據.</div> <input type="search" pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"/> </div> <div class="container"> <label>tel</label> <div>電話號碼框.required說明了輸入的內容不能為空,否則提交會提示"請填寫此字段";由于不會自動校驗,將正則表達式賦予pattern屬性,可以讓其提交時自動校驗.</div> <form> <input type="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"/> <input type="submit"/> </form> </div> <div class="container"> <label>url</label> <div>網址域.如果輸入錯誤,submit時會提示"請輸入網址"(空是合法的)</div> <form> <input type="url"/> <input type="submit"/> </form> </div> <div class="container"> <label>hidden</label> <div>隱藏的輸入域.如果要提交并非用戶直接輸入的數據的話,就是用這種類型的元素.</div> <input type="hidden"/> </div> <div class="container"> <label>image</label> <div>圖片提交按鈕,如果圖片加載失敗,會顯示破圖和"提交"文字.H5新增的類型,用戶單擊了這個圖片后會提交表單.</div> <input type="image" width="50px" height="50px" src="file:///C:/Users/admin/Desktop/test.jpg"/> </div> <div class="container"> <label>file</label> <div>文件選擇域.包含一個"選擇文件"的按鈕和一個用來顯示文件名的文本域,value為文件的具體路徑.</div> <input type="file" id="file"/> <button onclick="showFile()">顯示</button> </div> <script> var file = document.getElementById("file"); function showFile() { alert(file.value); } </script> </body></html>

這里寫圖片描述