How To Create Horizontal Form Using CSS Within A Minute?

how to create horizontal form using css

There are many bloggers, web designers and developers seeking for the right code to display form fields horizontally. When you build a website and want to show the form input fields inline then it is necessary to have a little bit of knowledge about the CSS.

There are many methods which can help you to do this job. But here, I am going to let you know how to create horizontal form using CSS and HTML. If you are a newbie in the field of web development and designing then it would be better to learn both the languages.

How To Create Horizontal Form In CSS?

You just have to create the form field using the HTML and the set the display property using the CSS. If you are using the WordPress form which can be called just by a simple WordPress function using the PHP.

If you are creating a form for the newsletter box or anything else to show on your website then you can create it using the HTML. I have encountered the problem that sometimes the inline CSS property doesn’t work to show the form fields horizontally.

In this post, I am going to show you the creating of the form and will set it horizontally.

Create form using HTML.

<form><ul>

<li><input type=”text” id=”name” value=”name”></li>

<li><input type=text” value”email” id=”emailaddress”></li>

<li><input type=”button” value”subscribe” id”subscribe-button”></li>

</ul>

</form>

In the above form I have created the name field, email address field, and subscribe button. To generate the form for your email providers, you have copy the form code from their source.

The form action and the validation will depend on that code. It is the simple form using the HTML to show you the proper method to display form fields,

You have created the form but how would you show it horizontally. I am going to provide just a simple one line code which would work for you.

The CSS code is:-

form ul { list-style-type: none; }

form ul li { display: inline-block }

This lines will adjust the form fields in a line and now you can design the fields using other CSS properties like padding, margin, color, background-color.

The first line is used to remove the bullets of the unordered list.

how to create horizontal form using css

It’s rare to use the <ul> tag of the HTML in the form creation. But this would work perfectly if your input fields are not accepting other codes to align in one line.

I have set the property to the “inline-block” which will give you the freedom the adjust the padding and margin without altering any other design.

If your form fields go outside the form box the set the box-sizing property. It won’t let your form fields to overflow from the box. Set:-

form { box-sizing: border-box; }

Are you Going to Use This Method To Display Form Fields Horizontally?

Well, it depends on your choice whether you want to show the input items as the list items or set a label for them. You know that there are many ways to reach the final destination. You can set the display property for the input fields as “inline”.

You can float the input items and adjust the position using the margin. But all codes don’t work for everyone. So, I have provided the simplest working method to create a horizontal form in CSS. If you still face any problem then feel free to ask.

by Ravi Chahar

A WordPress Professional and a LinkedIn influencer. A coder by passion and a blogger by choice. WordPress theme development is what he can rock with. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, theme development, design issues and what not.

2 comments

  1. Thanks to this guide, has completely find that hard to understand CSS and having a horizontal form can save more space,

    1. Hey Louis,

      It’s not that much hard to understand this language. It is the simple code which can help you to align the form fields in the same line. Of course, it would save the space.
      Thanks for stopping by.
      Enjoy the day.
      ~Ravi

Leave a Reply

Your email address will not be published. Required fields are marked *