With CSS, you can improve the look and feel of HTML forms. You can make your HTML forms responsive and elegant. In this tutorial, we’ll explore different CSS properties that can be used to design HTML forms.
The CSS form we will design will look like this at the end.
Here below is the basic HTML form structure that we’re going to style with CSS. The complete HTML code for the form is given below.
form action="" method="post"> label for="name">Name/label>br> input type="text">br> label for="email">Email/label>br> input type="email">br> label for="age">Age/label>br> input type="number">br> label for="country">Country/label>br> select id="country" name="country"> option value="United States">United States/option> option value="India">India/option> option value="uae">United Arab Emirates/option> option value="Canada">Canada/option> /select>br> label for="gender">Gender/label> input type="radio"> Male input type="radio"> Female br> label for="message">Message/label>br> textarea name="msg" id="message" cols="30" rows="10">/textarea>br> input type="submit"> /form>
The above form has 2 text Input Fields, 1 email field, 1 age field, a country selection dropdown, radio buttons for gender, and a text area for writing the message with a form submit button at the end. If you don’t know about the elements and tags that are used to create HTML forms then first you should check out this tutorial about HTML forms elements complete guide.
However, the above HTML form code output will look like as shown below.
The form has not any CSS styling that’s why it is looking very simple and this is what we are going to discuss now.
With CSS, we can make our HTML form elegant and responsive which will look pretty and will work on any device screen. So, let’s begin with that.
CSS Form Width and Margin
First and foremost, we should define the form width so that we can place the form in the center of the screen. For this, I will apply the width property and set the width to 50% of the screen. And also will set the margin property to auto as shown in the CSS code below.
>
Now, as you can see below our CSS form is in the center of the screen.
Tip: There are 2 more ways for centering a form that you can check in this tutorial about How to center a form in CSS.
CSS Form Background Color and Padding
Now, I will use the CSS background-color property to give our form a background color of gray. Which will make our form container with a width of 50% visible on the screen. And 50px padding to the
This post first appeared on WebCodzing - Web Development Tutorials, please read the originial post: here