One form template for the entire project

Often in one project there are various forms of structure, somewhere the label of the element and the form element itself are on the same line, somewhere under each other, in one case you need a form that occupies the entire width given to it (for example, writing / editing an article), the other is only a specific, specified width (for example, a registration / authorization form), and the external design is different.

Because of this, many designers are beginning to impose each form separately, giving them and their elements different styles, thereby complicating the work for themselves and those people who will assemble these layouts.

Next, I will talk about how I do it. The method does not claim either for uniqueness or for novelty. Just at the moment when I came to this (I stopped making up each form separately), the layout of forms began to take much less time and decided to share it, maybe it would help someone.

In most cases, you can decide on the name of the elements and impose only one form, then modify it by adding classes directly to the <form> element. Subsequently, we can transfer the transfer to the templates (template to choose from;)) form elements and in the code that will collect the pages for you, just say “Draw a form with such a set of elements and add such a class to it” .
')
At once I will make a reservation, a rather primitive example will be considered further, yes there may be several columns of checkboxes or something else, but we will not consider this, but you can finish it;)

And so, after thinking a bit, we’ve got something like this HTML code:

<form class = "form" action= "" >
<fieldset class = "field" >
<label for = "default-text" >Some input[type=text]</label>
<input type= "text" id= "default-text" class = "text" />
</fieldset>
<fieldset class = "field choice" >
<fieldset>
<input type= "radio" id= "default-radio" checked = "checked" />
<label for = "default-radio" >Some input[type=radio]</label>
</fieldset>
<fieldset>
<input type= "checkbox" id= "default-checkbox" checked = "checked" />
<label for = "default-checkbox" >Some input[type=checkbox]</label>
</fieldset>
</fieldset>
<fieldset class = "field" >
<label for = "default-textarea" >Some textarea</label>
<textarea class = "text" rows= "10" cols= "40" id= "default-textarea" ></textarea>
</fieldset>
<fieldset class = "field" >
<label for = "default-select" >Some select </label>
< select id= "default-select" >
<option>variant 1</option>
<option>variant 2</option>
<option>variant 3</option>
</ select >
</fieldset>
<fieldset class = "field submit" >
<input type= "submit" value = "Send" />
<input type= "reset" value = "Clear" />
</fieldset>
</form>

* This source code was highlighted with Source Code Highlighter .

I will explain a little:

• Our universal form has a class .form , why, because it is universal?, It’s just more convenient for me, you can do without it;
• Some <fieldset> have a class, but others don’t: with a .field class common to a group of elements, there can also be nested <fieldset> , for example, with checkboxes that require a different style, so set a common style for all elements of this type is not always possible.

Now let's stylize our form a bit, using css:

.form {
margin: 1em 0;
}
.form .field {
margin: 0 0 .8em;
}
.form label {
display: block;
font-weight: 700
}
.form .text {
width: 100%;
padding: 3px 5px;
}
.form textarea {
height: 150px;
}
.form .choice label {
display: inline;
}
.form .submit {
text-align: center;
}
.form .submit input {
padding: 5px 10px;
}

* This source code was highlighted with Source Code Highlighter .

And let's see what happened

This is our main form, it can be used for example, for writing / editing articles.

For example, we need a form with a fixed width for the authorization form.
Add a class to css:

.form-w-300 {
width: 300px;
margin: 1em auto;
}

* This source code was highlighted with Source Code Highlighter .

Now apply it to our form .

If you need a form in the form of a grid (the label and the element are on the same line), add css a little more (for two options at once: label left and right):

.grid-left-500,
.grid-right-500 {
width: 500px;
margin: 1em auto;
}
.grid-left-500 label,
.grid-right-500 label {
float: left;
width: 180px;
overflow: hidden;
}
.grid-right-500 label {
float: right;
}
.grid-left-500 .text,
.grid-right-500 .text {
float: right;
width: 300px;
}
.grid-right-500 .text {
float: left;
}
.grid-left-500 .choice {
margin-left: 185px;
}
.grid-right-500 .choice {
margin-left: 0;
padding-right: 185px;
}
.grid-left-500 .choice label,
.grid-right-500 .choice label {
float: none;
width: auto;
}
.grid-left-500 .submit {
text-align: left;
padding-left: 185px;
}
.grid-right-500 .submit {
text-align: left;
}
.grid-left-500 select {
margin-left: 5px;
}
.grid-right-500 select {
float: right;
margin-right: 5px;
}

* This source code was highlighted with Source Code Highlighter .

Labels on the left , labels on the right

But the grid view has its drawbacks: it works only with a fixed width of the form and its elements, or if you specify dimensions in percent, but this does not always work.
I don’t know how to solve this using css tools, and even cross-browser.

As a result, we received 1 form template and 4 (in this example) forms, various in structure or size, modified with css.

Having finished the example, it is possible to stylize each form separately, and to make the forms of other structures, but this is already as necessary, only an idea with primitive examples is presented here.

I hope someone will come in handy.