CSS Forms
CSS allows you to style HTML forms, making them visually appealing and improving the user experience. By styling form elements like input fields, buttons, checkboxes, and dropdowns, you can make forms easier to use and align them with your website’s overall design.
Common Form Elements to Style
1. Styling Input Fields
Input fields are essential parts of forms, used for text input, email, passwords, etc. You can style them to make them more user-friendly.
Example:
Output:
In this example:
• The CSS rules apply consistent styling to text, email, and password input fields, making them visually uniform with padding, border, and rounded corners.
• On focus, the border color changes to green, enhancing the user experience by providing a visual indicator of the active field.
• The box-sizing: border-box; rule ensures that the total width of the input fields includes the padding and border, preventing layout issues.
2. Styling Textareas
Textareas allow users to input larger amounts of text, and they can be styled similarly to input fields.
Example:
<head>
<style>
/* Style textarea */
textarea {
border: 2px solid #ccc;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
width: 100%;
height: 100px;
box-sizing: border-box;
resize: vertical; /* Allows vertical resizing only */
}
textarea:focus {
border-color: #4CAF50;
outline: none;
}
</style>
</head>
<body>
<textarea placeholder=”Enter your message here”></textarea>
</body>
Output:
In this example:
• The CSS styles the textarea with a light gray border, padding, and rounded corners, and sets its height and width.
• The resize: vertical; property restricts resizing to vertical adjustments only, preventing horizontal resizing.
• On focus, the border color changes to green to indicate that the textarea is active, enhancing user interaction.
3. Styling Select Dropdowns
Select dropdowns allow users to choose from a list of options.
Example:
<head>
<style>
/* Style select dropdown */
select {
border: 2px solid #ccc;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
select:focus {
border-color: #4CAF50;
outline: none;
}
</style>
</head>
<body>
<select>
<option value=”option1″>Option 1</option>
<option value=”option2″>Option 2</option>
<option value=”option3″>Option 3</option>
</select>
</body>
Output:
In this example:
• The CSS styles the select dropdown with a light gray border, padding, rounded corners, and sets its width to 100% of its container.
• On focus, the border color of the dropdown changes to green to enhance user interaction, and the default focus outline is removed for a cleaner look.
• This styling improves the visual appeal and usability of the dropdown menu, making it more consistent with other form elements styled in a similar manner.
4. Styling Checkboxes and Radio Buttons
Checkboxes and radio buttons are used for selecting options. You can style them to match the overall design of your form.
Example:
<head>
<style>
/* Style checkboxes and radio buttons */
input[type=”checkbox”],
input[type=”radio”] {
margin: 0 10px 0 0;
vertical-align: middle;
}
label {
margin: 0 15px 0 0;
}
</style>
</head>
<body>
<label>
<input type=”checkbox” name=”option1″> Option 1
</label>
<label>
<input type=”checkbox” name=”option2″> Option 2
</label>
<br>
<label>
<input type=”radio” name=”group1″ value=”A”> Option A
</label>
<label>
<input type=”radio” name=”group1″ value=”B”> Option B
</label>
</body>
Output:
In this example:
• The CSS styles the checkboxes and radio buttons by adding margins for spacing and aligning them vertically with text.
• The labels are spaced out to separate them visually, making the form elements easier to read and interact with.
• The HTML structure groups checkboxes and radio buttons within labels, providing clear and accessible form controls with appropriate spacing.
5. Styling Form Buttons
Buttons submit form data or perform actions. You can style them to make them stand out and be easily clickable.
Example:
<head>
<style>
button,
input[type=”submit”],
input[type=”reset”] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 5px 0;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover,
input[type=”submit”]:hover,
input[type=”reset”]:hover {
background-color: #45a049;
}
button:focus,
input[type=”submit”]:focus,
input[type=”reset”]:focus {
outline: none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button type=”button”>Click Me</button>
<input type=”submit” value=”Submit”>
<input type=”reset” value=”Reset”>
</body>
Output:
In this example:
• The CSS styles the buttons and input fields to have a consistent green color with white text, rounded corners, and a slightly larger clickable area.
• The hover effect changes the background color to a darker green, providing visual feedback when the user interacts with the buttons.
• The focus effect adds a shadow to enhance the button’s visibility and accessibility when it is selected.
• The HTML structure includes examples of a generic button, a submit button, and a reset button, each styled with the defined CSS rules.
6. Aligning Form Elements
You can use CSS to align form elements for better layout and spacing.
Example:
<head>
<style>
.form-container {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 400px;
margin: auto;
}
.form-group {
margin-bottom: 15px;
width: 100%;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea, select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div class=”form-container”>
<div class=”form-group”>
<label for=”name”>Name</label>
<input type=”text” id=”name” name=”name”>
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”email” id=”email” name=”email”>
</div>
<div class=”form-group”>
<label for=”message”>Message</label>
<textarea id=”message” name=”message”></textarea>
</div>
<div class=”form-group”>
<label for=”country”>Country</label>
<select id=”country” name=”country”>
<option value=”us”>United States</option>
<option value=”ca”>Canada</option>
<option value=”uk”>United Kingdom</option>
</select>
</div>
</div>
</body>
Output:
In this example:
• The form is styled to be user-friendly and visually appealing with a clean layout.
• Flexbox is used to align the form elements vertically.
• Form elements like inputs, textareas, and selects are styled consistently for a polished look.
• The form is centered and constrained to a maximum width for responsiveness.
CSS Form States: Disabled, Enabled, and Checked
CSS allows you to style form elements based on their state, such as when they are disabled, enabled, or checked. Understanding how to apply styles to these states can help you create more interactive and visually appealing forms.
1. Styling Disabled Form Elements
When a form element is disabled, it is typically not interactive and appears grayed out. You can use the :disabled pseudo-class to style disabled elements.
Example:
<head>
<style>
input:disabled,
textarea:disabled,
select:disabled {
background-color: #e9ecef;
border: 1px solid #ccc;
color: #6c757d;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class=”form-container”>
<div class=”form-group”>
<label for=”disabled-input”>Disabled Input</label>
<input type=”text” id=”disabled-input” name=”disabled-input” disabled>
</div>
<div class=”form-group”>
<label for=”disabled-textarea”>Disabled Textarea</label>
<textarea id=”disabled-textarea” name=”disabled-textarea” disabled></textarea>
</div>
<div class=”form-group”>
<label for=”disabled-select”>Disabled Select</label>
<select id=”disabled-select” name=”disabled-select” disabled>
<option value=”us”>United States</option>
<option value=”ca”>Canada</option>
<option value=”uk”>United Kingdom</option>
</select>
</div>
</div>
</body>
Output:
In this example:
The CSS provided styles disabled form elements (input fields, textareas, and select dropdowns) to make them visually distinct by changing their background color, border, text color, and cursor appearance.
2. Styling Enabled Form Elements
Form elements are enabled by default, so you don’t need to specify styles for this state unless you want to customize them differently from the disabled state.
Example:
<head>
<style>
input,
textarea,
select {
border: 2px solid #007bff;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
input:focus,
textarea:focus,
select:focus {
border-color: #0056b3;
outline: none;
}
</style>
</head>
<body>
<div class=”form-container”>
<div class=”form-group”>
<label for=”enabled-input”>Enabled Input</label>
<input type=”text” id=”enabled-input” name=”enabled-input”>
</div>
<div class=”form-group”>
<label for=”enabled-textarea”>Enabled Textarea</label>
<textarea id=”enabled-textarea” name=”enabled-textarea”></textarea>
</div>
<div class=”form-group”>
<label for=”enabled-select”>Enabled Select</label>
<select id=”enabled-select” name=”enabled-select”>
<option value=”us”>United States</option>
<option value=”ca”>Canada</option>
<option value=”uk”>United Kingdom</option>
</select>
</div>
</div>
</body>
Output:
In this example:
The CSS styles applied to input, textarea, and select elements create a consistent and visually appealing design with a blue border and rounded corners. The :focus styles improve accessibility by highlighting the active element with a darker blue border.
3. Styling Checked Form Elements
For checkboxes and radio buttons, the :checked pseudo-class is used to apply styles when the elements are selected or checked.
Example:
<head>
<style>
input[type=”checkbox”],
input[type=”radio”] {
margin-right: 10px;
}
/* Style for checked checkboxes */
input[type=”checkbox”]:checked + label {
color: green;
font-weight: bold;
}
/* Style for checked radio buttons */
input[type=”radio”]:checked + label {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div class=”form-container”>
<div class=”form-group”>
<input type=”checkbox” id=”checkbox1″ name=”checkbox1″ checked>
<label for=”checkbox1″>Checked Checkbox</label>
</div>
<div class=”form-group”>
<input type=”checkbox” id=”checkbox2″ name=”checkbox2″>
<label for=”checkbox2″>Unchecked Checkbox</label>
</div>
<div class=”form-group”>
<input type=”radio” id=”radio1″ name=”radioGroup” value=”A” checked>
<label for=”radio1″>Checked Radio Button</label>
</div>
<div class=”form-group”>
<input type=”radio” id=”radio2″ name=”radioGroup” value=”B”>
<label for=”radio2″>Unchecked Radio Button</label>
</div>
</div>
</body>
Output:
In this example:
The CSS styles target checkboxes and radio buttons to change the appearance of their labels based on their checked state. The :checked pseudo-class is used to apply styles to labels associated with checked inputs. The space between the input and its label is managed using margin-right, ensuring a clean and organized layout. The labels are styled with different colors and font weights to visually differentiate checked states from unchecked ones.
Conclusion
CSS forms are a crucial part of web design, enabling you to create forms that are both functional and visually appealing. By styling input fields buttons checkboxes and more you can ensure your forms are user-friendly and aligned with your site’s design. By using CSS pseudo-classes like :disabled, :enabled, and :checked, you can effectively style form elements based on their state.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Form Styling
Objective: Style a basic form with input fields and a button.
Expected Output: A form with a text input, email input, and submit button, all styled with specific colors and sizes.
Output:
Scenario 2: Form with Inline Labels
Objective: Style a form where labels are inline with their corresponding input fields.
Expected Output: A form with inline labels and input fields, with the labels and inputs aligned on the same line.
Output:
Scenario 3: Responsive Form
Objective: Create a responsive form that adjusts the layout on different screen sizes.
Expected Output: A form that stacks its elements vertically on small screens and displays them inline on larger screens.
Output:
Scenario 4: Form with Validation Styles
Objective: Style a form to indicate valid and invalid input states.
Expected Output: A form where input fields show different border colors when valid or invalid.
Output:
Scenario 5: Form with Custom Submit Button
Objective: Style a form with a custom-styled submit button.
Expected Output: A form with a submit button that has a custom color, font, and hover effect.
Output:
