前言：
此刻兄弟们对“html5下拉菜单”都比较关注，咱们都需要了解一些“html5下拉菜单”的相关内容。那么小编也在网上网罗了一些对于“html5下拉菜单””的相关文章，希望姐妹们能喜欢，同学们一起来了解一下吧！email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。
使用格式如下：
<input type="email" />
如果你输入的邮箱格式不正确，会提醒你格式错误。
url 类型是专门用来输入网址的。
使用格式如下：
<input type="url" />
也同样会校验网址格式是否合法。
number 类型用于数字的输入，number 类型表单有以下属性：
属性
描述
max
输入框允许的最大值。
min
输入框允许的最小值。
step
合法的数字间隔，例如 step=2，则合法为：2、4、6、8。
value
默认值。
例如：设置默认值为 5，步长为 2，每点 ⬆️ 一次，数字 + 2。
<input type="number" value="5" step="2" />
range 类型用于包含一定范围内数值的输入。与number不同的是，range显示为进度条。
其使用格式为：
<input type="range" />
六种常用的日期选择类型：
datemonthweektimedatetimedatetime-local
统称为 Date pickers：
类型
描述
date
选取年、月、日
month
选取年、月
week
选取年、周
time
选取时间小时、分钟
datetime
选取年、月、日和 UTC 时间
datetime-local
选取年、月、日和本地时间
例如，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form> date： <input type="date" /> <br /> datetime-local：<input type="datetime-local" /> <br /> <input type="submit" value="提交" /> </form> </body></html>
显示效果如下：
search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。
使用格式如下：
<input type="search" />
不能从外观和功能上能发现 search 类型和 text 类型的区别。那么我们为何还要学 search 类型呢？
如果使用不同的浏览器去看，就会发现有细微的差异，比如 Chrome 浏览器给 search 类型的输入框提供了清空按钮。如果在移动端的话，虚拟键盘会根据不同类型的输入框给出不同的反应。还有就是起到语义化的作用，我们一眼能够明白这里的 input 是起到搜索的效果。
tel 类型是 input 标签专门用来输入电话号码的文本框，它并不仅局限输入数字，还可以输入一些其他的字符，例如：- +（）等。
语法格式如下：
<input type="tel" />
datalist 标签，为输入框提供一个可选择的数据列表。在具有自动提示功能的文本框中可以使用这些选择项来自动补全文本框。该标签由 datalist 和 option 标签组合应用。
一个 datalist 标签中可以包含多个 option 标签。他们的关系和表单元素 select 和 option 的关系一样。
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> 你最爱的水果： <input list="fruits" id="fruit" name="fruit" /> <datalist id="fruits"> <option value="苹果"></option> <option value="李子"></option> <option value="苹果"></option> <option value="西瓜"></option> <option value="樱桃"></option> </datalist> </body></html>
显示为，下拉菜单为提示框
HTML5 新增的 output 元素用于在浏览器中显示计算结果或者脚本输出，输出的结果在标签之间显示。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form oninput="r.value=parseInt(num1.value)+parseInt(num2.value)"> <!--定义了两个 number 类型的输入框，其默认值为 100--> <input type="number" id="num1" value="100" /> + <input type="number" id="num2" value="100" /> = <!--for 属性可以绑定对应 id 名的表单元素--> <output name="r" for="num1 num2"></output> </form> </body></html>
在上面代码中，有 oninput="r.value=parseInt(num1.value)+parseInt(num2.value)"，我们使用 oninput 来及时获取输入框中改变后的值。在等号右侧，使用 parseInt 是把输入框中的值按照整型来解析。
关于 form 标签中的 oninput 属性是当元素获得输入时被触发，其中 parseInt 是 JavaScript 中解析整数的函数，这里只要知道它所起的作用就好，不需要去深究。
显示为，202就是output显示的
标签： #html5下拉菜单
