本篇内容介绍了“怎么使用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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
