mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 16:50:00 +02:00
Add v4.5.1 docs (#31409)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/forms/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -538,7 +539,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Forms</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/forms.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Forms</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -546,7 +550,7 @@
|
||||
|
||||
<p>Bootstrap’s form controls expand on <a href="/docs/4.5/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
|
||||
|
||||
<p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
|
||||
<p>Be sure to use an appropriate <code class="language-plaintext highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="language-plaintext highlighter-rouge">email</code> for email address or <code class="language-plaintext highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
|
||||
|
||||
<p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.</p>
|
||||
|
||||
@@ -587,9 +591,9 @@
|
||||
|
||||
<h2 id="form-controls">Form controls</h2>
|
||||
|
||||
<p>Textual form controls—like <code class="highlighter-rouge"><input></code>s, <code class="highlighter-rouge"><select></code>s, and <code class="highlighter-rouge"><textarea></code>s—are styled with the <code class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||||
<p>Textual form controls—like <code class="language-plaintext highlighter-rouge"><input></code>s, <code class="language-plaintext highlighter-rouge"><select></code>s, and <code class="language-plaintext highlighter-rouge"><textarea></code>s—are styled with the <code class="language-plaintext highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||||
|
||||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="highlighter-rouge"><select></code>s.</p>
|
||||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="language-plaintext highlighter-rouge"><select></code>s.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -654,7 +658,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>For file inputs, swap the <code class="highlighter-rouge">.form-control</code> for <code class="highlighter-rouge">.form-control-file</code>.</p>
|
||||
<p>For file inputs, swap the <code class="language-plaintext highlighter-rouge">.form-control</code> for <code class="language-plaintext highlighter-rouge">.form-control-file</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -673,7 +677,7 @@
|
||||
|
||||
<h3 id="sizing">Sizing</h3>
|
||||
|
||||
<p>Set heights using classes like <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||||
<p>Set heights using classes like <code class="language-plaintext highlighter-rouge">.form-control-lg</code> and <code class="language-plaintext highlighter-rouge">.form-control-sm</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" />
|
||||
@@ -707,7 +711,7 @@
|
||||
|
||||
<h3 id="readonly">Readonly</h3>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||||
<p>Add the <code class="language-plaintext highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<input class="form-control" type="text" placeholder="Readonly input here..." readonly="" />
|
||||
@@ -716,7 +720,7 @@
|
||||
|
||||
<h3 id="readonly-plain-text">Readonly plain text</h3>
|
||||
|
||||
<p>If you want to have <code class="highlighter-rouge"><input readonly></code> elements in your form styled as plain text, use the <code class="highlighter-rouge">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
|
||||
<p>If you want to have <code class="language-plaintext highlighter-rouge"><input readonly></code> elements in your form styled as plain text, use the <code class="language-plaintext highlighter-rouge">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -776,7 +780,7 @@
|
||||
|
||||
<h2 id="range-inputs">Range Inputs</h2>
|
||||
|
||||
<p>Set horizontally scrollable range inputs using <code class="highlighter-rouge">.form-control-range</code>.</p>
|
||||
<p>Set horizontally scrollable range inputs using <code class="language-plaintext highlighter-rouge">.form-control-range</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -795,15 +799,15 @@
|
||||
|
||||
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||||
|
||||
<p>Default checkboxes and radios are improved upon with the help of <code class="highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||||
<p>Default checkboxes and radios are improved upon with the help of <code class="language-plaintext highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||||
|
||||
<p>Disabled checkboxes and radios are supported. The <code class="highlighter-rouge">disabled</code> attribute will apply a lighter color to help indicate the input’s state.</p>
|
||||
<p>Disabled checkboxes and radios are supported. The <code class="language-plaintext highlighter-rouge">disabled</code> attribute will apply a lighter color to help indicate the input’s state.</p>
|
||||
|
||||
<p>Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <code class="highlighter-rouge"><input></code>s and <code class="highlighter-rouge"><label></code>s are sibling elements as opposed to an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge"><label></code>. This is slightly more verbose as you must specify <code class="highlighter-rouge">id</code> and <code class="highlighter-rouge">for</code> attributes to relate the <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code>.</p>
|
||||
<p>Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <code class="language-plaintext highlighter-rouge"><input></code>s and <code class="language-plaintext highlighter-rouge"><label></code>s are sibling elements as opposed to an <code class="language-plaintext highlighter-rouge"><input></code> within a <code class="language-plaintext highlighter-rouge"><label></code>. This is slightly more verbose as you must specify <code class="language-plaintext highlighter-rouge">id</code> and <code class="language-plaintext highlighter-rouge">for</code> attributes to relate the <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><label></code>.</p>
|
||||
|
||||
<h3 id="default-stacked">Default (stacked)</h3>
|
||||
|
||||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="language-plaintext highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
@@ -873,7 +877,7 @@
|
||||
|
||||
<h3 id="inline">Inline</h3>
|
||||
|
||||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="language-plaintext highlighter-rouge">.form-check-inline</code> to any <code class="language-plaintext highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check form-check-inline">
|
||||
@@ -931,7 +935,7 @@
|
||||
|
||||
<h3 id="without-labels">Without labels</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.position-static</code> to inputs within <code class="highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using <code class="highlighter-rouge">aria-label</code>).</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.position-static</code> to inputs within <code class="language-plaintext highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using <code class="language-plaintext highlighter-rouge">aria-label</code>).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
@@ -950,11 +954,11 @@
|
||||
|
||||
<h2 id="layout">Layout</h2>
|
||||
|
||||
<p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code class="highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
|
||||
<p>Since Bootstrap applies <code class="language-plaintext highlighter-rouge">display: block</code> and <code class="language-plaintext highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
|
||||
|
||||
<h3 id="form-groups">Form groups</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies <code class="highlighter-rouge">margin-bottom</code>, but it picks up additional styles in <code class="highlighter-rouge">.form-inline</code> as needed. Use it with <code class="highlighter-rouge"><fieldset></code>s, <code class="highlighter-rouge"><div></code>s, or nearly any other element.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies <code class="language-plaintext highlighter-rouge">margin-bottom</code>, but it picks up additional styles in <code class="language-plaintext highlighter-rouge">.form-inline</code> as needed. Use it with <code class="language-plaintext highlighter-rouge"><fieldset></code>s, <code class="language-plaintext highlighter-rouge"><div></code>s, or nearly any other element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1008,7 +1012,7 @@
|
||||
|
||||
<h4 id="form-row">Form row</h4>
|
||||
|
||||
<p>You may also swap <code class="highlighter-rouge">.row</code> for <code class="highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
|
||||
<p>You may also swap <code class="language-plaintext highlighter-rouge">.row</code> for <code class="language-plaintext highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1132,9 +1136,9 @@
|
||||
|
||||
<h4 id="horizontal-form">Horizontal form</h4>
|
||||
|
||||
<p>Create horizontal forms with the grid by adding the <code class="highlighter-rouge">.row</code> class to form groups and using the <code class="highlighter-rouge">.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code class="highlighter-rouge">.col-form-label</code> to your <code class="highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated form controls.</p>
|
||||
<p>Create horizontal forms with the grid by adding the <code class="language-plaintext highlighter-rouge">.row</code> class to form groups and using the <code class="language-plaintext highlighter-rouge">.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code class="language-plaintext highlighter-rouge">.col-form-label</code> to your <code class="language-plaintext highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated form controls.</p>
|
||||
|
||||
<p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the <code class="highlighter-rouge">padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>
|
||||
<p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the <code class="language-plaintext highlighter-rouge">padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1251,7 +1255,7 @@
|
||||
|
||||
<h5 id="horizontal-form-label-sizing">Horizontal form label sizing</h5>
|
||||
|
||||
<p>Be sure to use <code class="highlighter-rouge">.col-form-label-sm</code> or <code class="highlighter-rouge">.col-form-label-lg</code> to your <code class="highlighter-rouge"><label></code>s or <code class="highlighter-rouge"><legend></code>s to correctly follow the size of <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||||
<p>Be sure to use <code class="language-plaintext highlighter-rouge">.col-form-label-sm</code> or <code class="language-plaintext highlighter-rouge">.col-form-label-lg</code> to your <code class="language-plaintext highlighter-rouge"><label></code>s or <code class="language-plaintext highlighter-rouge"><legend></code>s to correctly follow the size of <code class="language-plaintext highlighter-rouge">.form-control-lg</code> and <code class="language-plaintext highlighter-rouge">.form-control-sm</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1298,7 +1302,7 @@
|
||||
|
||||
<h4 id="column-sizing">Column sizing</h4>
|
||||
|
||||
<p>As shown in the previous examples, our grid system allows you to place any number of <code class="highlighter-rouge">.col</code>s within a <code class="highlighter-rouge">.row</code> or <code class="highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code class="highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code class="highlighter-rouge">.col-7</code>.</p>
|
||||
<p>As shown in the previous examples, our grid system allows you to place any number of <code class="language-plaintext highlighter-rouge">.col</code>s within a <code class="language-plaintext highlighter-rouge">.row</code> or <code class="language-plaintext highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code class="language-plaintext highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code class="language-plaintext highlighter-rouge">.col-7</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1331,7 +1335,7 @@
|
||||
|
||||
<h4 id="auto-sizing">Auto-sizing</h4>
|
||||
|
||||
<p>The example below uses a flexbox utility to vertically center the contents and changes <code class="highlighter-rouge">.col</code> to <code class="highlighter-rouge">.col-auto</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>
|
||||
<p>The example below uses a flexbox utility to vertically center the contents and changes <code class="language-plaintext highlighter-rouge">.col</code> to <code class="language-plaintext highlighter-rouge">.col-auto</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1504,15 +1508,15 @@
|
||||
|
||||
<h3 id="inline-forms">Inline forms</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.form-inline</code> class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.form-inline</code> class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.</p>
|
||||
|
||||
<ul>
|
||||
<li>Controls are <code class="highlighter-rouge">display: flex</code>, collapsing any HTML white space and allowing you to provide alignment control with <a href="/docs/4.5/utilities/spacing/">spacing</a> and <a href="/docs/4.5/utilities/flex/">flexbox</a> utilities.</li>
|
||||
<li>Controls and input groups receive <code class="highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li>
|
||||
<li>Controls are <code class="language-plaintext highlighter-rouge">display: flex</code>, collapsing any HTML white space and allowing you to provide alignment control with <a href="/docs/4.5/utilities/spacing/">spacing</a> and <a href="/docs/4.5/utilities/flex/">flexbox</a> utilities.</li>
|
||||
<li>Controls and input groups receive <code class="language-plaintext highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="language-plaintext highlighter-rouge">width: 100%</code>.</li>
|
||||
<li>Controls <strong>only appear inline in viewports that are at least 576px wide</strong> to account for narrow viewports on mobile devices.</li>
|
||||
</ul>
|
||||
|
||||
<p>You may need to manually address the width and alignment of individual form controls with <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include a <code class="highlighter-rouge"><label></code> with each form control, even if you need to hide it from non-screenreader visitors with <code class="highlighter-rouge">.sr-only</code>.</p>
|
||||
<p>You may need to manually address the width and alignment of individual form controls with <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include a <code class="language-plaintext highlighter-rouge"><label></code> with each form control, even if you need to hide it from non-screenreader visitors with <code class="language-plaintext highlighter-rouge">.sr-only</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
@@ -1598,20 +1602,20 @@
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="alternatives-to-hidden-labels">Alternatives to hidden labels</h5>
|
||||
<p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the <code class="highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code class="highlighter-rouge">aria-label</code>, <code class="highlighter-rouge">aria-labelledby</code> or <code class="highlighter-rouge">title</code> attribute. If none of these are present, assistive technologies may resort to using the <code class="highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code class="highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
<p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the <code class="language-plaintext highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code class="language-plaintext highlighter-rouge">aria-label</code>, <code class="language-plaintext highlighter-rouge">aria-labelledby</code> or <code class="language-plaintext highlighter-rouge">title</code> attribute. If none of these are present, assistive technologies may resort to using the <code class="language-plaintext highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code class="language-plaintext highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="help-text">Help text</h2>
|
||||
|
||||
<p>Block-level help text in forms can be created using <code class="highlighter-rouge">.form-text</code> (previously known as <code class="highlighter-rouge">.help-block</code> in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like <code class="highlighter-rouge">.text-muted</code>.</p>
|
||||
<p>Block-level help text in forms can be created using <code class="language-plaintext highlighter-rouge">.form-text</code> (previously known as <code class="language-plaintext highlighter-rouge">.help-block</code> in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like <code class="language-plaintext highlighter-rouge">.text-muted</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="associating-help-text-with-form-controls">Associating help text with form controls</h5>
|
||||
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code class="highlighter-rouge">aria-describedby</code> attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.</p>
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code class="language-plaintext highlighter-rouge">aria-describedby</code> attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.</p>
|
||||
</div>
|
||||
|
||||
<p>Help text below inputs can be styled with <code class="highlighter-rouge">.form-text</code>. This class includes <code class="highlighter-rouge">display: block</code> and adds some top margin for easy spacing from the inputs above.</p>
|
||||
<p>Help text below inputs can be styled with <code class="language-plaintext highlighter-rouge">.form-text</code>. This class includes <code class="language-plaintext highlighter-rouge">display: block</code> and adds some top margin for easy spacing from the inputs above.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="inputPassword5">Password</label>
|
||||
@@ -1626,7 +1630,7 @@
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
<span class="nt"></small></span></code></pre></figure>
|
||||
|
||||
<p>Inline text can use any typical inline HTML element (be it a <code class="highlighter-rouge"><small></code>, <code class="highlighter-rouge"><span></code>, or something else) with nothing more than a utility class.</p>
|
||||
<p>Inline text can use any typical inline HTML element (be it a <code class="language-plaintext highlighter-rouge"><small></code>, <code class="language-plaintext highlighter-rouge"><span></code>, or something else) with nothing more than a utility class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
@@ -1651,11 +1655,11 @@
|
||||
|
||||
<h2 id="disabled-forms">Disabled forms</h2>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||||
<p>Add the <code class="language-plaintext highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code class="highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||||
<p>Add the <code class="language-plaintext highlighter-rouge">disabled</code> attribute to a <code class="language-plaintext highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -1709,13 +1713,15 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="caveat-with-anchors">Caveat with anchors</h5>
|
||||
|
||||
<p>By default, browsers will treat all native form controls (<code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code> and <code class="highlighter-rouge"><button></code> elements) inside a <code class="highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code class="highlighter-rouge"><a ... class="btn btn-*"></code> elements, these will only be given a style of <code class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/docs/4.5/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
<p>Browsers treat all native form controls (<code class="language-plaintext highlighter-rouge"><input></code>, <code class="language-plaintext highlighter-rouge"><select></code>, and <code class="language-plaintext highlighter-rouge"><button></code> elements) inside a <code class="language-plaintext highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them.</p>
|
||||
|
||||
<p>However, if your form also includes custom button-like elements such as <code class="language-plaintext highlighter-rouge"><a ... class="btn btn-*"></code>, these will only be given a style of <code class="language-plaintext highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/docs/4.5/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10. The anchor-based controls will also still be focusable and operable using the keyboard. You must manually modify these controls by adding <code class="language-plaintext highlighter-rouge">tabindex="-1"</code> to prevent them from receiving focus and <code class="language-plaintext highlighter-rouge">aria-disabled="disabled"</code> to signal their state to assistive technologies.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="cross-browser-compatibility">Cross-browser compatibility</h4>
|
||||
|
||||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="highlighter-rouge">disabled</code> attribute on a <code class="highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="language-plaintext highlighter-rouge">disabled</code> attribute on a <code class="language-plaintext highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="validation">Validation</h2>
|
||||
@@ -1723,12 +1729,12 @@
|
||||
<p>Provide valuable, actionable feedback to your users with HTML5 form validation–<a href="https://caniuse.com/#feat=form-validation">available in all our supported browsers</a>. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<p>We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).</p>
|
||||
<p>We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="input-group-validation">Input group validation</h5>
|
||||
<p>Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the <code class="highlighter-rouge">.input-group</code> that has <code class="highlighter-rouge">.is-{valid|invalid}</code>. Placing feedback messages within input groups breaks the <code class="highlighter-rouge">border-radius</code>. <a href="#input-group-validation-workaround">See this workaround</a>.</p>
|
||||
<p>Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the <code class="language-plaintext highlighter-rouge">.input-group</code> that has <code class="language-plaintext highlighter-rouge">.is-{valid|invalid}</code>. Placing feedback messages within input groups breaks the <code class="language-plaintext highlighter-rouge">border-radius</code>. <a href="#input-group-validation-workaround">See this workaround</a>.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="how-it-works">How it works</h3>
|
||||
@@ -1736,23 +1742,23 @@
|
||||
<p>Here’s how form validation works with Bootstrap:</p>
|
||||
|
||||
<ul>
|
||||
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code>. It applies to <code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code>, and <code class="highlighter-rouge"><textarea></code> elements.</li>
|
||||
<li>Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles to parent <code class="highlighter-rouge">.was-validated</code> class, usually applied to the <code class="highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).</li>
|
||||
<li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the <code class="highlighter-rouge">.was-validated</code> class from the <code class="highlighter-rouge"><form></code> again after submission.</li>
|
||||
<li>As a fallback, <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a href="#server-side">server side validation</a>. They do not require a <code class="highlighter-rouge">.was-validated</code> parent class.</li>
|
||||
<li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code class="highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||||
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code>. It applies to <code class="language-plaintext highlighter-rouge"><input></code>, <code class="language-plaintext highlighter-rouge"><select></code>, and <code class="language-plaintext highlighter-rouge"><textarea></code> elements.</li>
|
||||
<li>Bootstrap scopes the <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code> styles to parent <code class="language-plaintext highlighter-rouge">.was-validated</code> class, usually applied to the <code class="language-plaintext highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).</li>
|
||||
<li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the <code class="language-plaintext highlighter-rouge">.was-validated</code> class from the <code class="language-plaintext highlighter-rouge"><form></code> again after submission.</li>
|
||||
<li>As a fallback, <code class="language-plaintext highlighter-rouge">.is-invalid</code> and <code class="language-plaintext highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a href="#server-side">server side validation</a>. They do not require a <code class="language-plaintext highlighter-rouge">.was-validated</code> parent class.</li>
|
||||
<li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code class="language-plaintext highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||||
<li>All modern browsers support the <a href="https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api">constraint validation API</a>, a series of JavaScript methods for validating form controls.</li>
|
||||
<li>Feedback messages may utilize the <a href="#browser-defaults">browser defaults</a> (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.</li>
|
||||
<li>You may provide custom validity messages with <code class="highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||||
<li>You may provide custom validity messages with <code class="language-plaintext highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||||
</ul>
|
||||
|
||||
<p>With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.</p>
|
||||
|
||||
<h3 id="custom-styles">Custom styles</h3>
|
||||
|
||||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code class="highlighter-rouge">novalidate</code> boolean attribute to your <code class="highlighter-rouge"><form></code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code class="language-plaintext highlighter-rouge">novalidate</code> boolean attribute to your <code class="language-plaintext highlighter-rouge"><form></code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||||
|
||||
<p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <code class="highlighter-rouge"><select></code>s are only available with <code class="highlighter-rouge">.custom-select</code>, and not <code class="highlighter-rouge">.form-control</code>.</p>
|
||||
<p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <code class="language-plaintext highlighter-rouge"><select></code>s are only available with <code class="language-plaintext highlighter-rouge">.custom-select</code>, and not <code class="language-plaintext highlighter-rouge">.form-control</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
@@ -1998,7 +2004,9 @@
|
||||
|
||||
<h3 id="server-side">Server side</h3>
|
||||
|
||||
<p>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code>. Note that <code class="highlighter-rouge">.invalid-feedback</code> is also supported with these classes.</p>
|
||||
<p>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with <code class="language-plaintext highlighter-rouge">.is-invalid</code> and <code class="language-plaintext highlighter-rouge">.is-valid</code>. Note that <code class="language-plaintext highlighter-rouge">.invalid-feedback</code> is also supported with these classes.</p>
|
||||
|
||||
<p>For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using <code class="language-plaintext highlighter-rouge">aria-describedby</code>. This attribute allows more than one <code class="language-plaintext highlighter-rouge">id</code> to be referenced, in case the field already points to additional form text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@@ -2021,36 +2029,36 @@
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer03">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" required="" />
|
||||
<div class="invalid-feedback">
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required="" />
|
||||
<div id="validationServer03Feedback" class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer04">State</label>
|
||||
<select class="custom-select is-invalid" id="validationServer04" required="">
|
||||
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required="">
|
||||
<option selected="" disabled="" value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
<div id="validationServer04Feedback" class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer05">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" required="" />
|
||||
<div class="invalid-feedback">
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required="" />
|
||||
<div id="validationServer05Feedback" class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="" />
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required="" />
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
<div id="invalidCheck3Feedback" class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
@@ -2078,36 +2086,36 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer03"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer03"</span> <span class="na">aria-describedby=</span><span class="s">"validationServer03Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"validationServer03Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid city.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">aria-describedby=</span><span class="s">"validationServer04Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"validationServer04Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please select a valid state.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer05"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer05"</span> <span class="na">aria-describedby=</span><span class="s">"validationServer05Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"validationServer05Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid zip.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">aria-describedby=</span><span class="s">"invalidCheck3Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck3"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"invalidCheck3Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
You must agree before submitting.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
@@ -2120,11 +2128,11 @@
|
||||
<p>Validation styles are available for the following form controls and components:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><input></code>s and <code class="highlighter-rouge"><textarea></code>s with <code class="highlighter-rouge">.form-control</code></li>
|
||||
<li><code class="highlighter-rouge"><select></code>s with <code class="highlighter-rouge">.form-control</code> or <code class="highlighter-rouge">.custom-select</code></li>
|
||||
<li><code class="highlighter-rouge">.form-check</code>s</li>
|
||||
<li><code class="highlighter-rouge">.custom-checkbox</code>s and <code class="highlighter-rouge">.custom-radio</code>s</li>
|
||||
<li><code class="highlighter-rouge">.custom-file</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><input></code>s and <code class="language-plaintext highlighter-rouge"><textarea></code>s with <code class="language-plaintext highlighter-rouge">.form-control</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><select></code>s with <code class="language-plaintext highlighter-rouge">.form-control</code> or <code class="language-plaintext highlighter-rouge">.custom-select</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.form-check</code>s</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.custom-checkbox</code>s and <code class="language-plaintext highlighter-rouge">.custom-radio</code>s</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.custom-file</code></li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
@@ -2298,7 +2306,7 @@
|
||||
|
||||
<h3 id="tooltips">Tooltips</h3>
|
||||
|
||||
<p>If your form layout allows it, you can swap the <code class="highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code class="highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code class="highlighter-rouge">position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
<p>If your form layout allows it, you can swap the <code class="language-plaintext highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code class="language-plaintext highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code class="language-plaintext highlighter-rouge">position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
@@ -2395,9 +2403,9 @@
|
||||
|
||||
<h3 id="customizing">Customizing</h3>
|
||||
|
||||
<p>Validation states can be customized via Sass with the <code class="highlighter-rouge">$form-validation-states</code> map. Located in our <code class="highlighter-rouge">_variables.scss</code> file, this Sass map is looped over to generate the default <code class="highlighter-rouge">valid</code>/<code class="highlighter-rouge">invalid</code> validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
<p>Validation states can be customized via Sass with the <code class="language-plaintext highlighter-rouge">$form-validation-states</code> map. Located in our <code class="language-plaintext highlighter-rouge">_variables.scss</code> file, this Sass map is looped over to generate the default <code class="language-plaintext highlighter-rouge">valid</code>/<code class="language-plaintext highlighter-rouge">invalid</code> validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
|
||||
<p>Please note that we do not recommend customizing these values without also modifying the <code class="highlighter-rouge">form-validation-state</code> mixin.</p>
|
||||
<p>Please note that we do not recommend customizing these values without also modifying the <code class="language-plaintext highlighter-rouge">form-validation-state</code> mixin.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Sass map from `_variables.scss`</span>
|
||||
<span class="c1">// Override this and recompile your Sass to generate different states</span>
|
||||
@@ -2424,7 +2432,7 @@
|
||||
|
||||
<h3 id="input-group-validation-workaround">Input group validation workaround</h3>
|
||||
|
||||
<p>We’re unable to resolve the broken <code class="highlighter-rouge">border-radius</code> of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add <code class="highlighter-rouge">.rounded-right</code> to the elements with the broken <code class="highlighter-rouge">border-radius</code>.</p>
|
||||
<p>We’re unable to resolve the broken <code class="language-plaintext highlighter-rouge">border-radius</code> of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add <code class="language-plaintext highlighter-rouge">.rounded-right</code> to the elements with the broken <code class="language-plaintext highlighter-rouge">border-radius</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
@@ -2448,7 +2456,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>When you are using a small or large input group or customizing the default <code class="highlighter-rouge">border-radius</code> values, add custom CSS to the element with the busted <code class="highlighter-rouge">border-radius</code>.</p>
|
||||
<p>When you are using a small or large input group or customizing the default <code class="language-plaintext highlighter-rouge">border-radius</code> values, add custom CSS to the element with the busted <code class="language-plaintext highlighter-rouge">border-radius</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Change values to match the radius of your form control */</span>
|
||||
<span class="nc">.fix-rounded-right</span> <span class="p">{</span>
|
||||
@@ -2484,11 +2492,11 @@
|
||||
|
||||
<h3 id="checkboxes-and-radios-1">Checkboxes and radios</h3>
|
||||
|
||||
<p>Each checkbox and radio <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code> pairing is wrapped in a <code class="highlighter-rouge"><div></code> to create our custom control. Structurally, this is the same approach as our default <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
<p>Each checkbox and radio <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><label></code> pairing is wrapped in a <code class="language-plaintext highlighter-rouge"><div></code> to create our custom control. Structurally, this is the same approach as our default <code class="language-plaintext highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<p>We use the sibling selector (<code class="highlighter-rouge">~</code>) for all our <code class="highlighter-rouge"><input></code> states—like <code class="highlighter-rouge">:checked</code>—to properly style our custom form indicator. When combined with the <code class="highlighter-rouge">.custom-control-label</code> class, we can also style the text for each item based on the <code class="highlighter-rouge"><input></code>’s state.</p>
|
||||
<p>We use the sibling selector (<code class="language-plaintext highlighter-rouge">~</code>) for all our <code class="language-plaintext highlighter-rouge"><input></code> states—like <code class="language-plaintext highlighter-rouge">:checked</code>—to properly style our custom form indicator. When combined with the <code class="language-plaintext highlighter-rouge">.custom-control-label</code> class, we can also style the text for each item based on the <code class="language-plaintext highlighter-rouge"><input></code>’s state.</p>
|
||||
|
||||
<p>We hide the default <code class="highlighter-rouge"><input></code> with <code class="highlighter-rouge">opacity</code> and use the <code class="highlighter-rouge">.custom-control-label</code> to build a new custom form indicator in its place with <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>. Unfortunately we can’t build a custom one from just the <code class="highlighter-rouge"><input></code> because CSS’s <code class="highlighter-rouge">content</code> doesn’t work on that element.</p>
|
||||
<p>We hide the default <code class="language-plaintext highlighter-rouge"><input></code> with <code class="language-plaintext highlighter-rouge">opacity</code> and use the <code class="language-plaintext highlighter-rouge">.custom-control-label</code> to build a new custom form indicator in its place with <code class="language-plaintext highlighter-rouge">::before</code> and <code class="language-plaintext highlighter-rouge">::after</code>. Unfortunately we can’t build a custom one from just the <code class="language-plaintext highlighter-rouge"><input></code> because CSS’s <code class="language-plaintext highlighter-rouge">content</code> doesn’t work on that element.</p>
|
||||
|
||||
<p>In the checked states, we use <strong>base64 embedded SVG icons</strong> from <a href="https://github.com/iconic/open-iconic">Open Iconic</a>. This provides us the best control for styling and positioning across browsers and devices.</p>
|
||||
|
||||
@@ -2505,7 +2513,7 @@
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customCheck1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Custom checkboxes can also utilize the <code class="highlighter-rouge">:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
|
||||
<p>Custom checkboxes can also utilize the <code class="language-plaintext highlighter-rouge">:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
|
||||
|
||||
<div class="bd-example bd-example-indeterminate">
|
||||
<div class="custom-control custom-checkbox">
|
||||
@@ -2562,7 +2570,7 @@
|
||||
|
||||
<h4 id="disabled">Disabled</h4>
|
||||
|
||||
<p>Custom checkboxes and radios can also be disabled. Add the <code class="highlighter-rouge">disabled</code> boolean attribute to the <code class="highlighter-rouge"><input></code> and the custom indicator and label description will be automatically styled.</p>
|
||||
<p>Custom checkboxes and radios can also be disabled. Add the <code class="language-plaintext highlighter-rouge">disabled</code> boolean attribute to the <code class="language-plaintext highlighter-rouge"><input></code> and the custom indicator and label description will be automatically styled.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-checkbox">
|
||||
@@ -2587,7 +2595,7 @@
|
||||
|
||||
<h3 id="switches">Switches</h3>
|
||||
|
||||
<p>A switch has the markup of a custom checkbox but uses the <code class="highlighter-rouge">.custom-switch</code> class to render a toggle switch. Switches also support the <code class="highlighter-rouge">disabled</code> attribute.</p>
|
||||
<p>A switch has the markup of a custom checkbox but uses the <code class="language-plaintext highlighter-rouge">.custom-switch</code> class to render a toggle switch. Switches also support the <code class="language-plaintext highlighter-rouge">disabled</code> attribute.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-switch">
|
||||
@@ -2610,7 +2618,7 @@
|
||||
|
||||
<h3 id="select-menu">Select menu</h3>
|
||||
|
||||
<p>Custom <code class="highlighter-rouge"><select></code> menus need only a custom class, <code class="highlighter-rouge">.custom-select</code> to trigger the custom styles. Custom styles are limited to the <code class="highlighter-rouge"><select></code>’s initial appearance and cannot modify the <code class="highlighter-rouge"><option></code>s due to browser limitations.</p>
|
||||
<p>Custom <code class="language-plaintext highlighter-rouge"><select></code> menus need only a custom class, <code class="language-plaintext highlighter-rouge">.custom-select</code> to trigger the custom styles. Custom styles are limited to the <code class="language-plaintext highlighter-rouge"><select></code>’s initial appearance and cannot modify the <code class="language-plaintext highlighter-rouge"><option></code>s due to browser limitations.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select">
|
||||
@@ -2658,7 +2666,7 @@
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>The <code class="highlighter-rouge">multiple</code> attribute is also supported:</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">multiple</code> attribute is also supported:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select" multiple="">
|
||||
@@ -2675,7 +2683,7 @@
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>As is the <code class="highlighter-rouge">size</code> attribute:</p>
|
||||
<p>As is the <code class="language-plaintext highlighter-rouge">size</code> attribute:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select" size="3">
|
||||
@@ -2694,7 +2702,7 @@
|
||||
|
||||
<h3 id="range">Range</h3>
|
||||
|
||||
<p>Create custom <code class="highlighter-rouge"><input type="range"></code> controls with <code class="highlighter-rouge">.custom-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
|
||||
<p>Create custom <code class="language-plaintext highlighter-rouge"><input type="range"></code> controls with <code class="language-plaintext highlighter-rouge">.custom-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange1">Example range</label>
|
||||
@@ -2703,7 +2711,7 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange1"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">id=</span><span class="s">"customRange1"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>Range inputs have implicit values for <code class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code>—<code class="highlighter-rouge">0</code> and <code class="highlighter-rouge">100</code>, respectively. You may specify new values for those using the <code class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code> attributes.</p>
|
||||
<p>Range inputs have implicit values for <code class="language-plaintext highlighter-rouge">min</code> and <code class="language-plaintext highlighter-rouge">max</code>—<code class="language-plaintext highlighter-rouge">0</code> and <code class="language-plaintext highlighter-rouge">100</code>, respectively. You may specify new values for those using the <code class="language-plaintext highlighter-rouge">min</code> and <code class="language-plaintext highlighter-rouge">max</code> attributes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange2">Example range</label>
|
||||
@@ -2712,7 +2720,7 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange2"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="na">id=</span><span class="s">"customRange2"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>By default, range inputs “snap” to integer values. To change this, you can specify a <code class="highlighter-rouge">step</code> value. In the example below, we double the number of steps by using <code class="highlighter-rouge">step="0.5"</code>.</p>
|
||||
<p>By default, range inputs “snap” to integer values. To change this, you can specify a <code class="language-plaintext highlighter-rouge">step</code> value. In the example below, we double the number of steps by using <code class="language-plaintext highlighter-rouge">step="0.5"</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange3">Example range</label>
|
||||
@@ -2740,18 +2748,18 @@
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFile"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>We hide the default file <code class="highlighter-rouge"><input></code> via <code class="highlighter-rouge">opacity</code> and instead style the <code class="highlighter-rouge"><label></code>. The button is generated and positioned with <code class="highlighter-rouge">::after</code>. Lastly, we declare a <code class="highlighter-rouge">width</code> and <code class="highlighter-rouge">height</code> on the <code class="highlighter-rouge"><input></code> for proper spacing for surrounding content.</p>
|
||||
<p>We hide the default file <code class="language-plaintext highlighter-rouge"><input></code> via <code class="language-plaintext highlighter-rouge">opacity</code> and instead style the <code class="language-plaintext highlighter-rouge"><label></code>. The button is generated and positioned with <code class="language-plaintext highlighter-rouge">::after</code>. Lastly, we declare a <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> on the <code class="language-plaintext highlighter-rouge"><input></code> for proper spacing for surrounding content.</p>
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings-with-scss">Translating or customizing the strings with SCSS</h4>
|
||||
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” text into other languages. Override or add entries to the <code class="highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="highlighter-rouge">es</code>):</p>
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="language-plaintext highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” text into other languages. Override or add entries to the <code class="language-plaintext highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="language-plaintext highlighter-rouge">es</code>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$custom-file-text</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Browse"</span><span class="o">,</span>
|
||||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Elegir"</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<p>Here’s <code class="highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish translation:</p>
|
||||
<p>Here’s <code class="language-plaintext highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish translation:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
@@ -2764,11 +2772,11 @@
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLang"</span><span class="nt">></span>Seleccionar Archivo<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="highlighter-rouge">lang</code> attribute</a> on the <code class="highlighter-rouge"><span class="nt"><html></span></code> element or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="language-plaintext highlighter-rouge">lang</code> attribute</a> on the <code class="language-plaintext highlighter-rouge"><html></code> element or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="language-plaintext highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings-with-html">Translating or customizing the strings with HTML</h4>
|
||||
|
||||
<p>Bootstrap also provides a way to translate the “Browse” text in HTML with the <code class="highlighter-rouge">data-browse</code> attribute which can be added to the custom input label (example in Dutch):</p>
|
||||
<p>Bootstrap also provides a way to translate the “Browse” text in HTML with the <code class="language-plaintext highlighter-rouge">data-browse</code> attribute which can be added to the custom input label (example in Dutch):</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
@@ -2787,6 +2795,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user