FM / forms

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/forms/

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/forms

Name	Size	Mode	Actions
checks-radios.md	13316	0644	edit dl rm
floating-labels.md	6900	0644	edit dl rm
form-control.md	7767	0644	edit dl rm
input-group.md	13067	0644	edit dl rm
layout.md	13138	0644	edit dl rm
overview.md	6302	0644	edit dl rm
range.md	1801	0644	edit dl rm
select.md	2407	0644	edit dl rm
validation.md	18037	0644	edit dl rm

Edit: /var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md (6302B)

## Overview

Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/content/reboot#forms" >}}) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.

{{< example >}}
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
{{< /example >}}

## Disabled forms

Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.

```html
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
```

Add the `disabled` attribute to a `<fieldset>` to disable all the controls within. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.

However, if your form also includes custom button-like elements such as `<a class="btn btn-*">...</a>`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.

{{< example >}}
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
{{< /example >}}

## Accessibility

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a `<label>` element, or—in the case of buttons—to include sufficiently descriptive text as part of the `<button>...</button>` content.

For situations where it's not possible to include a visible `<label>` or appropriate text content, there are alternative ways of still providing an accessible name, such as:

- `<label>` elements hidden using the `.visually-hidden` class
- Pointing to an existing element that can act as a label using `aria-labelledby`
- Providing a `title` attribute
- Explicitly setting the accessible name on an element using `aria-label`

If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

## CSS

Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables.

### Sass variables

`$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.

{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}

--- layout: docs title: Forms description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. group: forms toc: true aliases: "/docs/5.3/forms/" sections: - title: Form control description: Style textual inputs and textareas with support for multiple states. - title: Select description: Improve browser default select elements with a custom initial appearance. - title: Checks & radios description: Use our custom radio buttons and checkboxes in forms for selecting input options. - title: Range description: Replace browser default range inputs with our custom version. - title: Input group description: Attach labels and buttons to your inputs for increased semantic value. - title: Floating labels description: Create beautifully simple form labels that float over your input fields. - title: Layout description: Create inline, horizontal, or complex grid-based layouts with your forms. - title: Validation description: Validate your forms with custom or native validation behaviors and styles. --- ## Overview Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/content/reboot#forms" >}}) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more. Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more. {{< example >}} {{< /example >}} ## Disabled forms Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter. ```html ``` Add the `disabled` attribute to a `

` to disable all the controls within. Browsers treat all native form controls (``, `