Designing with CSS3 become a trend in web design world. The options for fun in CSS3 is the modern design elements that can be created without graphics. Most of the modern browsers now support for CSS3. Today I will show you how to design a contact form in CSS3.
Let start with HTML
Styling with CSS
box-shadow accepts four parameters
- shadow color
In my example
shadow color: rgba(0,0,0,0.55);
For deeper view please visit my previous tutorial: How to Draw Speech Bubble and Shapes with CSS3
Letterpress Text Effect with Text-Shadow
Add Form Element in HTML
We are making this form with labels.This is essential when creating accessible forms. The
“for” attribute of the label references the ID of its associated form element. I used <ul> to reduce the complex tables or DIV structures.
The email input type is designed to hold either a single email address or an email address list, so that’s the perfect candidate for our email field.
Mobile devices get the most benefit from this type of form field, because the virtual keyboard layouts will change making entering email addresses easier.
This is more useful if your visitor uses an iPhone, because it displays a different keyboard layout, displaying helper buttons for quickly entering web addresses, similar to the keyboard displayed when entering a URL into Mobile Safari’s address bar.
You can really speed up data entry if you place the user’s cursor in the first field on the form when they load the page. Now HTML5 provides this capability as part of the language.
you can add the autofocus attribute to any form field.
Placeholder text provides users with instructions on how they should fill the fields.
To add placeholder text, you just add the placeholder attribute to each input field. Like this:
HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field. Some browsers remember data that users have previously typed in, and in some cases, we want to tell the browsers that we rather not let users do that. We have added the attribute to the password fields on this form.