Using HTML, we can create a simple form but that will not look attractive and beautiful.
Using CSS, we can apply styles on the HTML forms to make it colorful and attractive.
Let us see different ways to make beautiful forms.
CSS Inline Forms
The Inline Forms are those forms in which the fields are in the same line and are at the same level.
The fields will not start in a new line until we force them to start in a new line.
To create an inline form, the easiest way is –
Do not set the width of the input field so that the browser will automatically calculate its width.
Ideally, this works when you have a lower number of fields, typically 2-4 because if you have more number of fields that cannot fit in one line, the browser forces the next field to start in a new line.
Example of Inline Forms
CSS Stacked Forms
The Stacked Form is a form where each field starts on a new line.
The fields will stack over each other.
To create a Stack form –
- Either Code display:block for the <input type=”text”/> tag so that each input field starts in a new line. By default, <input type=”text”/> tag is inline in nature.
- The other way is – Code width:100% for the input fields.
Example of Stacked Forms
Style Input Fields
Depending upon the style you want, you can style your input fields like adding padding, margin, width, color, etc.
Example of Style Input Fields
CSS Forms Color Input Fields
The background-color & color adds colors to the form and input Fields.
In this example, we are adding color related properties in <form> as well as <input> field.
Example to apply Color in Forms
Focus Input form Field
Sometimes, the website owner wishes to style the input only when the user clicks on the input field. In that case, you can use the :focus selector.
This will apply the focus to all the input fields.
Now, if you wish to add focus to a particular input type only, then you must define that input type along with the :focus selector as below-
Similarly, you can also select other selectors like :hover, :active, etc as well.
Example of Forms Input Focus
Style Select Menu In Forms
Let’s style the select menu in forms –
Example to style 'Select' Menu In Forms
Style Textarea inside Forms
Textarea contains the area where you can write the text. You can style the textarea like –
- coding rows or cols
- coding maxlength etc
Example to Style Textarea in Forms
Forms Style Input Borders
Use the border property to style the borders of the input Field. Optionally, you can also code border-radius to remove the sharpness of the borders and make it spherical or round.
Example of Forms Style Input Borders
Icons Inside And Outside Input Text
You can add Icons in a form in such a way that it might look inside the input text or outside the input text. Either you can use your own icons or use icons like font awesome, google font icons, etc.
In the example below, we are using font awesome icons by linking the font awesome library.
Use the important CSS properties like –
- box-sizing: border-box
Example of Input type text with icons
Forms Animated Input Types
The animation property sets animation in CSS.
We are going to show a simple animation on the input fields when the user clicks on the input field.
If you do not know about CSS Animations, please refer the chapter on CSS Animations which we are going to cover later.
Example of Forms Animated Input Types
Forms Style Input Type Submit
Let us style the input type submit button.
Once you understand this example, you can also style the input type button, checkbox, reset, submit, etc.
Example of Forms Style Input Type Submit
The Responsive forms are those which look good in all the devices.
The best practices are to always code width value like width:100%. You should always provide the minimum width of button greater than 42px.
You must set the viewport. The Flex, Grid & media queries are good ways to create Responsive layout.
Example of Responsive Forms
Use <placeholder> and <legend> tags only when necessary.
Avoid using <datalist>, <option>, <optgroup>, <select>, <progress> and <meter> tags.