6 CSS HTML Form Styles

Styling HTML forms with CSS is fun and there’s always something new to explore and learn, but don’t you feel dull when you do it over and over again? Sometimes I do, I too hate to start from scratch, I rather use something that already looks good and works. So here are few CSS from styles I’ve created for your websites, you just have to copy the markup and CSS into your projects and have nice looking form.

Mark Up

Start by dropping HTML Form syntax in your project. Most common form contains name, email, message field and submit button. Just change the class name of the form to use different CSS styles.

1234567891011121314151617181920212223242526272829

<formaction=""method="post"class="STYLE-NAME"><h1>Contact Form <span>Please fill all the texts in the fields.</span></h1><label><span>Your Name :</span><inputid="name"type="text"name="name" placeholder="Your Full Name"/></label>

Conclusion

I have not tested these forms in some old browsers, but it should work fine with all modern browsers. I have also ignored some other input fields such as radio, checkboxs and file fields. I hope you can use these CSS as your base to improve on those elements.

About Sanwebe

Welcome to sanwebe.com, a blog 100% inspired by our ever changing web development world, it's a small effort to provide useful related resources, tips and tutorials to web developers and newbies. Blog was launched back in 2011, and recently been moved from saaraan to sanwebe.com, blog needs some catching up to do, but your valuable feedbacks will always help.