CSS - Forms: A Guide for Beginners
Hello there, aspiring web designers! Today, we're going to explore the wonderful world of CSS forms. As your friendly computer teacher, I'm thrilled to lead you on this journey. Trust me, by the end of this tutorial, you'll be styling forms like a pro!
CSS Form - Font and Text Styling
Let's begin with the basics. Just as we dress up for different occasions, we can style our form elements with different fonts and text styles. Here's how:
input[type="text"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}This code instructs the browser to use Arial font for text inputs, set the font size to 16 pixels, and make the text color a dark gray (#333). It's like giving your form a smart, readable outfit!
CSS Form - Styling Element Borders and Backgrounds
Next, let's add some style to our form elements with borders and backgrounds:
input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}This code gives our text inputs a green border, slightly rounded corners, and a light gray background. It's like putting a decorative frame around your form elements!
CSS Form - Using Padding and Margins
Now, let's add some space to our form elements:
input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}This adds some space inside the input (padding) and below it (margin). It's like providing your form elements with a bit of personal space!
CSS Form - Focus Styles
When a user clicks on an input, we want to highlight it. Here's the way to do it:
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}This removes the default outline and adds a soft blue glow when the input is focused. It's like saying "Look at me!" to the user.
CSS Form - Button Styling
Buttons are the action heroes of your form. Let's give them a stylish look:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}This creates a green button that darkens when hovered over. It's like giving your button a cool superhero suit!
CSS Form - Checkbox and Radio Button Styling
Styling checkboxes and radio buttons can be a bit tricky. Here's a simple approach:
input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
}This makes your checkboxes and radio buttons a bit larger and easier to interact with. It's like giving them a growth spurt!
CSS Form - Form Layout
Now, let's organize our form elements:
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}This centers our form and puts each label on a separate line. It's like tidying up your room - everything has its place!
Example
Let's put it all together:
<form>
<label for="name">Nom:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Soumettre</button>
</form>form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}This creates a simple, styled form. It's like putting together a puzzle - all the pieces fit perfectly!
CSS Form - Box-sizing
Here's a pro tip: use box-sizing: border-box to simplify your life:
* {
box-sizing: border-box;
}This ensures that padding and border are included in the element's total width and height. It's like magic - no more unexpected overflows!
CSS Form - Fieldset and Legend
Fieldsets and legends can help structure your form:
fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}This creates a nice border around related form elements with a title. It's like creating chapters in your form's story!
CSS Form - Full Width Input
Sometimes, you want your inputs to take up all available space:
input[type="text"] {
width: 100%;
}This makes your input stretch to fill its container. It's like giving your input a big stretch!
CSS Form - Colored Input
Let's add some color to our inputs:
input[type="text"] {
background-color: #e6f3ff;
color: #00366d;
}This gives our input a light blue background with dark blue text. It's like painting your form with a cool color scheme!
CSS Form - Images In The Inputs
You can even add images to your inputs:
input[type="text"] {
background-image: url('search-icon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}This adds a search icon to the left side of the input. It's like giving your input a little avatar!
CSS Form - Input With Animation
Let's add some motion to our inputs:
input[type="text"] {
transition: all 0.3s ease-in-out;
}
input[type="text"]:focus {
transform: scale(1.05);
}This makes the input slightly larger when focused. It's like giving your input a little dance move!
CSS Form - Styling Textareas
Don't forget about textareas:
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
}This styles your textarea and allows vertical resizing. It's like giving your users a stretchy notepad!
CSS Form - Styling Dropdown Menus
Dropdown menus need some love too:
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}This creates a nice, clean dropdown menu. It's like giving your users a sleek vending machine for options!
Responsive Form Layout
Finally, let's make our form responsive:
@media screen and (max-width: 600px) {
form {
width: 100%;
}
}This makes the form full-width on smaller screens. It's like giving your form a shapeshifting superpower!
And there you have it! You've just learned how to style forms with CSS. Remember, practice makes perfect, so don't be afraid to experiment with these styles. Happy coding!
Credits: Image by storyset