Bootstrap 3 Tutorial

Bootstrap 3 Inputs 2

Last modified on: October 28, 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="0e4001b1-944b-4399-9449-e814b1ff0fad" 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">
<h3>Bootstrap 3 Inputs (Part 2)</h3>
<p>In this second part of the Bootstrap 3 Inputs tutorial, we will explore more advanced input features and styles, including custom file inputs, placeholder text, and various validation techniques to enhance the user experience. We will also cover how to create grouped inputs and disabled inputs.</p>
<hr />
<h3>Advanced Input Features</h3>
<h4>1. Custom File Inputs</h4>
<p>Bootstrap 3 allows you to create custom-styled file input fields. This makes file uploads visually appealing and easy to use.</p>
<h5>Example of Custom File Input</h5>
<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" id="fileInput"&gt;
    &lt;p class="help-block"&gt;Example block-level help text here.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. Placeholder Text</h4>
<p>You can provide placeholder text in input fields to guide users on what to enter. Placeholder text disappears when the user starts typing.</p>
<h5>Example with Placeholder</h5>
<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;Enter Your Name:&lt;/label&gt;
    &lt;input type="text" class="form-control" id="textInput" placeholder="John Doe"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>3. Disabled Inputs</h4>
<p>You can disable inputs to prevent user interaction when needed. Disabled inputs are styled differently and cannot be submitted.</p>
<h5>Example of Disabled Input</h5>
<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="Can't type here" disabled&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>4. Input Groups</h4>
<p>Input groups allow you to prepend or append elements like icons or buttons to input fields. This is useful for providing additional context or actions.</p>
<h5>Example of Input Groups</h5>
<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="usernameInput"&gt;Username:&lt;/label&gt;
    &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
        &lt;input type="text" class="form-control" id="usernameInput" placeholder="Username"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>In this part of the Bootstrap 3 Inputs tutorial, we covered various advanced features that can significantly improve the usability and functionality of your forms. By implementing custom file inputs, placeholders, disabled states, and input groups, you can create a more intuitive and user-friendly experience. Bootstrap 3 provides a solid foundation for building forms, making it easy to customize inputs according to your design requirements.</p>

Web Technology View More