diff --git a/files/en-us/web/css/css_writing_modes/index.md b/files/en-us/web/css/css_writing_modes/index.md index 19f3dbd3db8b95e..7140b88a6c3f7f3 100644 --- a/files/en-us/web/css/css_writing_modes/index.md +++ b/files/en-us/web/css/css_writing_modes/index.md @@ -20,6 +20,11 @@ The **CSS writing modes** module defines various international writing modes, su - {{cssxref("unicode-bidi")}} - {{cssxref("writing-mode")}} +## Guides + +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) + - : The article explains how to use the CSS {{cssxref("writing-mode")}} and {{cssxref("direction")}} properties to create and configure vertical form controls. + ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/css_writing_modes/vertical_controls/index.md b/files/en-us/web/css/css_writing_modes/vertical_controls/index.md new file mode 100644 index 000000000000000..084661f0add4d31 --- /dev/null +++ b/files/en-us/web/css/css_writing_modes/vertical_controls/index.md @@ -0,0 +1,474 @@ +--- +title: Creating vertical form controls +slug: Web/CSS/CSS_writing_modes/Vertical_controls +page-type: guide +--- + +{{CSSRef}} + +The guide explains how to use the CSS {{cssxref("writing-mode")}} and {{cssxref("direction")}} properties to create and configure vertical form controls. This includes: + +- [``](/en-US/docs/Web/HTML/Element/input/range) sliders, {{htmlelement("progress")}} bars, and {{htmlelement("meter")}} elements. +- {{htmlelement("select")}} elements. +- {{htmlelement("button")}} elements and button input types such as [``](/en-US/docs/Web/HTML/Element/input/button), [``](/en-US/docs/Web/HTML/Element/input/reset), and [``](/en-US/docs/Web/HTML/Element/input/submit). +- {{htmlelement("textarea")}} elements and text-based input types such as [``](/en-US/docs/Web/HTML/Element/input/text), [``](/en-US/docs/Web/HTML/Element/input/datetime-local), and [``](/en-US/docs/Web/HTML/Element/input/url). + +## General technique + +In modern browsers, the {{cssxref("writing-mode")}} property can be set to a vertical value to vertically display form controls with text characters that are normally horizontal (for example in Latin languages), with text displayed at a 90-degree angle from the default. Normally vertical text characters, for example in Chinese or Japanese, are unaffected in this regard. + +This is useful when creating vertical language forms. + +Specifically: + +- `writing-mode: vertical-lr` will create vertical form controls with a left-to-right block flow direction, meaning that in controls with wrapping or multiple lines of text, subsequent lines will appear to the right of previous lines. +- `writing-mode: vertical-rl` will create vertical form controls with a right-to-left block flow direction, meaning that in controls with wrapping or multiple lines of text, subsequent lines will appear to the left of previous lines. + +You could use a [transform](/en-US/docs/Web/CSS/transform) to rotate the controls by 90 degrees, but that would place the controls in their own layer and cause unintended layout side effects such as other content being overlapped. Using `writing-mode` offers a more reliable solution. + +> **Note:** While the {{cssxref("writing-mode")}} property is well supported, creating vertically-oriented form controls with `writing-mode` only gained full browser support in 2024. + +> **Note:** The experimental `sideways-lr` and `sideways-rl` values have a similar effect as `vertical-lr` and `vertical-rl` respectively, except that normally vertical text characters (for example in Chinese or Japanese) are rotated 90 degrees to display on their sides, while horizontal text characters (for example in Latin languages) are unaffected by these values. + +In addition, the {{cssxref("direction")}} property can be used to control the direction of the content inside the controls: + +- `direction: ltr` will cause the content to start at the top and flow towards the bottom. +- `direction: rtl` will cause the content to start at the bottom and flow towards the top. + +The `direction` property can be used to set the **inline base direction** — the primary direction in which content is ordered on a line, which defines on which sides the "start" and "end" of a line are. For text-based form controls the difference is obvious — the flow of text starts at the top or bottom. In non-text-based controls such as range sliders, `direction` sets the direction in which the control is drawn. For example, including `direction: ltr` on a vertical slider sets the lowest value at the top of the slider and the highest value at the bottom of the slider. + +The sections below show how to create different types of vertical form control, along with examples of each. Consult the browser compatibility information on each of the linked reference pages to find out the exact support information for each type. + +## Range sliders, meters, and progress bars + +Let's have a look at creating vertical range sliders, meters, and progress bars. + +### Basic example + +A typical set of visual [``](/en-US/docs/Web/HTML/Element/input/range) slider, {{htmlelement("progress")}}, and {{htmlelement("meter")}} controls is created like this: + +```html +
+ + + at 50/100 + + 70% +
+``` + +> **Note:** Best practice is to include a {{htmlelement("label")}} element for each form control, to associate a meaningful text description with each field for accessibility purposes (see [Meaningful text labels](/en-US/docs/Learn/Accessibility/HTML#meaningful_text_labels) for more information). We haven't done that here, as this article focuses purely on aspects of the form controls' visual rendering, but you should make sure you do so in production code. + +To display the controls vertically, we can use CSS like this: + +```css +input[type="range"], +meter, +progress { + margin-block-end: 20px; + writing-mode: vertical-lr; +} +``` + +{{cssxref("writing-mode", "writing-mode: vertical-lr")}} (and `vertical-rl`) causes the controls to be displayed vertically in modern browsers. + +The result of this looks like so: + +{{ EmbedLiveSample("Basic example", "100%", "170") }} + +### Drawing the control from bottom to top + +By default, the controls have a {{cssxref("direction")}} value of `ltr`. This causes your sliders, meters, and progress bars to be drawn from top to bottom, as seen above. + +You can change this by setting `direction: rtl` — this causes them to be drawn from bottom to top instead: + +```html hidden +
+ + + at 50/100 + + 70% +
+``` + +```css +input[type="range"], +meter, +progress { + margin-block-end: 20px; + writing-mode: vertical-lr; + direction: rtl; +} +``` + +The result of this looks like so: + +{{ EmbedLiveSample("Drawing the control from bottom to top", "100%", "170") }} + +### Creating vertical range sliders in older browsers + +In older browsers that do not support the creation of vertical form controls with `writing-mode` and `direction`, there are limited alternatives available. The following only work on ``, causing the text to flow from bottom to top — they have no effect on `` and `` elements: + +- The non-standard [`appearance: slider-vertical`](/en-US/docs/Web/CSS/appearance) property can be used in older versions of Safari and Chrome. +- The non-standard `orient="vertical"` attribute can be added to the `` element itself in older versions of Firefox. + +The HTML for this example includes an [``](/en-US/docs/Web/HTML/Element/input/range) slider only, with `orient="vertical"` added to make it display vertically in older Firefox versions: + +```html +
+ +
+``` + +To cause the controls to also display vertically in older versions of Chrome and Safari, we can use `appearance: slider-vertical`: + +```css +input[type="range"] { + margin-block-end: 20px; + appearance: slider-vertical; +} +``` + +The result looks like so: + +{{ EmbedLiveSample("Creating vertical range sliders in older browsers", "100%", "190") }} + +## Select elements + +This section shows how to handle vertical {{htmlelement("select")}} elements. + +### Select basic example + +The below HTML creates two ` + + + + + + + + +``` + +To display the controls vertically, we can use CSS like this: + +```css +select { + inline-size: 100px; + margin-block-end: 20px; + writing-mode: vertical-rl; +} +``` + +The result of this looks like so: + +{{ EmbedLiveSample("Select basic example", "100%", "130") }} + +### Adjusting text direction and option order + +Again, it is possible to use a {{cssxref("direction")}} property value of `rtl` to set the text direction to go from bottom to top, instead of the default direction of top to bottom. + +It is also worth noting that in the above example, the inline direction for the select options goes from right to left because we used `writing-mode: vertical-rl`. If we use `writing-mode: vertical-lr` instead, the ` + + + + + + +
+

direction: rtl & writing-mode: vertical-lr

+ +
+
+

writing-mode: vertical-rl

+ +
+ +``` + +In the CSS for this example, we set the following properties on the three listboxes: + +1. `writing-mode: vertical-rl`, displaying just like in the previous example — text flowing top-to-bottom, and options displaying right-to-left. +2. `writing-mode: vertical-rl` and `direction: rtl`, with the options going from right-to-left but reversing the text flow from bottom-to-top. +3. `writing-mode: vertical-lr`, with the text going from top-to-bottom while reversing the option order from left-to-right. + +```css hidden +form { + box-sizing: border-box; + display: flex; + gap: 20px; + font-family: sans-serif; +} + +h2 { + margin-top: 0; + font-size: 1rem; + text-align: center; + flex: 1 0 100%; +} + +div { + margin-bottom: 20px; + flex: 1; + display: flex; + align-items: flex-start; + justify-content: space-around; + flex-flow: row wrap; +} +``` + +```css +select { + inline-size: 100px; + margin-block-end: 20px; + writing-mode: vertical-rl; +} + +.direction select { + direction: rtl; +} + +.reverse-option-order select { + writing-mode: vertical-lr; +} +``` + +The result looks like so: + +{{ EmbedLiveSample("Adjusting text direction and option order", "100%", "200") }} + +## Buttons + +This section shows how to handle vertical {{htmlelement("button")}} elements. Note that while we have only used a ` +``` + +To display the buttons vertically, we can use CSS like this: + +```css +button { + inline-size: 100px; + margin-block-end: 20px; + writing-mode: vertical-rl; +} +``` + +The result looks like so: + +{{ EmbedLiveSample("Basic button example", "100%", "130") }} + +### Adjusting button text line order + +When you swap the `writing-mode` value of `vertical-rl` to `vertical-lr`, subsequent lines of text will appear to the right of previous lines, rather than the left. + +This example uses two copies of the three-text-line button we saw in the previous example, so you can easily see the effects of changing the writing mode: + +```html +
+

writing-mode: vertical-lr

+ +
+
+

writing-mode: vertical-rl

+ +
+``` + +In the CSS, we set `writing-mode: vertical-rl` on the first button to lay out the line order from right to left. On the second button, we set `writing-mode: vertical-lr` to reverse the line order — left to right: + +```css hidden +body { + box-sizing: border-box; + display: flex; + gap: 20px; + font-family: sans-serif; +} + +h2 { + margin-top: 0; + font-size: 1rem; + text-align: center; + flex: 1 0 100%; +} + +div { + margin-bottom: 20px; + flex: 1; + display: flex; + align-items: flex-start; + justify-content: space-around; + flex-flow: row wrap; +} +``` + +```css +button { + inline-size: 100px; + margin-block-end: 20px; + writing-mode: vertical-rl; +} + +.reverse-line-order button { + writing-mode: vertical-lr; +} +``` + +The result looks like so: + +{{ EmbedLiveSample("Adjusting button text line order", "100%", "160") }} + +## Text-based form controls + +Last but not least, we'll look at handling vertical {{htmlelement("textarea")}}s and textual `` types. Note that, while the only `` type we are including is an `` element in the examples below, the behavior is the same for other textual [``](/en-US/docs/Web/HTML/Element/input) types: [`password`](/en-US/docs/Web/HTML/Element/input/button), [`number`](/en-US/docs/Web/HTML/Element/input/reset), [`url`](/en-US/docs/Web/HTML/Element/input/submit), etc. + +### Basic text input and textarea example + +The below HTML creates a ` + + +``` + +To display the input and textarea vertically, we can use CSS like this: + +```css +textarea, +input[type="text"] { + inline-size: 100px; + margin-block-end: 20px; + writing-mode: vertical-rl; +} +``` + +The result looks like so: + +{{ EmbedLiveSample("Basic text input and textarea example", "100%", "130") }} + +### Adjusting text direction and line layout order + +You can use a {{cssxref("direction")}} property value of `rtl` to change the text direction from the default top-to-bottom to bottom-to-top. You can also set `writing-mode` to `vertical-lr` instead of `vertical-rl`, to cause multiple lines of text in ` + + +
+

direction: rtl & writing-mode: vertical-lr

+ + +
+
+

writing-mode: vertical-rl

+ + +
+ +``` + +In the CSS, we set the following properties on the three sets of text controls: + +1. `writing-mode: vertical-rl` to make it display just like in the previous example — text flowing top-to-bottom, and lines flowing right-to-left. +2. `writing-mode: vertical-rl` and `direction: rtl` to flow the lines from right-to-left but reverse the text flow from bottom-to-top. +3. `writing-mode: vertical-lr` to flow the text top-to-bottom but reverse the flow of lines — left-to-right. Note that this has no effect on `` elements, as they are always single lines. + +```css hidden +form { + box-sizing: border-box; + display: flex; + gap: 20px; + font-family: sans-serif; +} + +h2 { + margin-top: 0; + font-size: 1rem; + text-align: center; + flex: 1 0 100%; +} + +div { + margin-bottom: 20px; + flex: 1; + display: flex; + align-items: flex-start; + justify-content: space-around; + flex-flow: row wrap; +} +``` + +```css +textarea, +input[type="text"] { + inline-size: 100px; + margin-block-end: 20px; + writing-mode: vertical-rl; +} + +.direction textarea, +.direction input[type="text"] { + writing-mode: vertical-rl; + direction: rtl; +} + +.reverse-line-order textarea, +.reverse-line-order input[type="text"] { + writing-mode: vertical-lr; +} +``` + +The result looks like so: + +{{ EmbedLiveSample("Adjusting text direction and line layout order", "100%", "180") }} + +## See also + +- The [``](/en-US/docs/Web/HTML/Element/input) element. +- Other relevant elements: {{htmlelement("button")}}, {{htmlelement("meter")}}, {{htmlelement("progress")}}, and {{htmlelement("select")}}. +- [Handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +- [Styling web forms](/en-US/docs/Learn/Forms/Styling_web_forms) diff --git a/files/en-us/web/css/direction/index.md b/files/en-us/web/css/direction/index.md index 382e73a73c1e45a..8b5fdad36e60dec 100644 --- a/files/en-us/web/css/direction/index.md +++ b/files/en-us/web/css/direction/index.md @@ -93,3 +93,4 @@ blockquote { - {{Cssxref("unicode-bidi")}} - {{Cssxref("writing-mode")}} - The HTML [`dir`](/en-US/docs/Web/HTML/Global_attributes#dir) global attribute +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) diff --git a/files/en-us/web/css/writing-mode/index.md b/files/en-us/web/css/writing-mode/index.md index a6945fa73eaf3df..163427922e34acd 100644 --- a/files/en-us/web/css/writing-mode/index.md +++ b/files/en-us/web/css/writing-mode/index.md @@ -297,3 +297,4 @@ span { - [CSS logical properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) - [Styling vertical text (Chinese, Japanese, Korean and Mongolian)](https://www.w3.org/International/articles/vertical-text/) on W3.org (2022) - [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) diff --git a/files/en-us/web/html/element/input/email/index.md b/files/en-us/web/html/element/input/email/index.md index 6834d0f059e9378..1868e46c8195070 100644 --- a/files/en-us/web/html/element/input/email/index.md +++ b/files/en-us/web/html/element/input/email/index.md @@ -399,7 +399,6 @@ As an added touch, the {{HTMLElement("label")}} element is used to establish a l - [``](/en-US/docs/Web/HTML/Element/input/tel) - [``](/en-US/docs/Web/HTML/Element/input/url) - Attributes: - - [`list`](/en-US/docs/Web/HTML/Element/input#list) - [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) - [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength) @@ -408,5 +407,4 @@ As an added touch, the {{HTMLElement("label")}} element is used to establish a l - [`placeholder`](/en-US/docs/Web/HTML/Element/input#placeholder) - [`readonly`](/en-US/docs/Web/HTML/Attributes/readonly) - [`size`](/en-US/docs/Web/HTML/Attributes/size) - - [Compatibility of CSS properties](/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index 6e3db57ca9803dd..1bb19cd4081c3a7 100644 --- a/files/en-us/web/html/element/input/index.md +++ b/files/en-us/web/html/element/input/index.md @@ -695,7 +695,7 @@ The following non-standard attributes are also available on some browsers. As a - `orient` {{non-standard_inline}} - - : Similar to the -moz-orient non-standard CSS property impacting the {{htmlelement('progress')}} and {{htmlelement('meter')}} elements, the `orient` attribute defines the orientation of the range slider. Values include `horizontal`, meaning the range is rendered horizontally, and `vertical`, where the range is rendered vertically. + - : Similar to the -moz-orient non-standard CSS property impacting the {{htmlelement('progress')}} and {{htmlelement('meter')}} elements, the `orient` attribute defines the orientation of the range slider. Values include `horizontal`, meaning the range is rendered horizontally, and `vertical`, where the range is rendered vertically. See [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) for a modern approach to creating vertical form controls. - `results` {{non-standard_inline}} @@ -1431,3 +1431,4 @@ Interactive elements such as form input should provide an area large enough that - [Styling HTML forms](/en-US/docs/Learn/Forms/Styling_web_forms) - [Advanced styling for HTML forms](/en-US/docs/Learn/Forms/Advanced_form_styling) - [CSS property compatibility table](/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls) +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) diff --git a/files/en-us/web/html/element/input/range/index.md b/files/en-us/web/html/element/input/range/index.md index 0e9ec4d29204c29..f50086b5314781d 100644 --- a/files/en-us/web/html/element/input/range/index.md +++ b/files/en-us/web/html/element/input/range/index.md @@ -41,6 +41,8 @@ If an attempt is made to set the value lower than the minimum, it is set to the In addition to the attributes shared by all {{HTMLElement("input")}} elements, range inputs offer the following attributes. +> **Note:** The following input attributes do not apply to the input range: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, and `src`. Any of these attributes, if included, will be ignored. + ### list The value of the `list` attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("datalist")}} provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the [`type`](/en-US/docs/Web/HTML/Element/input#type) are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. @@ -71,14 +73,12 @@ The `step` attribute can also be set to the `any` string value. This `step` valu The default stepping value for `range` inputs is 1, allowing only integers to be entered, _unless_ the stepping base is not an integer; for example, if you set `min` to -10 and `value` to 1.5, then a `step` of 1 will allow only values such as 1.5, 2.5, 3.5,… in the positive direction and -0.5, -1.5, -2.5,… in the negative direction. See the [HTML `step` attribute](/en-US/docs/Web/HTML/Attributes/step). -## Non-standard Attributes +## Non-standard attributes ### orient Similar to the -moz-orient non-standard CSS property impacting the {{htmlelement('progress')}} and {{htmlelement('meter')}} elements, the `orient` attribute defines the orientation of the range slider. Values include `horizontal`, meaning the range is rendered horizontally, and `vertical`, where the range is rendered vertically. -> **Note:** The following input attributes do not apply to the input range: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, and `src`. Any of these attributes, if included, will be ignored. - ## Examples While the `number` type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The `range` input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is. @@ -249,92 +249,25 @@ input[type="range"] { By default, browsers render range inputs as sliders with the knob sliding left and right. -To create a vertical range, wherein the knob slides up and down, set the CSS {{cssxref('appearance')}} property to `slider-vertical` and include the non-standard `orient` attribute for Firefox. - -#### Horizontal range control - -Consider this range control: - -```html - -``` - -{{EmbedLiveSample("Horizontal_range_control", 200, 40)}} - -This control is horizontal (at least on most if not all major browsers; others might vary). - -#### Using the appearance property - -The {{cssxref('appearance')}} property has a non-standard value of `slider-vertical` that, well, makes sliders vertical. - -We use the same HTML as in the previous examples: - -```html - -``` - -We target just the inputs with a type of range: - -```css -input[type="range"] { - appearance: slider-vertical; -} -``` - -{{EmbedLiveSample("Using_the_appearance_property", 200, 200)}} - -#### Using the orient attribute - -In Firefox only, there is a non-standard `orient` property. - -Use similar HTML as in the previous examples, we add the attribute with a value of `vertical`: - -```html - -``` - -{{EmbedLiveSample("Using_the_orient_attribute", 200, 200)}} - -#### writing-mode: bt-lr +To create a vertical range wherein the thumb slides up and down, set the {{cssxref("writing-mode")}} property with a value of either `vertical-rl` or `vertical-lr`: -The {{cssxref('writing-mode')}} property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects. - -We use the same HTML as in the previous examples: - -```html - +```html hidden + ``` -We target just the inputs with a type of range, changing the writing mode from the default to `bt-lr`, or bottom-to-top and left-to-right: - ```css input[type="range"] { - writing-mode: bt-lr; + writing-mode: vertical-lr; } ``` -{{EmbedLiveSample("writing-mode_bt-lr", 200, 40)}} - -#### Putting it all together +This causes the range slider to render vertically: -As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser: +{{EmbedLiveSample("Creating vertical range controls", 200, 200)}} -We keep the `orient` attribute with a value of `vertical` for Firefox: - -```html - -``` - -We target just the `input`s with a `type` of `range` and `orient` set to `vertical`, changing the `writing-mode` from the default to `bt-lr`, or bottom-to-top and left-to-right, for pre-Blink versions of Edge, and add `appearance: slider-vertical` which is supported in Blink and Webkit browsers: - -```css -input[type="range"][orient="vertical"] { - writing-mode: bt-lr; - appearance: slider-vertical; -} -``` +You can also set the CSS {{cssxref('appearance')}} property to the non-standard `slider-vertical` value if you want to support older versions of Chrome and Safari, and include the non-standard `orient="vertical"` attribute to support older versions of Firefox. -{{EmbedLiveSample("Putting_it_all_together", 200, 200)}} +See [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) for examples. ## Technical summary @@ -407,5 +340,6 @@ input[type="range"][orient="vertical"] { - [``](/en-US/docs/Web/HTML/Element/input/number) - {{domxref('validityState.rangeOverflow')}} and {{domxref('validityState.rangeUnderflow')}} - [Controlling multiple parameters with ConstantSourceNode](/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) - [Styling the range element](https://css-tricks.com/sliding-nightmare-understanding-range-input/) - [Compatibility of CSS properties](/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/en-us/web/html/element/input/tel/index.md b/files/en-us/web/html/element/input/tel/index.md index 28466cff9d30280..c99240024250ba7 100644 --- a/files/en-us/web/html/element/input/tel/index.md +++ b/files/en-us/web/html/element/input/tel/index.md @@ -531,8 +531,6 @@ input:valid + span::after { - [HTML forms guide](/en-US/docs/Learn/Forms) - {{HTMLElement("input")}} - - [``](/en-US/docs/Web/HTML/Element/input/text) - [``](/en-US/docs/Web/HTML/Element/input/email) - - [Compatibility of CSS properties](/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/en-us/web/html/element/meter/index.md b/files/en-us/web/html/element/meter/index.md index 5db3679a7197bac..895380f945404a5 100644 --- a/files/en-us/web/html/element/meter/index.md +++ b/files/en-us/web/html/element/meter/index.md @@ -145,5 +145,6 @@ On Google Chrome, the resulting meter looks like this: ## See also +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) - {{HTMLElement("progress")}} - {{cssxref("::-webkit-meter-bar")}}, {{cssxref("::-webkit-meter-inner-element") }}, {{cssxref("::-webkit-meter-even-less-good-value")}}, {{cssxref("::-webkit-meter-optimum-value")}}, {{cssxref("::-webkit-meter-suboptimum-value")}}: non-standard pseudo-elements diff --git a/files/en-us/web/html/element/progress/index.md b/files/en-us/web/html/element/progress/index.md index 9c3213e787a1729..b7a069eb78fa45e 100644 --- a/files/en-us/web/html/element/progress/index.md +++ b/files/en-us/web/html/element/progress/index.md @@ -137,6 +137,7 @@ If the `` element is describing the loading progress of a section of a ## See also +- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls) - {{htmlelement("meter")}} - {{ cssxref(":indeterminate") }} - {{ cssxref("-moz-orient") }} diff --git a/files/en-us/web/html/element/textarea/index.md b/files/en-us/web/html/element/textarea/index.md index 48c05316f28bf0c..a4e209a5bc7ab68 100644 --- a/files/en-us/web/html/element/textarea/index.md +++ b/files/en-us/web/html/element/textarea/index.md @@ -312,18 +312,17 @@ textarea { ## See also -Other form-related elements: - -- {{ HTMLElement("form") }} -- {{ HTMLElement("button") }} -- {{ HTMLElement("datalist") }} -- {{ HTMLElement("legend") }} -- {{ HTMLElement("label") }} -- {{ HTMLElement("select") }} -- {{ HTMLElement("optgroup") }} -- {{ HTMLElement("option") }} -- {{ HTMLElement("input") }} -- {{ HTMLElement("fieldset") }} -- {{ HTMLElement("output") }} -- {{ HTMLElement("progress") }} -- {{ HTMLElement("meter") }} +- Other form-related elements: + - {{ HTMLElement("form") }} + - {{ HTMLElement("button") }} + - {{ HTMLElement("datalist") }} + - {{ HTMLElement("legend") }} + - {{ HTMLElement("label") }} + - {{ HTMLElement("select") }} + - {{ HTMLElement("optgroup") }} + - {{ HTMLElement("option") }} + - {{ HTMLElement("input") }} + - {{ HTMLElement("fieldset") }} + - {{ HTMLElement("output") }} + - {{ HTMLElement("progress") }} + - {{ HTMLElement("meter") }}