From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/html/element/command/index.html | 139 ------ files/zh-cn/web/html/element/element/index.html | 112 ----- .../zh-cn/web/html/element/input/month/index.html | 457 ++++++++++++++++++ .../zh-cn/web/html/element/input/range/index.html | 515 +++++++++++++++++++++ .../input/\346\234\210\344\273\275/index.html" | 457 ------------------ .../input/\350\214\203\345\233\264/index.html" | 515 --------------------- 6 files changed, 972 insertions(+), 1223 deletions(-) delete mode 100644 files/zh-cn/web/html/element/command/index.html delete mode 100644 files/zh-cn/web/html/element/element/index.html create mode 100644 files/zh-cn/web/html/element/input/month/index.html create mode 100644 files/zh-cn/web/html/element/input/range/index.html delete mode 100644 "files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" delete mode 100644 "files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" (limited to 'files/zh-cn/web/html/element') diff --git a/files/zh-cn/web/html/element/command/index.html b/files/zh-cn/web/html/element/command/index.html deleted file mode 100644 index 9d6a7c58fd..0000000000 --- a/files/zh-cn/web/html/element/command/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: command -slug: Web/HTML/Element/command -translation_of: Web/HTML/Element/command ---- -
-

已废弃

- -

此功能已过时。 虽然它可能仍然在某些浏览器中工作，但不鼓励使用它，因为它可能随时被删除。 尽量避免使用它。

-
- -
-

注意：command元素已经被{{Gecko("24.0")}}引擎移除以利于{{HTMLElement("menuitem")}}元素。Firefox从未支持command元素，并且在Firefox 24中删除了对{{domxref("HTMLCommandElement")}}DOM接口的实现。

-
- -

概述

- -

command元素用来表示一个用户可以调用的命令.

- -

使用规范

- - - - - - - - - - - - - - - - - - - - - - - - -
内容类别Flow content, phrasing content
是否允许有内容否, 它是一个空元素
标签遗漏必须有开始标签, 不可以有结束标签.
允许的父元素任何可以包含 phrasing content的元素.
规范文档HTML5, section 4.11.3
- -

属性

- -

和其他的HTML元素一样, 该元素支持全局属性.

- -
-
{{ htmlattrdef("checked") }}
-
表明该元素已被选择, 除非元素的type 属性是 checkbox 或者 radio,否则该属性必须被省略.
-
{{ htmlattrdef("disabled") }}
-
表明该command元素已经被禁用.
-
{{ htmlattrdef("icon") }}
-
用一张图片来显示该command元素.
-
{{ htmlattrdef("label") }}
-
该command元素的名称.用来显示给用户.
-
{{ htmlattrdef("radiogroup") }}
-
如果该元素的type属性为radio,则radiogroup属性用来表示这一组command元素的公用名称. 如果type属性不是radio,则radiogroup属性必须省略.
-
{{ htmlattrdef("type") }}
-
该属性用来表明command元素的类型,可以是下面三种值: -
    -
  • -

    command 或者为空,表示一个普通的command元素.

    -
    • -
  • -

    checkbox表明该command元素体现为一个复选框,可以来回切换选中状态.

    -
    • -
  • -

    radio 表明该command元素体现为一个单选按钮,可以来回切换选中状态.

    -
    • -
-
-
- -

DOM 接口

- -

该元素实现了HTMLCommandElement接口.

- -

例子

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

 

- -

{{ languages( { "en": "en/HTML/Element/command" } ) }}

diff --git a/files/zh-cn/web/html/element/element/index.html b/files/zh-cn/web/html/element/element/index.html deleted file mode 100644 index 4db9cb2471..0000000000 --- a/files/zh-cn/web/html/element/element/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -

{{obsolete_header}}

- -
-

Note: This element has been removed from the specification. See this for more information from the editor of the specification.

-
- -

简介

- -

<element>元素被定义在最新的 HTML DOM 元素中。

- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted content???
Tag omission{{no_tag_omission}}
Permitted parent elements???
DOM interface{{domxref("HTMLElement")}}
- -

属性

- -

这个元素只有全局属性。

- -

示例

- -

Text goes here.

- -
More text goes here.
-
- -

规范

- -

<element>元素以前位于自定义元素的草稿规范中，但已被删除

- -

浏览器兼容

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

另请参阅

- - - -
{{HTMLRef}}
diff --git a/files/zh-cn/web/html/element/input/month/index.html b/files/zh-cn/web/html/element/input/month/index.html new file mode 100644 index 0000000000..9a2fbb6f2a --- /dev/null +++ b/files/zh-cn/web/html/element/input/month/index.html @@ -0,0 +1,457 @@ +--- +title: +slug: Web/HTML/Element/Input/月份 +tags: + - HTML + - Input + - 表单 +translation_of: Web/HTML/Element/input/month +--- +

{{HTMLRef}}

+ +

类型为 month 的 {{htmlelement("input")}} 可以让你容易地创建一个方便输入年份或月份的一个 {{htmlelement("input")}}。

+ +
{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
+ + + +

这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<input type="text">.

+ +

对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。

+ +

+ +

Edge的 month 看起来像这样的:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}一个 {{domxref("DOMString")}} 代表一个月，一年，或者是空。
Events{{event("change")}} 和 {{event("input")}}.
Supported Common Attributes{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 和 {{htmlattrxref("step", "input")}}.
IDL attributesvalue.
Methods{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+ +

Value

+ +

{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("-"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.

+ +

你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:

+ +
<label for="bday-month">What month were you both in?</label>
+<input id="bday-month" type="month" name="bday-month" value="2017-06">
+ +

{{EmbedLiveSample('value-example-1', 600, 60)}}

+ +

需要注意的是显示的如期格式不同于实际的value — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 yyyy-MM。

+ +

在向服务器提交上述值的时候他们看起来像这样：bday-month=1978-06.

+ +

你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：

+ +
var monthControl = document.querySelector('input[type="month"]');
+monthControl.value = '1978-06';
+ +

{{EmbedLiveSample("value-example-2", 600, 60)}}

+ +

 

+ +

Additional attributes

+ +

In addition to the attributes common to {{HTMLElement("input")}} elements, month inputs offer the following attributes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
{{anch("max")}}The latest year and month to accept as a valid input
{{anch("min")}}The earliest year and month to accept as a valid input
{{anch("readonly")}}A Boolean which, if present, indicates that the input's value can't be edited
{{anch("step")}}A stepping interval to use when incrementing and decrementing the value of the input field
+ +

{{htmlattrdef("max")}}

+ +

The latest year and month, in the string format discussed in the {{anch("Value")}} section above, to accept. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a valid string in "yyyy-MM" format, then the element has no maximum value.

+ +

This value must specify a year-month pairing later than or equal to the one specified by the min attribute.

+ +

{{htmlattrdef("min")}}

+ +

The latest year and month to accept, in the same "yyyy-MM" format described above. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid year and month string, the input has no minimum value.

+ +

This value must be a year-month pairing which is earlier than or equal to the one specified by the max attribute.

+ +

{{htmlattrdef("readonly")}}

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed from JavaScript code that directly sets the value of the {{domxref("HTMLInputElement.value")}} property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+ +

{{htmlattrdef("step")}}

+ +

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+ +

For month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of step is 1 month.

+ +

 

+ +

Using month inputs

+ +

与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <input type="month">还是存在兼容性问题。

+ +

我们在往下看更多关于<input type="month">基础和更多的高级的用法

+ +

, 下面将讲有关缓解浏览器支持问题的建议 (请参阅{{anch("Handling browser support")}}).

+ +

Basic uses of month

+ +

最简单的<input type="month"> 涉及到基础的 <input> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:

+ +
<form>
+  <label for="bday-month">What month were you both in?</label>
+  <input id="bday-month" type="month" name="bday-month">
+</form>
+ +

{{ EmbedLiveSample('Basic_uses_of_month', 600, 40) }}

+ +

设置最长和最短日期

+ +

你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份1900-01 最大月份到 2017-08:

+ +
<form>
+  <label for="bday-month">What month were you both in?</label>
+  <input id="bday-month" type="month" name="bday-month"
+         min="1900-01" max="2017-08">
+</form>
+ +

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

+ +

结果是这样:

+ + + +
+

Note: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

+
+ +

Controlling input size

+ +

<input type="month"> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to CSS for sizing needs.

+ +

Validation

+ +

By default, <input type="month"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still not fill in a date and submit, or enter an invalid date (e.g. the 32th of April).

+ +

You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

+ +

Let's look at an example — here we've set minimum and maximum dates, and also made the field required:

+ +
<form>
+  <div>
+    <label for="month">What Month would you like to visit us? (Summer months only.)</label>
+    <input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Submit form">
+  </div>
+</form>
+ +

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

+ +

{{ EmbedLiveSample('Validation', 600, 120) }}

+ +

Here's'a screenshot for those of you who aren't using a supporting browser:

+ +

+ +

Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

+ +
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}
+ +
+

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

+
+ +

Handling browser support

+ +

As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the month picker on Chrome for Android looks like this:

+ +

+ +

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

+ +

The second problem is the most serious — as we mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people write dates, for example:

+ + + +

One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your month input. Even though the month input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

+ +
<form>
+  <div>
+    <label for="month">What Month would you like to visit us? (Summer months only, yyyy-mm)</label>
+    <input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required
+           pattern="[0-9]{4}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Submit form">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

+ +

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.

+ +

And what user is going to understand the pattern they need to enter the date in?

+ +

We still have a problem.

+ + + +

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the month and year in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

+ +

Examples

+ +

In this example we create two sets of UI elements for choosing dates — a native picker created with <input type="month">, and a set of two {{htmlelement("select")}} elements for choosing months/years in older browsers that don't support the native input.

+ +

{{ EmbedLiveSample('Examples', 600, 140) }}

+ +

The HTML looks like so:

+ +
<form>
+  <div class="nativeDatePicker">
+    <label for="month-visit">What Month would you like to visit us?</label>
+    <input type="month" id="month-visit" name="month-visit">
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">What Month would you like to visit us?</p>
+  <div class="fallbackDatePicker">
+    <div>
+      <span>
+        <label for="month">Month:</label>
+        <select id="month" name="month">
+          <option selected>January</option>
+          <option>February</option>
+          <option>March</option>
+          <option>April</option>
+          <option>May</option>
+          <option>June</option>
+          <option>July</option>
+          <option>August</option>
+          <option>September</option>
+          <option>October</option>
+          <option>November</option>
+          <option>December</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Year:</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+ +

The months are hardcoded (as they are always the same), while the year values are dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work.)

+ + + +

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="month">, we create a new {{htmlelement("input")}} element, set its type to month, then immediately check what its type is set to — non-supporting browsers will return text, because the date type falls back to type text. If <input type="month"> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.

+ +
// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'month';
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateYears();
+}
+
+function populateYears() {
+  // get the current year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year <select>
+  for(var i = 0; i <= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.input.input-month")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/html/element/input/range/index.html b/files/zh-cn/web/html/element/input/range/index.html new file mode 100644 index 0000000000..9450c705b2 --- /dev/null +++ b/files/zh-cn/web/html/element/input/range/index.html @@ -0,0 +1,515 @@ +--- +title: +slug: Web/HTML/Element/Input/范围 +tags: + - HTML + - 元素 + - 参考 + - 网页 + - 范围 +translation_of: Web/HTML/Element/input/range +--- +
{{HTMLRef}}
+ +

{{HTMLElement("input")}}  range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 {{HTMLElement('input/number', 'number')}}  输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

+ +
{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}
+ + + +

如果用户的浏览器不支持类型范围，它将回退并将其视为 {{HTMLElement('input/text', 'text')}} 输入。

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}A {{domxref("DOMString")}} containing the string representation of the selected numeric value; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.
事件{{event("change")}} and {{event("input")}}
支持的常用属性{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}
IDL属性list, value, 和 valueAsNumber
方法{{domxref("HTMLInputElement.stepDown", "stepDown()")}} and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

验证方式

+ +

没有可用的模式验证。 但是，执行以下形式的自动验证：

+ + + +

值

+ +

{{htmlattrxref("value", "input")}} 属性包含一个 {{domxref("DOMString")}} 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 ("").  默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是：

+ +
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
+ +

如果尝试将值设置为小于最小值，则将其设置为最小值。 类似地，尝试将值设置为大于最大值会导致将其设置为最大值。

+ +

其他属性

+ +

除了所有 {{HTMLElement("input")}} 元素共享的属性之外，范围输入还提供以下属性：

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
属性描述
{{anch("list")}}<datalist>元素的ID，其中包含可选的预定义选项
{{anch("max")}}最大允许值
{{anch("min")}}最小允许值
{{anch("step")}}步进间隔，用于用户界面和验证目的
+ +

{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

+ +

有关在支持的浏览器中如何表示范围中的选项的示例，请参见下面的带散列的标记范围控制

+ +

{{htmlattrdef("max")}}

+ +

允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过约束验证。  如果 max 属性的值不是数字，则元素没有最大值。

+ +

此值必须大于或等于min属性的值。 请参见 HTML max属性。

+ +

{{htmlattrdef("min")}}

+ +

允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 约束验证。如果为min 指定的值不是有效数字，则输入没有最小值。

+ +

该值必须小于或等于max属性的值。 请参见 HTML min属性。

+ +

{{htmlattrdef("step")}}

+ +

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+ +

range 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 min 设置为-10并将 value 设置为1.5，则1的 step 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅HTML step 属性。

+ +

非标准属性

+ + + + + + + + + + + + + + +
属性描述
{{anch("orient")}}设置范围滑块的方向。 仅限Firefox .
+ +
+
{{htmlattrdef("orient")}} {{non-standard_inline}}
+
类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， orient 属性定义范围滑块的方向。 值包括 horizontal, 表示范围是水平呈现， 和 vertical, 其中范围是垂直呈现）。
+
+ +
+

注意：以下输入属性不适用于输入范围：accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget,高度, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, 和 width. 这些属性中的任何一个（如果包含）将被忽略。

+
+ +

例子

+ +

虽然 number 类型允许用户输入带有可选约束的数字，以强制其值介于最小值和最大值之间，但它确实要求他们输入特定值。 range 输入类型使您可以在用户甚至不关心或不知道所选的特定数字值是什么的情况下，向用户询问一个值。

+ +

常用范围输入的一些情况示例：

+ + + +

通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。

+ +

指定最小和最大

+ +

默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。

+ +

例如，要要求用户输入介于-10和10之间的值，可以使用：

+ +
<input type="range" min="-10" max="10">
+ +

{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}

+ +

设置值的粒度

+ +

默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 step 的值设置为0.01:

+ +
+
<input type="range" min="5" max="10" step="0.01">
+ +

{{EmbedLiveSample("Granularity_sample1", 600, 40)}}

+
+ +

如果要接受任何值而不论扩展到小数点后多少位，都可以为{{htmlattrxref("step", "input")}} 属性指定 any 数值。

+ +
+
<input type="range" min="0" max="3.14" step="any">
+ +

{{EmbedLiveSample("Granularity_sample2", 600, 40)}}

+ +

该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。

+
+ +

添加井号和标签

+ +

HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。

+ +

范围控制模型

+ +

由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。

+ +
无装饰的范围控制
+ +

如果不指定 {{htmlattrxref("list", "input")}} 属性，或者浏览器不支持该属性，则会得到此结果。

+ + + + + + + + + + + + + + + + + + + + + +
HTML例子
+ 
+<input type="range">
+ 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}
+ +
带散列标记的范围控件
+ +

此范围控件使用的 list 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。

+ + + + + + + + + + + + + + + + + + + + + +
HTML例子
+ 
+<input type="range" list="tickmarks">
+
+<datalist id="tickmarks">
+  <option value="0"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+  <option value="40"></option>
+  <option value="50"></option>
+  <option value="60"></option>
+  <option value="70"></option>
+  <option value="80"></option>
+  <option value="90"></option>
+  <option value="100"></option>
+</datalist>
+
+ 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
+ +
具有散列标记和标签的范围控件
+ +

您可以通过向 {{htmlattrxref("label", "option")}} 元素添加 {{HTMLElement("option")}} 属性来将标签添加到您的范围控件中，这些元素对应于您希望为其添加标签的标记。

+ + + + + + + + + + + + + + + + + + + + + +
HTML例子
+ 
+<input type="range" list="tickmarks">
+
+<datalist id="tickmarks">
+  <option value="0" label="0%"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+  <option value="40"></option>
+  <option value="50" label="50%"></option>
+  <option value="60"></option>
+  <option value="70"></option>
+  <option value="80"></option>
+  <option value="90"></option>
+  <option value="100" label="100%"></option>
+</datalist>
+
+ 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
+ +
+

注意: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 none ，隐藏了标签。

+
+ +

改变方向

+ +
+

使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, Chrome bug 341071)。也许它仍在讨论中。

+ +

同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 slider-vertical, 在Firefox中使用非标准的orient 属性，或通过更改Internet Explorer和Edge的文本方向。

+ +

考虑以下范围控制：

+ +
+
<input type="range" id="volume" min="0" max="11" value="7" step="1">
+
+ +

{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}

+ +

此控件是水平的（至少对大多数主要浏览器（至少，如果不是全部）；其他控件可能有所不同）。

+ +

标准

+ +

根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：

+ +
+

CSS

+ +
#volume {
+  height: 150px;
+  width: 50px;
+}
+ +

HTML

+ +
<input type="range" id="volume" min="0" max="11" value="7" step="1">
+ +

结果

+ +

{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}

+
+
+ +

不幸的是，当前没有主流浏览器直接支持垂直范围控件。

+ +

变换：旋转（-90deg）

+ +

但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。

+ +

HTML

+ +

需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：

+ +
<div class="slider-wrapper">
+  <input type="range" min="0" max="11" value="7" step="1">
+</div>
+ +

CSS

+ +

现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。

+ +
.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+
+ +

然后是保留空间中 <input> 元素的样式信息：

+ +
.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}
+ +

控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。

+ +

{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}

+ +

外观特性

+ +

{{cssxref('appearance')}}属性具有非标准值的slider-vertical可以使滑块垂直。

+ +

HTML

+ +

我们使用与前面的示例相同的HTML：

+ +
<input type="range" min="0" max="11" value="7" step="1">
+
+ +

CSS

+ +

我们仅针对具有范围类型的输入：

+ +
input[type="range"] {
+  -webkit-appearance: slider-vertical;
+}
+ +

{{EmbedLiveSample("appearance_property", 200, 200)}}

+ +

定向属性

+ +

仅在Firefox中，有一个非标准的 orient 属性。

+ +

HTML

+ +

使用与前面示例类似的HTML，我们添加属性值为 vertical:

+ +
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
+
+ +

{{EmbedLiveSample("orient_attribute", 200, 200)}}

+ +

写作模式：bt-lr;

+ +

The {{cssxref('writing-mode')}} 属性通常不应用于出于国际化或本地化目的更改文本方向，而可以用于特殊效果。

+ +

HTML

+ +

我们使用与前面的示例相同的HTML：

+ +
<input type="range" min="0" max="11" value="7" step="1">
+
+ +

CSS

+ +

我们仅以范围为类型的输入作为目标，将写入模式从默认更改为 bt-lr, 或从下至上和从左至右：

+ +
input[type="range"] {
+  writing-mode: bt-lr;
+}
+ +

{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}

+ +

放在一起

+ +

由于上述每个示例都在不同的浏览器中工作，因此您可以将所有示例放在一个示例中，以使其在跨浏览器中工作：

+ +

HTML

+ +

对于Firefox，我们将orient属性的值保持为vertical：

+ +
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
+
+ +

CSS

+ +

对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 bt-lr, 或者从下至上，从左至右，然后添加 -webkit-appearance: slider-vertical用于所有基于-webkit的浏览器：

+ +
input[type="range"] {
+  writing-mode: bt-lr;
+  -webkit-appearance: slider-vertical;
+}
+ +

{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}

+ +

技术指标

+ + + + + + + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}{{Spec2('HTML WHATWG')}}最初的定义
{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}{{Spec2('HTML5.1')}}最初的定义
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.input.input-range")}}

+ +

另请参考

+ + diff --git "a/files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" "b/files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" deleted file mode 100644 index 9a2fbb6f2a..0000000000 --- "a/files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" +++ /dev/null @@ -1,457 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/月份 -tags: - - HTML - - Input - - 表单 -translation_of: Web/HTML/Element/input/month ---- -

{{HTMLRef}}

- -

类型为 month 的 {{htmlelement("input")}} 可以让你容易地创建一个方便输入年份或月份的一个 {{htmlelement("input")}}。

- -
{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
- - - -

这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<input type="text">.

- -

对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。

- -

- -

Edge的 month 看起来像这样的:

- -

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}一个 {{domxref("DOMString")}} 代表一个月，一年，或者是空。
Events{{event("change")}} 和 {{event("input")}}.
Supported Common Attributes{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 和 {{htmlattrxref("step", "input")}}.
IDL attributesvalue.
Methods{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
- -

Value

- -

{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("-"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.

- -

你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:

- -
<label for="bday-month">What month were you both in?</label>
-<input id="bday-month" type="month" name="bday-month" value="2017-06">
- -

{{EmbedLiveSample('value-example-1', 600, 60)}}

- -

需要注意的是显示的如期格式不同于实际的value — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 yyyy-MM。

- -

在向服务器提交上述值的时候他们看起来像这样：bday-month=1978-06.

- -

你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：

- -
var monthControl = document.querySelector('input[type="month"]');
-monthControl.value = '1978-06';
- -

{{EmbedLiveSample("value-example-2", 600, 60)}}

- -

 

- -

Additional attributes

- -

In addition to the attributes common to {{HTMLElement("input")}} elements, month inputs offer the following attributes:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeDescription
{{anch("max")}}The latest year and month to accept as a valid input
{{anch("min")}}The earliest year and month to accept as a valid input
{{anch("readonly")}}A Boolean which, if present, indicates that the input's value can't be edited
{{anch("step")}}A stepping interval to use when incrementing and decrementing the value of the input field
- -

{{htmlattrdef("max")}}

- -

The latest year and month, in the string format discussed in the {{anch("Value")}} section above, to accept. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a valid string in "yyyy-MM" format, then the element has no maximum value.

- -

This value must specify a year-month pairing later than or equal to the one specified by the min attribute.

- -

{{htmlattrdef("min")}}

- -

The latest year and month to accept, in the same "yyyy-MM" format described above. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid year and month string, the input has no minimum value.

- -

This value must be a year-month pairing which is earlier than or equal to the one specified by the max attribute.

- -

{{htmlattrdef("readonly")}}

- -

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed from JavaScript code that directly sets the value of the {{domxref("HTMLInputElement.value")}} property.

- -
-

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

-
- -

{{htmlattrdef("step")}}

- -

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

- -

For month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of step is 1 month.

- -

 

- -

Using month inputs

- -

与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <input type="month">还是存在兼容性问题。

- -

我们在往下看更多关于<input type="month">基础和更多的高级的用法

- -

, 下面将讲有关缓解浏览器支持问题的建议 (请参阅{{anch("Handling browser support")}}).

- -

Basic uses of month

- -

最简单的<input type="month"> 涉及到基础的 <input> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:

- -
<form>
-  <label for="bday-month">What month were you both in?</label>
-  <input id="bday-month" type="month" name="bday-month">
-</form>
- -

{{ EmbedLiveSample('Basic_uses_of_month', 600, 40) }}

- -

设置最长和最短日期

- -

你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份1900-01 最大月份到 2017-08:

- -
<form>
-  <label for="bday-month">What month were you both in?</label>
-  <input id="bday-month" type="month" name="bday-month"
-         min="1900-01" max="2017-08">
-</form>
- -

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

- -

结果是这样:

- - - -
-

Note: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

-
- -

Controlling input size

- -

<input type="month"> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to CSS for sizing needs.

- -

Validation

- -

By default, <input type="month"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still not fill in a date and submit, or enter an invalid date (e.g. the 32th of April).

- -

You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

- -

Let's look at an example — here we've set minimum and maximum dates, and also made the field required:

- -
<form>
-  <div>
-    <label for="month">What Month would you like to visit us? (Summer months only.)</label>
-    <input id="month" type="month" name="month"
-           min="2017-06" max="2017-09" required>
-    <span class="validity"></span>
-  </div>
-  <div>
-      <input type="submit" value="Submit form">
-  </div>
-</form>
- -

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

- -

{{ EmbedLiveSample('Validation', 600, 120) }}

- -

Here's'a screenshot for those of you who aren't using a supporting browser:

- -

- -

Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

- -
div {
-  margin-bottom: 10px;
-  position: relative;
-}
-
-input[type="number"] {
-  width: 100px;
-}
-
-input + span {
-  padding-right: 30px;
-}
-
-input:invalid+span:after {
-  position: absolute;
-  content: '✖';
-  padding-left: 5px;
-}
-
-input:valid+span:after {
-  position: absolute;
-  content: '✓';
-  padding-left: 5px;
-}
- -
-

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

-
- -

Handling browser support

- -

As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the month picker on Chrome for Android looks like this:

- -

- -

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

- -

The second problem is the most serious — as we mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people write dates, for example:

- - - -

One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your month input. Even though the month input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

- -
<form>
-  <div>
-    <label for="month">What Month would you like to visit us? (Summer months only, yyyy-mm)</label>
-    <input id="month" type="month" name="month"
-           min="2017-06" max="2017-09" required
-           pattern="[0-9]{4}-[0-9]{2}">
-    <span class="validity"></span>
-  </div>
-  <div>
-      <input type="submit" value="Submit form">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

- -

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.

- -

And what user is going to understand the pattern they need to enter the date in?

- -

We still have a problem.

- - - -

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the month and year in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

- -

Examples

- -

In this example we create two sets of UI elements for choosing dates — a native picker created with <input type="month">, and a set of two {{htmlelement("select")}} elements for choosing months/years in older browsers that don't support the native input.

- -

{{ EmbedLiveSample('Examples', 600, 140) }}

- -

The HTML looks like so:

- -
<form>
-  <div class="nativeDatePicker">
-    <label for="month-visit">What Month would you like to visit us?</label>
-    <input type="month" id="month-visit" name="month-visit">
-    <span class="validity"></span>
-  </div>
-  <p class="fallbackLabel">What Month would you like to visit us?</p>
-  <div class="fallbackDatePicker">
-    <div>
-      <span>
-        <label for="month">Month:</label>
-        <select id="month" name="month">
-          <option selected>January</option>
-          <option>February</option>
-          <option>March</option>
-          <option>April</option>
-          <option>May</option>
-          <option>June</option>
-          <option>July</option>
-          <option>August</option>
-          <option>September</option>
-          <option>October</option>
-          <option>November</option>
-          <option>December</option>
-        </select>
-      </span>
-      <span>
-        <label for="year">Year:</label>
-        <select id="year" name="year">
-        </select>
-      </span>
-    </div>
-  </div>
-</form>
- -

The months are hardcoded (as they are always the same), while the year values are dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work.)

- - - -

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="month">, we create a new {{htmlelement("input")}} element, set its type to month, then immediately check what its type is set to — non-supporting browsers will return text, because the date type falls back to type text. If <input type="month"> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.

- -
// define variables
-var nativePicker = document.querySelector('.nativeDatePicker');
-var fallbackPicker = document.querySelector('.fallbackDatePicker');
-var fallbackLabel = document.querySelector('.fallbackLabel');
-
-var yearSelect = document.querySelector('#year');
-var monthSelect = document.querySelector('#month');
-
-// hide fallback initially
-fallbackPicker.style.display = 'none';
-fallbackLabel.style.display = 'none';
-
-// test whether a new date input falls back to a text input or not
-var test = document.createElement('input');
-test.type = 'month';
-// if it does, run the code inside the if() {} block
-if(test.type === 'text') {
-  // hide the native picker and show the fallback
-  nativePicker.style.display = 'none';
-  fallbackPicker.style.display = 'block';
-  fallbackLabel.style.display = 'block';
-
-  // populate the years dynamically
-  // (the months are always the same, therefore hardcoded)
-  populateYears();
-}
-
-function populateYears() {
-  // get the current year as a number
-  var date = new Date();
-  var year = date.getFullYear();
-
-  // Make this year, and the 100 years before it available in the year <select>
-  for(var i = 0; i <= 100; i++) {
-    var option = document.createElement('option');
-    option.textContent = year-i;
-    yearSelect.appendChild(option);
-  }
-}
- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}{{Spec2('HTML WHATWG')}} 
- -

浏览器兼容性

- - - -

{{Compat("html.elements.input.input-month")}}

- -

参见

- - diff --git "a/files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" "b/files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" deleted file mode 100644 index 9450c705b2..0000000000 --- "a/files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" +++ /dev/null @@ -1,515 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/范围 -tags: - - HTML - - 元素 - - 参考 - - 网页 - - 范围 -translation_of: Web/HTML/Element/input/range ---- -
{{HTMLRef}}
- -

{{HTMLElement("input")}}  range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 {{HTMLElement('input/number', 'number')}}  输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

- -
{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}
- - - -

如果用户的浏览器不支持类型范围，它将回退并将其视为 {{HTMLElement('input/text', 'text')}} 输入。

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}A {{domxref("DOMString")}} containing the string representation of the selected numeric value; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.
事件{{event("change")}} and {{event("input")}}
支持的常用属性{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}
IDL属性list, value, 和 valueAsNumber
方法{{domxref("HTMLInputElement.stepDown", "stepDown()")}} and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
- -

验证方式

- -

没有可用的模式验证。 但是，执行以下形式的自动验证：

- - - -

值

- -

{{htmlattrxref("value", "input")}} 属性包含一个 {{domxref("DOMString")}} 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 ("").  默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是：

- -
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
-               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
- -

如果尝试将值设置为小于最小值，则将其设置为最小值。 类似地，尝试将值设置为大于最大值会导致将其设置为最大值。

- -

其他属性

- -

除了所有 {{HTMLElement("input")}} 元素共享的属性之外，范围输入还提供以下属性：

- - - - - - - - - - - - - - - - - - - - - - - - - - -
属性描述
{{anch("list")}}<datalist>元素的ID，其中包含可选的预定义选项
{{anch("max")}}最大允许值
{{anch("min")}}最小允许值
{{anch("step")}}步进间隔，用于用户界面和验证目的
- -

{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

- -

有关在支持的浏览器中如何表示范围中的选项的示例，请参见下面的带散列的标记范围控制

- -

{{htmlattrdef("max")}}

- -

允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过约束验证。  如果 max 属性的值不是数字，则元素没有最大值。

- -

此值必须大于或等于min属性的值。 请参见 HTML max属性。

- -

{{htmlattrdef("min")}}

- -

允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 约束验证。如果为min 指定的值不是有效数字，则输入没有最小值。

- -

该值必须小于或等于max属性的值。 请参见 HTML min属性。

- -

{{htmlattrdef("step")}}

- -

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

- -

range 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 min 设置为-10并将 value 设置为1.5，则1的 step 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅HTML step 属性。

- -

非标准属性

- - - - - - - - - - - - - - -
属性描述
{{anch("orient")}}设置范围滑块的方向。 仅限Firefox .
- -
-
{{htmlattrdef("orient")}} {{non-standard_inline}}
-
类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， orient 属性定义范围滑块的方向。 值包括 horizontal, 表示范围是水平呈现， 和 vertical, 其中范围是垂直呈现）。
-
- -
-

注意：以下输入属性不适用于输入范围：accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget,高度, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, 和 width. 这些属性中的任何一个（如果包含）将被忽略。

-
- -

例子

- -

虽然 number 类型允许用户输入带有可选约束的数字，以强制其值介于最小值和最大值之间，但它确实要求他们输入特定值。 range 输入类型使您可以在用户甚至不关心或不知道所选的特定数字值是什么的情况下，向用户询问一个值。

- -

常用范围输入的一些情况示例：

- - - -

通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。

- -

指定最小和最大

- -

默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。

- -

例如，要要求用户输入介于-10和10之间的值，可以使用：

- -
<input type="range" min="-10" max="10">
- -

{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}

- -

设置值的粒度

- -

默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 step 的值设置为0.01:

- -
-
<input type="range" min="5" max="10" step="0.01">
- -

{{EmbedLiveSample("Granularity_sample1", 600, 40)}}

-
- -

如果要接受任何值而不论扩展到小数点后多少位，都可以为{{htmlattrxref("step", "input")}} 属性指定 any 数值。

- -
-
<input type="range" min="0" max="3.14" step="any">
- -

{{EmbedLiveSample("Granularity_sample2", 600, 40)}}

- -

该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。

-
- -

添加井号和标签

- -

HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。

- -

范围控制模型

- -

由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。

- -
无装饰的范围控制
- -

如果不指定 {{htmlattrxref("list", "input")}} 属性，或者浏览器不支持该属性，则会得到此结果。

- - - - - - - - - - - - - - - - - - - - - -
HTML例子
- 
-<input type="range">
- 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}
- -
带散列标记的范围控件
- -

此范围控件使用的 list 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。

- - - - - - - - - - - - - - - - - - - - - -
HTML例子
- 
-<input type="range" list="tickmarks">
-
-<datalist id="tickmarks">
-  <option value="0"></option>
-  <option value="10"></option>
-  <option value="20"></option>
-  <option value="30"></option>
-  <option value="40"></option>
-  <option value="50"></option>
-  <option value="60"></option>
-  <option value="70"></option>
-  <option value="80"></option>
-  <option value="90"></option>
-  <option value="100"></option>
-</datalist>
-
- 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
- -
具有散列标记和标签的范围控件
- -

您可以通过向 {{htmlattrxref("label", "option")}} 元素添加 {{HTMLElement("option")}} 属性来将标签添加到您的范围控件中，这些元素对应于您希望为其添加标签的标记。

- - - - - - - - - - - - - - - - - - - - - -
HTML例子
- 
-<input type="range" list="tickmarks">
-
-<datalist id="tickmarks">
-  <option value="0" label="0%"></option>
-  <option value="10"></option>
-  <option value="20"></option>
-  <option value="30"></option>
-  <option value="40"></option>
-  <option value="50" label="50%"></option>
-  <option value="60"></option>
-  <option value="70"></option>
-  <option value="80"></option>
-  <option value="90"></option>
-  <option value="100" label="100%"></option>
-</datalist>
-
- 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
- -
-

注意: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 none ，隐藏了标签。

-
- -

改变方向

- -
-

使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, Chrome bug 341071)。也许它仍在讨论中。

- -

同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 slider-vertical, 在Firefox中使用非标准的orient 属性，或通过更改Internet Explorer和Edge的文本方向。

- -

考虑以下范围控制：

- -
-
<input type="range" id="volume" min="0" max="11" value="7" step="1">
-
- -

{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}

- -

此控件是水平的（至少对大多数主要浏览器（至少，如果不是全部）；其他控件可能有所不同）。

- -

标准

- -

根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：

- -
-

CSS

- -
#volume {
-  height: 150px;
-  width: 50px;
-}
- -

HTML

- -
<input type="range" id="volume" min="0" max="11" value="7" step="1">
- -

结果

- -

{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}

-
-
- -

不幸的是，当前没有主流浏览器直接支持垂直范围控件。

- -

变换：旋转（-90deg）

- -

但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。

- -

HTML

- -

需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：

- -
<div class="slider-wrapper">
-  <input type="range" min="0" max="11" value="7" step="1">
-</div>
- -

CSS

- -

现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。

- -
.slider-wrapper {
-  display: inline-block;
-  width: 20px;
-  height: 150px;
-  padding: 0;
-}
-
- -

然后是保留空间中 <input> 元素的样式信息：

- -
.slider-wrapper input {
-  width: 150px;
-  height: 20px;
-  margin: 0;
-  transform-origin: 75px 75px;
-  transform: rotate(-90deg);
-}
- -

控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。

- -

{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}

- -

外观特性

- -

{{cssxref('appearance')}}属性具有非标准值的slider-vertical可以使滑块垂直。

- -

HTML

- -

我们使用与前面的示例相同的HTML：

- -
<input type="range" min="0" max="11" value="7" step="1">
-
- -

CSS

- -

我们仅针对具有范围类型的输入：

- -
input[type="range"] {
-  -webkit-appearance: slider-vertical;
-}
- -

{{EmbedLiveSample("appearance_property", 200, 200)}}

- -

定向属性

- -

仅在Firefox中，有一个非标准的 orient 属性。

- -

HTML

- -

使用与前面示例类似的HTML，我们添加属性值为 vertical:

- -
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
-
- -

{{EmbedLiveSample("orient_attribute", 200, 200)}}

- -

写作模式：bt-lr;

- -

The {{cssxref('writing-mode')}} 属性通常不应用于出于国际化或本地化目的更改文本方向，而可以用于特殊效果。

- -

HTML

- -

我们使用与前面的示例相同的HTML：

- -
<input type="range" min="0" max="11" value="7" step="1">
-
- -

CSS

- -

我们仅以范围为类型的输入作为目标，将写入模式从默认更改为 bt-lr, 或从下至上和从左至右：

- -
input[type="range"] {
-  writing-mode: bt-lr;
-}
- -

{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}

- -

放在一起

- -

由于上述每个示例都在不同的浏览器中工作，因此您可以将所有示例放在一个示例中，以使其在跨浏览器中工作：

- -

HTML

- -

对于Firefox，我们将orient属性的值保持为vertical：

- -
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
-
- -

CSS

- -

对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 bt-lr, 或者从下至上，从左至右，然后添加 -webkit-appearance: slider-vertical用于所有基于-webkit的浏览器：

- -
input[type="range"] {
-  writing-mode: bt-lr;
-  -webkit-appearance: slider-vertical;
-}
- -

{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}

- -

技术指标

- - - - - - - - - - - - - - - - - - - - - -
规格状态评论
{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}{{Spec2('HTML WHATWG')}}最初的定义
{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}{{Spec2('HTML5.1')}}最初的定义
- -

浏览器兼容性

- - - -

{{Compat("html.elements.input.input-range")}}

- -

另请参考

- - -- cgit v1.2.3-54-g00ecf