CSS Tutorial

CSS 3 Forms

Last modified on: October 25, 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">CSS Forms: Enhancing Form Design and User Experience</h2>
</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="d7f789f6-1eb7-4406-a0b0-cf2b2204acb1" 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">
<p>CSS allows you to style forms to improve the user experience, making forms more visually appealing and accessible. With CSS, you can control the layout, color, spacing, and interactivity of form elements like input fields, labels, buttons, checkboxes, and more.</p>
<hr />
<h3>Basic Form Structure</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;!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;Styled CSS Form&lt;/title&gt;
    &lt;style&gt;
        /* General form styling */
        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

/* Label styling */
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

/* Input fields */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

/* Focus state */
        input:focus, 
        textarea:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

/* Submit button */
        button[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

/* Hover effect */
        button[type="submit"]:hover {
            background-color: #0056b3;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Contact Us&lt;/h2&gt;
    &lt;form action="#" method="post"&gt;
        &lt;label for="name"&gt;Name&lt;/label&gt;
        &lt;input type="text" id="name" name="name" required&gt;

&lt;label for="email"&gt;Email&lt;/label&gt;
        &lt;input type="email" id="email" name="email" required&gt;

&lt;label for="message"&gt;Message&lt;/label&gt;
        &lt;textarea id="message" name="message" rows="4" required&gt;&lt;/textarea&gt;

&lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Explanation</h4>
<ul>
<li><strong><code>form</code></strong>: The form is centered with padding, background color, border radius, and shadow for a card-like appearance.</li>
<li><strong><code>input</code>, <code>textarea</code></strong>: Padding and border-radius enhance the fields&rsquo; appearance, while the focus state adds a blue border and shadow to highlight active fields.</li>
<li><strong>Submit button</strong>: The button has a background color and hover effect for better interactivity.</li>
</ul>
<hr />
<h3>Advanced Form Styling with CSS</h3>
<p>CSS provides additional styling options for elements like checkboxes, radio buttons, and select menus.</p>
<h4>Checkbox and Radio Button Customization</h4>
<p>By default, checkboxes and radio buttons have a browser-specific style, but you can use CSS to customize them with pseudo-elements.</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;Custom Checkboxes and Radios&lt;/title&gt;
    &lt;style&gt;
        /* Hide default checkbox */
        input[type="checkbox"],
        input[type="radio"] {
            display: none;
        }

/* Custom checkbox */
        .checkbox-label, .radio-label {
            display: inline-block;
            position: relative;
            padding-left: 25px;
            cursor: pointer;
            font-size: 16px;
        }

/* Checkbox appearance */
        .checkbox-label::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 2px solid #007bff;
            border-radius: 3px;
            background-color: white;
        }

/* Checked state for checkbox */
        input[type="checkbox"]:checked + .checkbox-label::before {
            background-color: #007bff;
        }

/* Custom radio appearance */
        .radio-label::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 2px solid #007bff;
            border-radius: 50%;
            background-color: white;
        }

/* Checked state for radio */
        input[type="radio"]:checked + .radio-label::before {
            background-color: #007bff;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Custom Checkboxes and Radios&lt;/h2&gt;

&lt;label&gt;
        &lt;input type="checkbox" id="subscribe"&gt;
        &lt;span class="checkbox-label"&gt;Subscribe to newsletter&lt;/span&gt;
    &lt;/label&gt;
    &lt;br&gt;
    &lt;label&gt;
        &lt;input type="radio" name="gender" value="male" id="male"&gt;
        &lt;span class="radio-label"&gt;Male&lt;/span&gt;
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type="radio" name="gender" value="female" id="female"&gt;
        &lt;span class="radio-label"&gt;Female&lt;/span&gt;
    &lt;/label&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Explanation</h4>
<ul>
<li><strong>Hidden default input</strong>: Hides the default checkbox and radio button appearance using <code>display: none</code>.</li>
<li><strong>Custom checkbox/radio</strong>: CSS <code>::before</code> pseudo-element adds a custom style, and the checked state is controlled using <code>:checked</code>.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More