溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么使用HTML5的input元素”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
表單元素之 input 元素 - text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week
input 元素的通用屬性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step
示例
1、text - 文本框element/form/input/text.html
<!doctype html> <html> <head> <title>text</title> </head> <body> <!-- text - 文本框 autocomplete - 是否啟用自動完成功能，“on”或“off” placeholder - 提示文本（Opera 支持此標準） --> <input type="text" autocomplete="on" placeholder="請輸入。。。" /> </body> </html>
2、password - 密碼框element/form/input/password.html
<!doctype html> <html> <head> <title>password</title> </head> <body> <!-- password - 密碼框 --> <input type="password" value="111111" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>3、url - url 框element/form/input/url.html
<!doctype html> <html> <head> <title>url</title> </head> <body> <!-- url - url 框，文本框形式 --> <input type="url" value="http://www.cnblogs.com/" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>4、telephone - 電話框element/form/input/telephone.html
<!doctype html> <html> <head> <title>telephone</title> </head> <body> <!-- telephone - 電話框，文本框形式 --> <input type="telephone" value="110" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>5、email - 電子郵件框element/form/input/email.html
<!doctype html> <html> <head> <title>email</title> </head> <body> <!-- email - 電子郵件框，文本框形式 --> <input type="email" value="www@abc.com" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>6、search - 搜索框element/form/input/search.html
<!doctype html> <html> <head> <title>search</title> </head> <body> <!-- search - 搜索框，文本框形式 --> <input type="search" value="我是 search，是一個有特殊語義的 text" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>7、file - 用于上傳文件element/form/input/file.html
<!doctype html> <html> <head> <title>file</title> </head> <body> <!-- file - 用于上傳文件 --> <input type="file" /> </body> </html>
8、radio - 單選框element/form/input/radio.html
<!doctype html> <html> <head> <title>radio</title> </head> <body> <!-- radio - 單選框 checked - 是否是選中狀態 name - 相同的是同一組 --> <input id="rad" type="radio" checked name="rad" /> <label for="rad">radio button title</label> <input id="rad2" type="radio" name="rad" /> <label for="rad2">radio button title</label> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>9、checkbox - 復選框element/form/input/checkbox.html
<!doctype html> <html> <head> <title>checkbox</title> </head> <body> <!-- checkbox - 復選框 checked - 是否是選中狀態 --> <input id="chk" type="checkbox" checked /> <label for="chk">checkbox title</label> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].checked); </script> </body> </html>10、button - 一般按鈕element/form/input/button.html
<!doctype html> <html> <head> <title>button</title> </head> <body> <!-- button - 一般按鈕 --> <input type="button" value="button" /> </body> </html>
11、submit - 提交按鈕element/form/input/submit.html
<!doctype html> <html> <head> <title>submit</title> </head> <body> <!-- submit - 提交按鈕，用于提交 form 內元素 --> <form action="#"> <input type="text" /> <input type="submit" value="submit button" /> </form> </body> </html>
12、reset - 復位按鈕element/form/input/reset.html
<!doctype html> <html> <head> <title>reset</title> </head> <body> <!-- reset - 復位按鈕，用于復位 form 內元素 --> <form action="#"> <input type="text" /> <input type="reset" value="reset" /> </form> </body> </html>
13、number - 數字輸入框element/form/input/number.html
<!doctype html> <html> <head> <title>number</title> </head> <body> <!-- number - 數字輸入框（Opera 支持此標準） value - 數字的值 min - 數字的最小值 max - 數字的最大值 step - 上下箭頭增減數字的時候，指定其步長 --> <input type="number" value="10" min="10" max="100" step="10" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>14、range - 滑動條element/form/input/range.html
<!doctype html> <html> <head> <title>range</title> </head> <body> <!-- range - 滑動條（Opera 支持此標準） value - 數字值 min - 數字的最小值 max - 數字的最大值 step - 步長 --> <input type="range" value="50" min="0" max="100" step="10" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>15、image - 顯示圖片element/form/input/image.html
<!doctype html> <html> <head> <title>image</title> </head> <body> <!-- image - 顯示圖片 src - 圖片地址 --> <input type="image" src="https://cache.yisu.com/upload/information/20210521/366/473491.png" /> </body> </html>
16、hidden - 隱藏元素，不會顯示element/form/input/hidden.html
<!doctype html> <html> <head> <title>hidden</title> </head> <body> <!-- hidden - 隱藏元素，不會顯示 --> <input type="hidden" value="我是 hidden" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>17、color - 顏色選擇器element/form/input/color.html
<!doctype html> <html> <head> <title>color</title> </head> <body> <!-- color - 顏色選擇器（目前僅 Opera 支持此標準） value - 選中的顏色值 --> <input type="color" value="#FF0000" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>18、datetime - 日期時間輸入/選擇框（UTC）, datetime-loca - 日期時間輸入/選擇框（本地時區）, date - 日期輸入/選擇框, time - 時間輸入/選擇, month - 月份輸入/選擇框, week - 星期輸入/選擇框element/form/input/datetime_datetime-local_date_time_month_week.html.html
<!doctype html> <html> <head> <title>datetime datetime-local date time month week</title> </head> <body> <!-- 目前僅 Opera 支持此標準 datetime - 日期時間輸入/選擇框（UTC） datetime-loca - 日期時間輸入/選擇框（本地時區） date - 日期輸入/選擇框 time - 時間輸入/選擇框 month - 月份輸入/選擇框 week - 星期輸入/選擇框 --> <input type="datetime" /> <br /> <input type="datetime-local" /> <br /> <input type="date" /> <br /> <input type="time"" /> <br /> <input type="month" /> <br /> <input type="week" /> </body> </html>
19、input 元素的通用屬性element/form/input/_attributes.html
<!doctype html> <html> <head> <title>input 元素的通用屬性: autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step</title> </head> <body> <!--請用 opera 測試--> <form action="#"> <!-- autocomplete - 是否啟用自動完成功能（on 或 off） --> <input type="text" autocomplete="on" /> <br /> <!-- placeholder - 用于定義提示文本 --> <input type="text" autocomplete="on" placeholder="請輸入。。。" /> <br /> <!-- pattern - 用指定的正則表達式對 input 的值做驗證 --> <input pattern="[0-9]" value="6" /> <br /> <!-- dirname - 用于將文本排列方向以參數的形式發給服務端 示例：下面的 input 在 submit 后，會自動增加參數 &textdir=ltr --> <input type="text" name="textName" dirname="textdir" /> <br /> <!-- size - 指定 input 的顯示寬度（單位：字符數） --> <input type="text" value="webabcd" size="10" /> <br /> <!-- maxlength - 指定可輸入的最大字符長度 --> <input type="text" maxlength="10" /> <br /> <!-- readonly - 指定 input 是否是只讀模式 --> <input type="text" value="webabcd" readonly /> <br /> <!-- required - 指定是否為必填元素 --> <input type="text" required /> <br /> <!-- list - 指定建議數據源，建議數據源為一個 datalist 元素。所謂建議數據源可以理解為：系統推測的用戶可能輸入的內容列表，以方便用戶輸入，但并不會限制用戶的輸入 --> <input type="email" list="contacts" /> <datalist id="contacts"> <option value="aabb@aa.com" /> <option value="ccdd@cc.com" /> <option value="eeff@ee.com" /> </datalist> <br /> <!-- multiple - 是否可多選 如下例：可以在一個 input 中選擇多個 email --> <input type="email" list="contacts2" multiple /> <datalist id="contacts2"> <option value="aabb@aa.com" /> <option value="ccdd@cc.com" /> <option value="eeff@ee.com" /> </datalist> <br /> <!-- 以下屬性適用于 type="range", type="number" 等 min - 數字的最小值 max - 數字的最大值 step - 步長 --> <input type="range" value="50" min="0" max="100" step="10" /> <br /> <input type="submit" value="submit" /> </form> </body> </html>
“怎么使用HTML5的input元素”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
