溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“怎么使用HTML5的input元素”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
表單元素之 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 - 是否啟用自動(dòng)完成功能，“on”或“off” placeholder - 提示文本（Opera 支持此標(biāo)準(zhǔn)） --> <input type="text" autocomplete="on" placeholder="請(qǐng)輸入。。。" /> </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，是一個(gè)有特殊語(yǔ)義的 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 - 是否是選中狀態(tài) 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 - 復(fù)選框element/form/input/checkbox.html
<!doctype html> <html> <head> <title>checkbox</title> </head> <body> <!-- checkbox - 復(fù)選框 checked - 是否是選中狀態(tài) --> <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 內(nèi)元素 --> <form action="#"> <input type="text" /> <input type="submit" value="submit button" /> </form> </body> </html>
12、reset - 復(fù)位按鈕element/form/input/reset.html
<!doctype html> <html> <head> <title>reset</title> </head> <body> <!-- reset - 復(fù)位按鈕，用于復(fù)位 form 內(nèi)元素 --> <form action="#"> <input type="text" /> <input type="reset" value="reset" /> </form> </body> </html>
13、number - 數(shù)字輸入框element/form/input/number.html
<!doctype html> <html> <head> <title>number</title> </head> <body> <!-- number - 數(shù)字輸入框（Opera 支持此標(biāo)準(zhǔn)） value - 數(shù)字的值 min - 數(shù)字的最小值 max - 數(shù)字的最大值 step - 上下箭頭增減數(shù)字的時(shí)候，指定其步長(zhǎng) --> <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 - 滑動(dòng)條element/form/input/range.html
<!doctype html> <html> <head> <title>range</title> </head> <body> <!-- range - 滑動(dòng)條（Opera 支持此標(biāo)準(zhǔn)） value - 數(shù)字值 min - 數(shù)字的最小值 max - 數(shù)字的最大值 step - 步長(zhǎng) --> <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 - 隱藏元素，不會(huì)顯示element/form/input/hidden.html
<!doctype html> <html> <head> <title>hidden</title> </head> <body> <!-- hidden - 隱藏元素，不會(huì)顯示 --> <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 支持此標(biāo)準(zhǔn)） value - 選中的顏色值 --> <input type="color" value="#FF0000" /> <script type="text/javascript"> alert(document.getElementsByTagName("input")[0].value); </script> </body> </html>18、datetime - 日期時(shí)間輸入/選擇框（UTC）, datetime-loca - 日期時(shí)間輸入/選擇框（本地時(shí)區(qū)）, date - 日期輸入/選擇框, time - 時(shí)間輸入/選擇, 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 支持此標(biāo)準(zhǔn) datetime - 日期時(shí)間輸入/選擇框（UTC） datetime-loca - 日期時(shí)間輸入/選擇框（本地時(shí)區(qū)） date - 日期輸入/選擇框 time - 時(shí)間輸入/選擇框 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> <!--請(qǐng)用 opera 測(cè)試--> <form action="#"> <!-- autocomplete - 是否啟用自動(dòng)完成功能（on 或 off） --> <input type="text" autocomplete="on" /> <br /> <!-- placeholder - 用于定義提示文本 --> <input type="text" autocomplete="on" placeholder="請(qǐng)輸入。。。" /> <br /> <!-- pattern - 用指定的正則表達(dá)式對(duì) input 的值做驗(yàn)證 --> <input pattern="[0-9]" value="6" /> <br /> <!-- dirname - 用于將文本排列方向以參數(shù)的形式發(fā)給服務(wù)端 示例：下面的 input 在 submit 后，會(huì)自動(dòng)增加參數(shù) &textdir=ltr --> <input type="text" name="textName" dirname="textdir" /> <br /> <!-- size - 指定 input 的顯示寬度（單位：字符數(shù)） --> <input type="text" value="webabcd" size="10" /> <br /> <!-- maxlength - 指定可輸入的最大字符長(zhǎng)度 --> <input type="text" maxlength="10" /> <br /> <!-- readonly - 指定 input 是否是只讀模式 --> <input type="text" value="webabcd" readonly /> <br /> <!-- required - 指定是否為必填元素 --> <input type="text" required /> <br /> <!-- list - 指定建議數(shù)據(jù)源，建議數(shù)據(jù)源為一個(gè) datalist 元素。所謂建議數(shù)據(jù)源可以理解為：系統(tǒng)推測(cè)的用戶可能輸入的內(nèi)容列表，以方便用戶輸入，但并不會(huì)限制用戶的輸入 --> <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 - 是否可多選 如下例：可以在一個(gè) input 中選擇多個(gè) 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 - 數(shù)字的最小值 max - 數(shù)字的最大值 step - 步長(zhǎng) --> <input type="range" value="50" min="0" max="100" step="10" /> <br /> <input type="submit" value="submit" /> </form> </body> </html>
“怎么使用HTML5的input元素”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼