Labels

CSS Styling Forms (Responsive Form)

We will use CSS media queries to create a responsive stylish form. It changes the shape, size, position etc. of the form elements, depending on screen sizes.

Responsive Stylish Form

This example use media queries to stack the two columns on top of each other instead of next to each other, when the screen size is 600px or less.

media queries are CSS styles, that is applied to the same elements, depending on screen sizes.

Resize the Browser to see the effect.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.


Example

<!DOCTYPE html>
<html>
<head>
<style>
body, input, select, textarea {
font-size: 14px;
font-family: inherit;
}

* {
box-sizing: border-box;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #e6e6e6;
border-radius: 20px;
resize: vertical;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] {
background-color: #0054ff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 20px;
font-weight: bold;
cursor: pointer;
float: right;
}

input[type=submit]:hover {
background-color: #0094ff;
}

.container {
border-radius: 20px;
border: 2px solid #e6e6e6;
padding: 20px;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>


<div class="container">
<form action="https://www.w3schools.com/action_page.php" target="_blank">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>

</body>
</html>

Example Explained

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - This Sets the viewport to the same as device width.
  • @media screen and (max-width: 600px)
    • @media screen - This select screen as its input i.e. the change in the width of the screen will use this media query.
    • and (max-width: 600px) - This select screen with its width less than 600px as its input i.e. the change in the width of the screen will use this media query.
  • body, input, select, textarea { font-size: 14px; font-family: inherit; } - This Sets the font-family to the default font.
  • * { box-sizing: border-box; } - This Sets the width of the element to include padding, and border.
  • input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #e6e6e6; border-radius: 20px; resize: vertical; } - This Sets the textarea to rezie only in vertical direction. It also add styles to the input element.
  • .col-25 { float: left; width: 25%; margin-top: 6px; }

    .col-75 { float: left; width: 75%; margin-top: 6px; }     - This Sets the width of the element to 25% and 75% respectively by default. On the change of width to 600px or less, the width gets to 100%.

Tags

Comments

Post a Comment