Forms
Forms
- Styling HTML forms with CSS is a common practice to enhance the appearance of form elements such as input fields, buttons, checkboxes, and radio buttons.
Syntax:
<form action="url" method="post">
/* form inputs*/
</form>
Text fields and Text areas in CSS Forms:
- To collect the text input from users we use text areas and text fields
- information can be text, contact number or password
Text fields in CSS Forms:
- Text fields in CSS are used to enhance the visual appearance of form elements. You can style the background, border, padding, and more
Syntax:
<input type="text" name="first_name">
Radio Buttons in CSS Forms:
- if we want to give multiple choices to the user but want only one answer in response. then we should use Radio buttons
Syntax:
Creating Radio Buttons in CSS Forms:
<input type="radio" name="studytonight" value="HTML" checked>
<input type="radio" name="studytonight" value="CSS">
<input type="radio" name="studytonight" value="Bootstrap">
<input type="radio" name="studytonight" value="JavaScript">
Example:
Creating login form in CSS:
<!DOCTYPE html>
<html>
<head>
<title>CSS Forms</title>
<style>
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: orange;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #f2db05;
color: black;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="Tutorial">Tutorials</label>
<select id="Tutorials" name="Tutorials">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Output: