Bootstrap 5 Tutorial

Bootstrap 5 Forms

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="444afa63-aeaa-420d-a589-e1fdf65d6ec1" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Forms</h3>
<p>Bootstrap 5 provides an extensive set of form components that make it easy to create consistent, responsive, and modern forms. Form components include everything from input fields and checkboxes to more complex elements like selects, range inputs, and custom file uploads.</p>
<hr />
<h3>Basic Form Structure</h3>
<p>Forms in Bootstrap are made responsive by default, and the grid system can be used to structure form layouts. Here's a look at the main elements and classes you can use for different components.</p>
<h4>Form Controls</h4>
<ol>
<li><strong>Form Group</strong>: Wrap form elements in <code>.mb-3</code> for spacing.</li>
<li><strong>Form Labels</strong>: Use <code>&lt;label&gt;</code> tags with <code>.form-label</code>.</li>
<li><strong>Form Controls</strong>: Use <code>.form-control</code> on input elements for consistent styling.</li>
</ol>
<h4>Example</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;form&gt;
    &lt;div class="mb-3"&gt;
        &lt;label for="email" class="form-label"&gt;Email address&lt;/label&gt;
        &lt;input type="email" class="form-control" id="email" placeholder="name@example.com"&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;label for="message" class="form-label"&gt;Message&lt;/label&gt;
        &lt;textarea class="form-control" id="message" rows="3"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Form Layouts</h3>
<ol>
<li><strong>Vertical Forms</strong>: Default form structure with fields stacked vertically.</li>
<li><strong>Horizontal Forms</strong>: Use Bootstrap's grid system to align labels and inputs side-by-side.
<ul>
<li>Use <code>.row</code> for the layout, and specify column widths using classes like <code>.col-sm-2</code> for labels and <code>.col-sm-10</code> for inputs.</li>
</ul>
</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;form&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label for="email" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="email" class="form-control" id="email" placeholder="Email"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Other Form Components</h3>
<h4>Checkboxes and Radios</h4>
<p>Add <code>.form-check</code> for each item to make it inline or stacked.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-check"&gt;
    &lt;input class="form-check-input" type="checkbox" value="" id="check1"&gt;
    &lt;label class="form-check-label" for="check1"&gt;
        Default checkbox
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Select Menus</h4>
<p>Use <code>.form-select</code> on <code>&lt;select&gt;</code> elements for consistent styling.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;select class="form-select" aria-label="Default select example"&gt;
    &lt;option selected&gt;Open this select menu&lt;/option&gt;
    &lt;option value="1"&gt;One&lt;/option&gt;
    &lt;option value="2"&gt;Two&lt;/option&gt;
    &lt;option value="3"&gt;Three&lt;/option&gt;
&lt;/select&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>File Inputs</h4>
<p>Use <code>.form-control</code> with type <code>file</code> for custom-styled file inputs.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="mb-3"&gt;
    &lt;label for="formFile" class="form-label"&gt;Default file input example&lt;/label&gt;
    &lt;input class="form-control" type="file" id="formFile"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Form Validation</h3>
<p>Bootstrap 5 offers custom validation styles for error and success states. Use <code>was-validated</code> class on the form and specify <code>is-valid</code> or <code>is-invalid</code> on inputs based on validation state.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;form class="needs-validation" novalidate&gt;
    &lt;div class="mb-3"&gt;
        &lt;label for="validationEmail" class="form-label"&gt;Email&lt;/label&gt;
        &lt;input type="email" class="form-control is-invalid" id="validationEmail" required&gt;
        &lt;div class="invalid-feedback"&gt;
            Please provide a valid email.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-primary" type="submit"&gt;Submit form&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More