which of the following is a form grid and used to design the form
Answers
Answer:Basic Sign up Form
In this layout we’re going to divide the form into two columns so we can display the labels on the left, and the input fields on the right.
With “Traditional” CSS
A traditional approach to this layout might use floats to give us our columns. Notice that we don’t have a wrapper for the form element; we will directly style the labels and inputs.
1
2
3
4
5
6
7
8
9
<form>
<label for="firstName" class="first-name">First Name</label>
<input id="firstName" type="text">
<label for="lastName" class="last-name">Last Name</label>
<input id="lastName" type="text">
<!-- more inputs -->
</form>
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
form {
overflow: hidden;
}
label {
float: left;
width: 200px;
padding-right: 24px;
}
input {
float: left;
width: calc(100% - 200px);
}
button {
float: right;
width: calc(100% - 200px);
}
You’ll notice we’re using calc() here, which allows us to make our left column fixed at 200px wide, whilst the right column remains fluid.
Here is the result, with some additional styles for aesthetics:
Explanation: