<input type="month">

HTML中的input元素type属性值为month时，将提供一个年份-月份输入控件。该控件为用户选择某年的特定月份提供了极大方便。

<input type="month">定义格式

<input type="month">本身就可以提供一个月份输入控件，但为了方便应用，一般添加id属性和name属性，其基本格式如下：

type属性用于指定input的类型为month。

id属性用于标识控件，可以方便客户端脚本获取到该控件。

name属性用于给出控件的名称，方便客户端脚本获取到该控件，同时在表单提交后，服务器端程序可以通过名称获取到该控件的值。

该控件在不同浏览器中的基本样式可能有所不同，在谷歌浏览器（左）和Edge浏览器（右）中的显示风格分别如下图所示：

点击上图中的小图标，在谷歌浏览器和Edge浏览器中都会弹出如下图所示的月份选择界面：

使用鼠标滚动或键盘中的上下箭头，或使用界面中的滚动条可以上下滚动界面中的内容，点击相应的年份后则可以展开对应的月份，用户点击一个月份后，则可以将其填充到输入框中。

并非所有的浏览器都支持这一控件。在不支持该控件的浏览器中，该控件将转换成普通文本的格式，即与<input type="text">相同的功能。

value属性

value属性允许用户在设计时活界面加载时给控件一个默认值。

value属性值的格式为yyyy-MM，yyyy代表4位的年份，MM代表2位的月份，例如：2023-08.

下例演示了value属性的使用方法：

 其在谷歌浏览器中的显示形式及选择月份的界面如下图所示：

max属性

max属性用于给出<input type="month">控件可接受的最大年份和月份。

max属性的值格式与value属性值格式相同。

如果指定的max属性值是无效的字符串，则该属性将失效，即不起作用。

如果value属性设置的值超过max属性指定的值，则该控件将无法通过验证，表单无法提交。

该例在谷歌浏览器中的显示界面如下图所示：

由上图可以看出，该控件只能选择到2023年8月份。

min属性

min属性用于给出<input type="month">控件可以接受的最小年份和月份。

min属性值的形式与value属性和max属性相同。

如果设置的min属性值的字符串无效，则该属性将失效，即该控件没有最小年份和月份限制。

如果设置的value属性值小于min属性的值，则控件无法通过有效性验证，表单也无法提交。

min属性的值应小于或等于max属性的值。

该例在谷歌浏览器中的显示效果如下图所示：

从上图可以看出，用户可选择的月份是2023年5月份及之后的月份。

list属性

list属性为<input type="month">控件关联一个<datalist>元素。

list属性的值是位于同一文档中的<datalist>元素的id属性值。

<datalist>元素为用户预定义了一些供用户可选择的值，这些值仅是一种建议，用户可以从这个数据列表中选择建议的值，也可以通过原控件选择想要的值。

下例演示了具体使用方法。

该例在谷歌浏览器中，点击小图标时显示效果如下图所示：

如果用户不准备使用这些值，则可以点击“其他...”后获取与其他例子中相同的界面来选择年份和月份。

step属性

step属性用于指定<input type="month">控件调整的间隔。

step属性是一个整数值，默认为1，其调整的是月份。

如果<input type="month">指定了min属性，则该控件将以min属性为基准日期，可以往后选择指定间隔的月份。

如果该控件指定了max属性，则该控件将以max属性指定的月份前一月份为基准日期，可以往前选择指定间隔的月份。

如果该控件指定了value属性，则该控件将以value属性值作为基准，往前和王后可以选择指定间隔的月份。

如果未指定以上任何属性，则控件将以某种默认形式确定间隔，如按照从1月份开始。

下面是一组例子演示了相应的规则。

以上各例在谷歌浏览器选择时的效果如下各图所示。

其他属性

除了上述属性外，<input type="month">控件还支持readonly属性、disabled属性、required属性。

具体可以参考其他控件中的例子。

本文中的例子，读者可以点击这里查看。

相关阅读推荐：

<input type="week">

<input type="date">

<input type="time">

<input type="date">

<input type="datetime-local">

<input type="text">

<input type="radio">

<input type="checkbox">

<input type="color">

<input type="submit"> | <input type="reset"> | <input type="button">

如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6619.html。