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: