Bootstrap 4 Tutorial

BS4 Inputs

Last modified on: October 26, 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">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"><span style="font-size: 24pt;">Bootstrap 4 Inputs</span></h2>
<p>Bootstrap 4 Inputs provide a variety of styles and components to enhance user interaction in forms. This guide covers the different types of inputs available in Bootstrap 4, including text fields, checkboxes, radio buttons, file uploads, and more.</p>
<hr />
<h1><span style="font-size: 18pt;">Basic Input Types</span></h1>
</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="e0689919-cb90-4139-8453-08af27bcaaae" data-message-model-slug="gpt-4o-mini">
<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">
<p>Bootstrap 4 supports various input types to collect user data efficiently. Below are examples of the most common input types:</p>
<h3>Text Input</h3>
<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-group"&gt;
    &lt;label for="textInput"&gt;Text Input&lt;/label&gt;
    &lt;input type="text" class="form-control" id="textInput" placeholder="Enter text"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Email Input</h3>
<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-group"&gt;
    &lt;label for="emailInput"&gt;Email Input&lt;/label&gt;
    &lt;input type="email" class="form-control" id="emailInput" placeholder="Enter email"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Password Input</h3>
<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-group"&gt;
    &lt;label for="passwordInput"&gt;Password Input&lt;/label&gt;
    &lt;input type="password" class="form-control" id="passwordInput" placeholder="Password"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Number Input</h3>
<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-group"&gt;
    &lt;label for="numberInput"&gt;Number Input&lt;/label&gt;
    &lt;input type="number" class="form-control" id="numberInput" placeholder="Enter a number"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>URL Input</h3>
<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-group"&gt;
    &lt;label for="urlInput"&gt;URL Input&lt;/label&gt;
    &lt;input type="url" class="form-control" id="urlInput" placeholder="Enter URL"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Search Input</h3>
<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-group"&gt;
    &lt;label for="searchInput"&gt;Search Input&lt;/label&gt;
    &lt;input type="search" class="form-control" id="searchInput" placeholder="Search..."&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Checkboxes and Radio Buttons</h2>
<p>Checkboxes and radio buttons allow users to make selections within a form.</p>
<h3>Checkbox</h3>
<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-group"&gt;
    &lt;div class="form-check"&gt;
        &lt;input type="checkbox" class="form-check-input" id="checkbox1"&gt;
        &lt;label class="form-check-label" for="checkbox1"&gt;Check this box&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Radio Buttons</h3>
<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-group"&gt;
    &lt;label&gt;Choose an option:&lt;/label&gt;
    &lt;div class="form-check"&gt;
        &lt;input type="radio" class="form-check-input" name="options" id="radio1" value="option1"&gt;
        &lt;label class="form-check-label" for="radio1"&gt;Option 1&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="form-check"&gt;
        &lt;input type="radio" class="form-check-input" name="options" id="radio2" value="option2"&gt;
        &lt;label class="form-check-label" for="radio2"&gt;Option 2&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>File Input</h2>
<p>Use a file input to allow users to upload files.</p>
<h3>Example</h3>
<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-group"&gt;
    &lt;label for="fileInput"&gt;File Input&lt;/label&gt;
    &lt;input type="file" class="form-control-file" id="fileInput"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Range Input</h2>
<p>A range input allows users to select a value from a specified range.</p>
<h3>Example</h3>
<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-group"&gt;
    &lt;label for="rangeInput"&gt;Range Input&lt;/label&gt;
    &lt;input type="range" class="form-control-range" id="rangeInput"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Disabled Inputs</h2>
<p>You can easily disable inputs by adding the <code>disabled</code> attribute.</p>
<h3>Example</h3>
<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-group"&gt;
    &lt;label for="disabledInput"&gt;Disabled Input&lt;/label&gt;
    &lt;input type="text" class="form-control" id="disabledInput" placeholder="Disabled input" disabled&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Complete Example: Bootstrap 4 Inputs</h2>
<p>Here&rsquo;s a complete example showcasing different input types within a form.</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;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 4 Inputs Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Input Types Example&lt;/h1&gt;
        &lt;form&gt;
            &lt;!-- Text Input --&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="textInput"&gt;Text Input&lt;/label&gt;
                &lt;input type="text" class="form-control" id="textInput" placeholder="Enter text"&gt;
            &lt;/div&gt;
            &lt;!-- Email Input --&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="emailInput"&gt;Email Input&lt;/label&gt;
                &lt;input type="email" class="form-control" id="emailInput" placeholder="Enter email"&gt;
            &lt;/div&gt;
            &lt;!-- Password Input --&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="passwordInput"&gt;Password Input&lt;/label&gt;
                &lt;input type="password" class="form-control" id="passwordInput" placeholder="Password"&gt;
            &lt;/div&gt;
            &lt;!-- Checkbox --&gt;
            &lt;div class="form-group"&gt;
                &lt;div class="form-check"&gt;
                    &lt;input type="checkbox" class="form-check-input" id="checkbox1"&gt;
                    &lt;label class="form-check-label" for="checkbox1"&gt;Check this box&lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Radio Buttons --&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;Choose an option:&lt;/label&gt;
                &lt;div class="form-check"&gt;
                    &lt;input type="radio" class="form-check-input" name="options" id="radio1" value="option1"&gt;
                    &lt;label class="form-check-label" for="radio1"&gt;Option 1&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="form-check"&gt;
                    &lt;input type="radio" class="form-check-input" name="options" id="radio2" value="option2"&gt;
                    &lt;label class="form-check-label" for="radio2"&gt;Option 2&lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- File Input --&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="fileInput"&gt;File Input&lt;/label&gt;
                &lt;input type="file" class="form-control-file" id="fileInput"&gt;
            &lt;/div&gt;
            &lt;!-- Submit Button --&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More