in Design

Simple CSS3 Form Tutorials And Tricks

Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc . That’s why many people are starting to learn everything they can about CSS3. I’ve collected for you some simple CSS3 tutorials that look pretty good and are very useful right now if you are in a hurry and you don’t have the time to make something very complex .

Also you will find a small set of CSS3 tricks that can ease your work.

CSS3 Tricks

 

1. Necessity of labels

Labels are what signify what the input box is for and associate them together. The use of the <label> tag gives you the opportunity to style them uniquely with CSS.

Here’s how you would use the label tag and some CSS to create a stylin’ form with very little markup:

<style> label { position: absolute; text-align:right; width:130px; } input, textarea { margin-left: 140px; } label.check, label.radio { position:relative; text-align:left; } </style> <form> <label for="name">Your Name:</label> <input type="text" name="name" id="name" /><br /> <label for="email">Your Email:</label> <input type="text" name="email" id="email" /><br /> <input type="checkbox" name="subscribe" id="subscribe" /> <label for="subscribe">Subscribe</label> </form>

If you don’t want to apply this styling to ALL forms on your website what I usually do is give my form an id, and then use the ID in the style sheet such as:

#myFormID input, #myFormID textarea { ... } 

 

2. Float your label

To achieve that table-like structure on forms without having to actually use a table, you just have to set a static width, float it the left, align the text to the right, and give it a little right-margin.

label { float: left; text-align: right; margin-right: 15px; width: 100px; }  

 

3. Care with your default styling

Most browsers have default styling applied to input buttons. This makes users have a nice experience but if you want to interfere with this, make sure you know what you are doing. The easiest way to break this is by using a CSS Reset technique like this :

* {   border: none; }

 

4. Use the :focus Pseudo Class

You can apply styling to your input areas and text areas that only takes affect when a user has clicked into that area using the :focus pseudo class. The focus pseudo-class is a dynamic selector that allows certain elements to be styled when they gain focus. Dynamic is the key word here, as focus can be used to change or render the element differently in response to an action from the user.

To change the border color you can use this code :

textarea:focus, input:focus {         border: 2px solid #900; } 

 

 CSS3 Form Tutorials

 

How to Create a Contact Form using HTML5, CSS3 and PHP

Create a Stylish Contact Form with HTML5 & CSS3

Design a Prettier Web Form with CSS 3

Clean and Stylish CSS3 Form

HTML5 & CSS3 envelope contact form

Fancy Forms: HTML5 + CSS3 – JS

Styling a Simple Form using CSS3

A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Create A Clean and Stylish CSS3 Contact Form

 

Alexandru

Alexandru is the co-owner of TopDesignMag. “If it looks easy, it's hard. If it looks hard, it's impossible. If it looks impossible, it's due tomorrow. At 8 A.M.”

Leave a Reply