If you've worked with HTML forms before, this code will look familiar. But there are also some peculiarities. The fields have placeholders and some attributes that are new.

Placeholders

The placeholder attribute allows you to include default text in a field that will disappear when the element receives focus or when the field is filled. We used to do this with JavaScript help, but now everything has become much easier thanks to the new attributes.

"required" attribute

The required attribute prevents fields from being left empty until the form is submitted. If the user does not fill the field, the following error appears.

A new selector is also included in CSS3 (:required). Here's an example:

Input ( border : 1px solid red ; )

Field types

Our first field is of type email (input types are another HTML5 innovation). If the user does not fill in the email address field, the following notification will appear;

Using such an input is also convenient because it will be more convenient for users of mobile devices (iPhone or Android) to fill out the field with the highlighted «@» .

The new features offered for HTML5 forms are powerful and easy to implement, but they are not supported everywhere, for example;

placeholder attribute only support modern browsers - Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+. If you want to fix this, use this crutch in combination with Modernizr.

Same with the required attribute. The error notification cannot be personalized, but the error will remain: "Please complete the fields" instead
"Please enter a name", this attribute is also only supported in normal browsers.

Label ( display : block ; color : # 999 ; ) .cf :before , .cf :after ( content : "" ; display : table; ) .cf :after ( clear : both ; ) .cf ( *zoom: 1 ; ) :focus ( outline : 0 ; )

All fields except the "submit" field will have the following styles:

Loginform input:not ([ type=submit] ) ( padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 . 3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 . 1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 . 5 ) ; }

And here are the styles for the button to submit the form.

Loginform input[ type=submit] ( border : 1px solid rgba(0 , 0 , 0 , 0 . 3 ) ; background : #64c8ef ; /* Old browsers */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linear, left top , left bottombottom, color-stop( 0 % ,#64c8ef ) , color-stop( 100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" , GradientType=0 ) ; /* IE6-9 */ color : #fff ; padding: 5px 15px; margin-right : 0 ; margin-top: 15px; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 , 0 , 0 . 3 ) ; }

That's all! We hope you found this tutorial useful.

Authorization and registration are one of the most important functions of any website, which largely determine the face of the resource. The number of users in your database directly depends on the availability and ease of registration, and the ease of authorization dramatically affects the UX and the user’s desire to continue the relationship with you. Also, simple, understandable and flawlessly functioning forms will save you from a barrage of letters to technical support, which will certainly become a headache for you if the registration and authorization process on your site remains problematic and complicated with a sufficiently large number of users.

For this reason, we have already discussed the issue of registration/authorization forms more than once, both in and.

In today’s material we will discuss 10 important and relevant approaches, the integrated use of which will allow you to create forms with high usability and, importantly, accessibility. For readers encountering this term for the first time, let me explain - accessibility there is a degree of accessibility of a service or site for people with disabilities, starting with users who have impaired color perception, and ending with those who cannot control the mouse very well and accurately. By the way, one of the following articles will be entirely devoted to the topic of accessibility, since users, web developers and optimizers in RuNet are still unfamiliar with this concept and related approaches, and in the light of development trends in the Russian-speaking segment of the network, the issue of website accessibility for people with disability becomes acute and relevant.

1. The best way authorization is its absence.

Yes, our first point is a truism and a basic truth of UX - the less action required from the user, the better. Often, when using some sites, I have a question: “Why should I register here in order to use a certain service once?” And although there are fewer such sites that oblige you to register in the absence of compelling reasons, on many eCommerce sites you can still find registration, the only purpose of which is to complicate the user’s life. This, first of all, applies to a variety of online stores that require you to register even for a one-time purchase of some mere trifle.

So, first, make sure that you really need user registration in order to provide him with the proper service and full functionality. If so, then first consider the simplest and most quick way authorization, namely the use of social networking modules that are ubiquitous on the Internet this moment and providing user authentication in one click. And if a few years ago, in response to the proposal to use social network modules, one could argue that not all users have yet gone to social media and services, now the absolute, overwhelming majority of users have an account in one or another service.

There is a large number of extremely popular services, reaching millions of users around the world. There is a very good chance that your average user has an account with at least one of all the services presented. And you can really imagine a lot: starting from the traditionalFacebookand endingYahoo, AmazonAndGitHub.

The second persistent objection to social modules, previously encountered in the process of web development, was user concerns regarding the site’s compliance with the confidentiality and security of personal data that the user provides to the site automatically, identifying his identity through one of the social network accounts. At the moment, along with the spread and unprecedented integration of social services into our daily lives, such fears among users are becoming less and less common, while almost automatic clicking on authorization buttons through social networks has become a constant practice.

2. Email must be an alternative to any other user ID.

Unlike various names and nicknames, which are often forgotten by users, in most cases a person always remembers his email. Frankly, I am always cheered up by a site that is not too demanding of me and that is ready to accept both my unique name specified during registration and the email specified during registration. In general, it is just a great idea to allow the user to log in using both mail and a unique name. The big advantage of this approach is largely due to the fact that email and password are a strong connection that lives in the user’s mind. He turns to it every time he registers on a new site, so why not develop this logical combination and give the opportunity to use it when logging in?

Ability to enter your email in the fielduser– the most eloquent manifestation of concern for the user at the authorization stage.

In addition, another important point is also associated with the user’s email - during the procedure for restoring access to the site when forgotten password, do not make it mandatory to provide a unique username - unlike email, it is actually very often forgotten.

3. Opportunity fast switching between authorization and registration forms.

It would be quite logical to place the registration and authorization entry forms next to each other. And although they have different functions and the algorithm of actions, there is still a certain conceptual similarity between them. By compactly placing the registration and authorization forms side by side, as well as providing an easy transition between them (in one click), you will significantly improve the usability of the site. Besides, in a good way The implementation will be to place two buttons “Registration” and “Login” next to each other, when clicked on which the main form will be displayed either in the form of a pop-up window or a sliding panel.

The most compact and close location of registration and login forms on the magazine’s websiteThe Verge .

4. Simple and concise language.

Despite the fact that the terminology used in RuNet has become much better recently, unclear wording and ambiguous words can still be found on buttons indicating such simple and trivial things as registration and authorization.

Anyway, there are several different approaches to the choice of labels on the buttons. Of course, in most cases it makes the most sense to use concise and unambiguous labels such as “Login”, “Login”, “Create”, “Join” and “Register”. However, if you are trying to create a certain effect, then it is quite acceptable to move away from laconic formulations to more colorful ones, such as “Become a participant”, “Enter the world” and so on.

It is worth noting that if you have the time and resources, conducting A\B testing will always be useful.

As an example of how user preferences form and change, Jeff Atwood's survey demonstrates the popularity of in various ways Login button designations in the United States and Great Britain. We hope that soon such analytics will become commonplace on the RuNet.

« Sign In » is increasingly used instead of any other wording.

5. Compatibility of authorization forms with password managers different browsers.

Password managers integrated into browsers are a great invention that greatly facilitate the use of the Internet. They have become such a familiar part of our Everyday life, that we have long stopped thinking about them as such. We simply take for granted the fact that after a single login on a site we will not have to do it again, we are used to seeing forms filled out automatically, and we begin to feel very uncomfortable when we discover that a form on a site on which We have already logged in, it turns out to be empty.

Considering all this, testing the login form with password managers of different browsers is a necessity that cannot be neglected. Of course, in addition to managers integrated into the browser, users may well use third-party managers, but, as a rule, provided that your form interacts correctly with all common browsers, it will be filled out correctly by a third-party password manager.

6. Warning and automatic correction of input errors.

Users very often make mistakes when filling out forms. It is typical that often errors made by the user are not obvious to him, even if it is a trivial input with an incorrect layout or a missing letter in the password. We must work with user errors in two directions at once - clearly notify the user, indicating errors, and automatically correct what can be corrected.

As for notifications, a set of warnings about enabled Caps Lock, incorrect layout or invalid characters is basic - it cannot be neglected; for the sake of ensuring user comfort, you must indicate all errors without exception.

Correcting typos and input errors in automatic mode– a rather ambiguous and controversial topic. Most correctly, automatic correction in forms can work with typos when the user specifies an email. Missing letters in a domain or a missing period can easily be corrected using an automatic algorithm, without fear of correcting anything the user entered correctly.

7. Should users be forced to choose an “appropriate” password?

This is another controversial issue among web developers. To begin with, it should be recognized that despite all the warnings, the average user still does not attach enough importance to coming up with sustainable and complex password. What to do with this fact is up to the team of each site to decide for themselves. You can observe how registration forms behave differently on different sites when it comes to entering a password. Some forms are absolutely undemanding to the user and do not fundamentally burden him with the need to comply with any rules, while others, on the contrary, do everything to force the user to come up with a truly strong password.

The choice of which approach you should use depends on the nature of your project and how much it involves storing personal user data. If your site has a strong entertainment focus and the user account is not of particular value to third parties, then, accordingly, there is no need for you to establish strict rules for entering a password.

If the activity of your site is related to the storage of personal data and, probably, to the implementation of critical actions on the part of the user, including financial transactions, then in this case you will have to, to one degree or another, control the user at the password entry stage.

There are several different ways to control how a user can come up with a password. The simplest is to use one of the algorithms that analyzes the complexity of the password and informs the user about the degree of complexity and security of the invented combination. At the same time, the algorithm may well set a certain critical threshold that the user must overcome, otherwise the password will be considered too simple and will not be accepted by the system. This approach is widely used on a wide variety of sites.

Classic input support with color indication using the example of Yandex.Mail.

In addition to controlling complexity and limiting the minimum number of characters, another rather interesting method is also used, which consists in analyzing and comparing the user password with a database of the most popular passwords in the world, numbering 10 thousand combinations. If the password entered by the user is not original and is one of the most common, the user receives a corresponding warning and is prompted to select a different combination.

« That password is too common» – notification onDiscourse, indicating that the user's chosen password is too simple and common.

Nevertheless, back side all such actions aimed at “educating” the user are almost guaranteed irritation from experienced users who soberly assess the situation and make their own decision about whether it is worth it in this case make do with a simple, symbolic password, or you need to use a more complex one. For this reason, you need to build a balanced and consistent policy for evaluating user passwords - extremes in this matter can result in both massive hacking of your user accounts (and, as a result, an incredible load on your support team), and irritation and departure of visitors who are tired suggest suitable passwords to your algorithm.

8. Allow the ability to switch between input fields using the Tab key and highlight elements when switching.

Yes, despite everything, users who still switch between form fields using the Tab key are still alive and very active. By the way, the author of this article himself often uses Tab when filling out various forms. And by the way, how hotkey, Tab speeds up your work a lot.

Web developers should not forget about our existence - be sure to test your forms for correct response to the Tab key. And remember that in addition to the fact that such switching between forms itself must take place, you must also take care of sufficient visual highlighting of the active elements.

Focus when switchingTab`om inFirefoxAndChrome.

9. How to properly limit the number of attempts to authorize or restore access to your account.

Sooner or later, multiple attempts at authorization or password recovery should be stopped. You can be lenient with 5 or even 10 attempts, but their persistent continuation should alert you. You should work with further operations for authentication, registration or account recovery. The most obvious way is after N number of attempts to ask the user (or whoever is hiding under the user’s mask) to enter a captcha in order to weed out bots. In addition, a good way is to block the account on certain time in case of failure of multiple authorization attempts and all other similar actions. Note that the accuracy in this approach refers not only to the need to give the user the opportunity to actually make a mistake a sufficient number of times, but also to the moderate blocking time. The first blocking that you will be forced to implement should not be too long - just warn right moment the one who is trying to carry out an action with the account, that the next attempt will result in blocking for a certain time. If after this time the user, attacker or bot continues to make mistakes, then you can sequentially increase the time interval to impressive values.

It is worth noting that such techniques with successively increasing temporary blocking must be tied to one IP - do not forget that after the attacker’s unsuccessful actions leading to blocking, your site may well be used by a real user, whose IP will, of course, be different.

10. Remember that color alone may not be enough to indicate errors.

In many ways, the question of highlighting user-made errors using additional means that do not relate to the usual color designation depends on the scale of your project and the number of existing and potential audiences. The fact is that color perception disorders are common among users wider than we are used to thinking about them. Already every 12th male user is colorblind, and every 30th, regardless of gender, has poor vision. It may seem to you that these indicators are not critical and you should have few such special users, but when you reach a certain critical number of registered visitors, you will inevitably deal with such people. It will be great if you give them a little attention and make their tasks easier.

When talking about additional means that can be used to indicate user errors, we mean such simple symbols as a triangle with exclamation mark, a prominent cross next to the field containing the error, and other similar visual indications. In order to get a rough idea of ​​the importance of such designations for people with impaired color perception, consider a typical example:

Registration formPayPalin black and white.

When analyzing this screenshot of the PayPal registration form, converted to black and white mode, our attention is drawn, first of all, to the triangle with an exclamation mark placed in the captcha field. Judging by the overall picture, we can conclude that the user forgot to enter only the captcha, and that everything is in order with the remaining fields (regardless of whether they are filled in or not).

Registration formPayPalin full color.

As we can see, in full-color reality, all fields are marked accordingly, and not just the captcha field. However, the very triangle that would in any case inform a visitor with a color perception disorder about an error is located in only one field. It is noteworthy that this implicit, and seemingly completely inconspicuous error was later eliminated by optimizers:

New registration formPayPalunambiguously informs the user of an error, regardless of whether he is able to distinguish colors.

Just like design approaches in general, the way we create modern and relevant registration forms is constantly evolving. Despite the fact that such an area of ​​​​web development as authorization and registration forms has established rules and traditions, the approaches to creating these forms are constantly changing, just as the user experience itself is changing and user perception. By constantly monitoring changes in user behavior and the trends that web developers and optimizers themselves create, you can always keep all the components of your project, including registration and authorization forms, relevant and easily accessible to the user. And we, in turn, will continue to keep you up to date with the latest trends in website design and optimization. We wish you high conversions and large user audiences!

Hello! Now we will try to implement the simplest registration on the site with using PHP+ MySQL. To do this, Apache must be installed on your computer. The working principle of our script is shown below.

1. Let's start by creating the users table in the database. It will contain user data (login and password). Let's go to phpmyadmin (if you are creating a database on your PC http://localhost/phpmyadmin/). Create a table users, it will have 3 fields.

I create it in the mysql database, you can create it in another database. Next, set the values ​​as in the figure:

2. A connection to this table is required. Let's create a file bd.php. Its content:

$db = mysql_connect("your MySQL server","login for this server","password for this server");
mysql_select_db ("name of the database we are connecting to", $db);
?>

In my case it looks like this:

$db = mysql_connect("localhost","user","1234");
mysql_select_db("mysql",$db);
?>

Save bd.php.
Great! We have a table in the database and a connection to it. Now you can start creating a page on which users will leave their data.

3. Create a reg.php file with the contents (all comments inside):

Registration

4. Create a file, which will enter data into the database and save the user. save_user.php(comments inside):

{
}
//if the login and password are entered, then we process them so that tags and scripts do not work, you never know what people might enter


//remove extra spaces
$login = trim($login);
$password = trim($password);
// connect to the database
// check for the existence of a user with the same login
$result = mysql_query("SELECT id FROM users WHERE login="$login"",$db);
if (!empty($myrow["id"])) (
exit("Sorry, the login you entered is already registered. Please enter another login.");
}
// if there is no such thing, then save the data
$result2 = mysql_query("INSERT INTO users (login,password) VALUES("$login","$password")");
// Check if there are errors
if ($result2=="TRUE")
{
echo "You have successfully registered! Now you can enter the site. Home page";
}
else(
echo "Error! You are not registered.";
}
?>

5. Now our users can register! Next, you need to create a “door” for already registered users to enter the site. index.php(comments inside) :

// the whole procedure works in sessions. It is where the user's data is stored while he is on the site. It is very important to launch them at the very beginning of the page!!!
session_start();
?>

Home page

In file index.php We will display a link that will be open only to registered users. This is the whole point of the script - to limit access to any data.

6. There remains a file with verification of the entered login and password. testreg.php (comments inside):

session_start();// the whole procedure works on sessions. It is where the user's data is stored while he is on the site. It is very important to launch them at the very beginning of the page!!!
if (isset($_POST["login"])) ( $login = $_POST["login"]; if ($login == "") ( unset($login);) ) //enter the login entered by the user into $login variable, if it is empty, then destroy the variable
if (isset($_POST["password"])) ( $password=$_POST["password"]; if ($password =="") ( unset($password);) )
//put the user-entered password into the $password variable, if it is empty, then destroy the variable
if (empty($login) or empty($password)) //if the user did not enter a login or password, then we issue an error and stop the script
{
exit("You have not entered all the information, go back and fill out all the fields!");
}
//if the login and password are entered, then we process them so that tags and scripts do not work, you never know what people might enter
$login = stripslashes($login);
$login = htmlspecialchars($login);
$password = stripslashes($password);
$password = htmlspecialchars($password);
//remove extra spaces
$login = trim($login);
$password = trim($password);
// connect to the database
include("bd.php");// the bd.php file must be in the same folder as all the others, if it is not then just change the path

$result = mysql_query("SELECT * FROM users WHERE login="$login"",$db); //retrieve from the database all data about the user with the entered login
$myrow = mysql_fetch_array($result);
if (empty($myrow["password"]))
{
//if the user with the entered login does not exist
}
else(
//if exists, then check the passwords
if ($myrow["password"]==$password) (
//if the passwords match, then we launch a session for the user! You can congratulate him, he got in!
$_SESSION["login"]=$myrow["login"];
$_SESSION["id"]=$myrow["id"];//this data is used very often, so the logged in user will “carry it with him”
echo "You have successfully entered the site! Home page";
}
else(
//if the passwords do not match

Exit ("Sorry, the login or password you entered is incorrect.");
}
}
?>

OK it's all over Now! The lesson may be boring, but very useful. Only the idea of ​​registration is shown here, then you can improve it: add protection, design, data fields, loading avatars, logging out of the account (to do this, simply destroy the variables from the session with the function unset) and so on. Good luck!

I checked everything, it works properly!

So, there is a task - to make registration in the system and the possibility of authorization. How to do it? Let's start in order.

Registration on php

Everything is simple here. A data warehouse is being created for users. Typically this is a database table. It includes fields such as id, username and password. The remaining fields are optional. You can collect users' e-mails, their addresses, possible IPs, time of access to the network, code words from bank cards, security questions...

In general, the main thing is the login-password pair.

First important point- you cannot store user passwords in open form. That is, like text. It’s impossible because if someone else gains access to the database, they will receive a database of user login passwords, which they are unlikely to like. And if you consider that many users have login-passwords on different services the same ones - this jeopardizes personal data and finances and personal correspondence and everything else.

Passwords must be stored as a hash. Hashing is an operation that turns the original data into some kind of cast of a known length. This is good because the cast is unique. That is, if we change at least one character in the source data, the output of the hashing operation will turn out completely different, beyond recognition. The hashing operation is irreversible, that is, it will not be possible to expand the original data from this snapshot. This is how it differs from encryption.

MySQL and PHP have the same common and secure hashing function - md5. This algorithm takes data and gives a fingerprint.

So, we receive data from the user, check if it is empty, if it does not contain any characters we don’t need (don’t limit users too much). And now we make a request like this:

INSERT INTO `users` (`id`,`username`,`password`) VALUES("",$quoted_username,MD5($quoted_password));

Please note that I specifically named the variables $quoted_ because before inserting them into the query, they must be escaped using the mysql_real_escape_string() function. Since this function is very often used, and is written very long (I love PHP architects), I recommend cramming it into your shell. For example, like this:

Function quote($var) ( return mysql_real_escape_string($var); )

Authorization in php

We have added a new user and now he is authorized. We draw him a login-password form and catch his data. What's next? After all, we received the password in clear text, and in the database there is a hash of the password. Will I have to convert the password into a hash and then compare them? No, you can do it simpler - in one request.

SELECT * FROM `users` WHERE `login`=$qoted_login AND `password`=MD5($quoted_password);

If the query returns a string, it will be a string with user data. If not, there is no such user in the table. The user data will be very useful to us - it’s worth getting it into an associative array.

Remember user

Now we need to remember that the user is authorized and know exactly who it is. The first thing that comes to mind is to use cookies for this. Indeed, put the user’s login and id into cookies and always know who is requesting the page at the moment.

But this is a bad practice. Why? Because a cookie is a file that is stored in the user's browser and data from this file is transmitted to the server in every request. Firstly, they are transmitted as text, which means they are easy to intercept. Secondly, this is simple text sent by the user. Therefore, it can literally be rewritten. For example, if we decide to store the username “Vasya” in cookies, he can open the cookie management in his browser, find the desired cookie and correct it to, say, "Admin". That's all. Now, with each request, we will receive a cookie, which will tell us the user’s username - “Admin”.

Therefore, it is safer to store all data on the server in a place inaccessible from the web. In some folder that cannot be accessed from the browser. All data about the user should be written to this folder and read from there every time he requests a document. To find out which user owns which data file, you need to call the file a unique name and throw this name into the user’s cookies. Thus, the user will not be able to find out the name of the file for the Admin user - this file is generated by the system on the server. And this allows you to drag passwords in clear text from document to document.

What I described is session mechanism. In Perl, for example, to use sessions you need to load modules. And in php sessions supported out of the box. In fact, all you need to know is the session_start() function and the $_SESSION array. This is all. I'll tell you now.

In every script where you will write to or read from a session, you need before you output any information call the session_start() function. This will start the session. This function will create a session file if it does not exist or read it if a special cookie was passed to the script.

To write data to a session, you simply need to write it to the $_SESSION array. Now we need to remember the user id.

$_SESSION["userid"] = $userinfo["id"];

All. Now, every time a user requests a script that uses sessions, the value of the $_SESSION["userid"] element will be available to you.

Therefore, when the user entered his login and password, we received his data from the database, which confirms that such a user is in our database, we remember him in the session.

Find out if the user is authorized

Well, it's as easy as shelling pears! Now that you know how sessions work, finding out whether a user is authorized is a matter of one line. Here she is:

If(isset($_SESSION["userid"])) ( print "user is authorized"; )

If a user id is defined in the session, then he has already passed authorization. But how can you find out which user it is? What is his login? Date of Birth? Code word for bank card? Mother's Maiden Name?

Well, obviously - make one query to the users table. We also have the id of this user.

SELECT * FROM `users` WHERE `id`=$quoted_userid

How to log out a user and log out

Well, it's quite simple. If we determine whether a user is authorized by the presence of userid in the session, then in order to log him out we need to remove him from there. It's done like this:

Unset($_SESSION["userid"]);

You can also kill the session just to be sure. This will clear the user's cookie and destroy the session file on the server. In this case, all data will be lost from it. It's done like this:

Session_destroy();

That's all. If you have any questions, don’t hesitate to contact us. Moreover, you can contact me via icq or mail and ask for help with something. I usually don't refuse. If you need serious help, I can ask for a small payment. In addition, I can teach you how to make websites remotely! This is the kind of coach and guru I am :) And if you want to receive lessons and tricks just like that, for free, subscribe to the RSS of my blog.

This post is sponsored by ibooknet.ru, which offers laptop repairs at reasonable prices. Personally, my laptop is fine and I hope I don’t have to fix it. I wish the same for you.

Hello friends! Today we want to bring you another CSS tutorial! With all the radio buttons and dropdowns out of the way, let us move on to designing the forms. In general, we will create authorization forms. Today, almost every web service, application, game, etc. offers (and sometimes even requires) us a subscription, which means the need to have some form through which the user registers or logs in.

With this in mind, we tried to develop several different login forms, some of which were inspired by design ideas from the Internet. Our goal was to give each of them some kind of peculiarity.

A few things before we start:

* You won't see browser prefixes in the CSS code snippets, but they are all there in the source code.
*The purpose of this tutorial is to show you the potential of CSS, especially CSS3, and therefore rendering may vary in IE8 and below. If you plan to provide support for these browsers, try to provide fallback options.
* We don't use attributes like action or method on the form tag, as our goal is to focus on design.
* Here we use box-model, where [width]=[element width]+[padding]+[borders]. This model can be activated with the following code snippet:

*,
*:after
*:before (
box-sizing: border-box;
}
A few words about user friendliness

You need forms for various situations where interaction between the user and your application is inevitable: login, comments, feedback, and many other cases. If you screw up your form, you can be sure that you screw up the user too.
With this in mind, there are a few rules that you should follow in order to make your forms better, more user-friendly. Let's take a look at a small selection.

* Shortcuts: Shortcuts are very important. We are not talking about the “label” tag now, we are talking about the need to clearly and clearly let the user understand the purpose of this or that field. Let's be clear: all fields are the same. And only because the user sees the labels, he understands what needs to be entered in which field. Use shortcuts, or icons, or whatever, as long as the user understands everything immediately and accurately.

* Fields: The more attractive your input fields are, the more pleasant they are to look at and, therefore, the more satisfied the user will be. Create some space around the input fields. Don't embed them in your content. The input fields must be large enough (they must at least contain what is being filled in). Don't make input fields miniature, forcing users to navigate through them using the arrow keys.

* Labels + Fields: Create a binding between your input fields and their corresponding labels. Apply the "for" attribute to labels. Clicking on text input fields is very easy, even on mobile devices. Clicking on a checkbox can cause complications, especially when it comes to mobile navigation. If you implement the ability to click on a shortcut to check a checkbox, you will greatly make life easier for users. We also recommend that you make the input fields large enough so that they are clearly visible when viewed through mobile device.

* Positions: CSS allows us to identify an element by its current position: hovered, focused, active, default, etc. It is important to show the user that they are hovering over something that they can click on or highlight something that they can fill out.

* Confirm button: The confirmation button is the last step when filling out the form. It should be clearly visible. Don't forget about elements that encourage action. Don't use the same style for the confirm button, make it more fun, more attractive! Never use the inscription “Submit”! She's embarrassing! If this is an authorization form, then use the appropriate inscription “Sign in” or “Log in”. If this is a comment form, use something in the “Post” or “Leave a Comment” genre. Tell the user what the button does.

* Attributes and input fields in HTML5: HTML5 provides us with many convenient new attributes and input fields, which greatly facilitates our work with forms. Use these attributes and input fields as needed, and of course, don't forget about fallbacks for unsupported browsers. You can read more about this on Wufoo.

So we've told you everything necessary information! It's time to start developing forms, friends!

Example 1

Marking

Note: As usual, we won't be covering how to use iconic fonts like FontAwesome here. If you want to study this topic, you can visit the official website.
We have two containers that will wrap the input field and the icon. The confirm button will be in a separate container and we are using "button" instead of "input" with an icon inside.
We'll also include stubs to make things even clearer for supported browsers. More information For information about browser support for the placeholder attribute, see CanIUse.com.

CSS code

Let's start by styling the form element itself. The form will be the main shell of our demos, so give it a width and center it using the margins.

Form-1 (
/* Size & position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative; /* For the submit button positioning */

/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: linear-gradient(#eeefef, #ffffff 10%);
}

Form-1 .field (
position: relative; /* For the icon positioning */
}
Important: we set it to relative positioning in order to position the confirmation button absolutely. We do the same with containers.field in order to also position the icons absolutely.
Speaking of icons, let's make them right away.

Form-1 .field i (
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;

/* Line */
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
pointer-events: none;
}
We add a small line to the right side of the icon, setting the right border and box shadow.
Since we want to play with their colors for the :hover and :focus positions, we give them a smooth transition.
The addition “pointer-events: none” allows us to click on the icon area and move focus to the input field that is located below (that is, we are clicking on the field itself).

Now we need to style the input fields:

Form-1 input,
.form-1 input (
font-size: 13px;
font-weight: 400;

/* Size and position */
width: 100%;
padding: 10px 18px 10px 45px;

/* Styles */
box-shadow:
inset 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
transition: color 0.3s ease-out;
}

Form-1 input (
margin-bottom: 10px;
}
We need to make sure that neither the icon nor the enter button overlaps the text. This can be done by giving the input field good padding. We also set the bottom margin to the first input field in order to avoid overlapping the second field.

Form-1 input:hover ~i,
.form-1 input:hover ~ i (
color: #52cfeb;
}

Form-1 input:focus ~ i,
.form-1 input:focus ~ i (
color: #42A2BC;
}

Form-1 input:focus,
.form-1 input:focus,

outline: none;
}
It's important to note two things here: we use a related selector (~) to change the color of the icons when interacting with input fields: light blue for the hover position, dark blue for the active position. And for the Chrome browser we exclude the outline.

The last thing we need to design is the confirm button. Due to the not very attractive overlay (damn z-index parameter), we had to wrap it in a container in order for everything to work. We could probably remove this container, but then we'd have to resort to other fancy CSS tricks, and we don't need that.

Form-1 .submit (
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 17px;
right: -25px;
padding: 10px;
z-index: 2;

/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 2px rgba(0,0,0,0.1),
0 3px 2px rgba(0,0,0,0.1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}
Everything is quite simple here: we create a circle and place it on top of our shape, a little to the right. Block shadows will help accentuate this overlay effect.

Problem: Block shadows accentuate this blending effect, but they can also ruin it. In fact, we can see the shadow at the form border (the space between the margins and the right margin of the form).

In general, we can hide these shadows with masks of the same background color of the shape. And this work is intended for a pseudo-element!

Form-1 .submit:after (
/* Size and position */
content: "";
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;

/* Styles */
background: #ffffff;

/* Other masks trick */
box-shadow: 0 62px white, -32px 31px white;
}
We have three shadows that need to be hidden because our circle element is at the intersection of the space between the margins and the right padding of the form. We place the first one on top of the circle element. And through the box-shadow parameter we simulate the other two masks. We find this a bit difficult to explain, so we recommend that you open your development tool and disable the box-shadow line on .submit:after to understand what's going on here. Last but not least is the confirm button itself:

Form-1 button (
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;

/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;

/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
0 1px 2px rgba(0,0,0,0.35),
inset 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);

Cursor: pointer;
}
Finally, we style the button's hover, focus, and active position(pressed state):

Form-1 button:hover,
.form-1 button:focus (
background: #52cfeb;
transition: all 0.3s ease-out;
}

Form-1 button:active (
background: #42A2BC;
box-shadow:
inset 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}
It's pretty simple: a solid color for the hover and focus positions. But wait, there's more here! Since we are using gradation in the standard position, and the gradations cannot smoothly transition into solid text, the browser first disables gradation, then applies background color. This behavior causes an outbreak white, when you hover over the button, which we think looks cool! It's like a flash of light!

Example 2

Marking

CSS code

Let's start by giving some basic styling to the entire form:

Form-2 (
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;

/* Styles */
background: #fffaf6;
border-radius: 4px;
color: #7e7975;
box-shadow:
0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
We'll create a semi-transparent border by applying box shadows.

Now that we've given our form some basic styling, let's work on the title. In the title we have three different styles: bold (bold), caps ( capital letters) and dark gray (dark gray); bold (bold), caps (capital letters) and orange (orange), as well as light (refined), low ( capital letters) and light gray (light gray). So, the main style + 2 additional ones:

Form-2 h1 (
font-size: 15px;
font-weight: bold;
color: #bdb5aa;
padding-bottom: 8px;
border-bottom: 1px solid #EBE6E2;
text-shadow: 0 2px 0 rgba(255,255,255,0.8);
box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

Form-2 h1 .log-in,
.form-2 h1 .sign-up (
display: inline-block;
text-transform: uppercase;
}

Form-2 h1 .log-in (
color: #6c6763;
padding-right: 2px;
}

Form-2 h1 .sign-up (
color: #ffb347;
padding-left: 2px;
}
Next, we will use two paragraphs that will be located next to each other. Each will take up 50% of the available space in the form element and, thanks to “border-box” box-sizing, the padding will be calculated within that 50%. So we can create a gap between these two elements.

Form-2 .float (
width: 50%;
float: left;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,1);
}

Form-2 .float:first-of-type (
padding-right: 5px;
}

Form-2 .float:last-of-type (
padding-left: 5px;
}
Our shells are exposed. Let's style the elements inside them! We have a shortcut and an input field. In this example, the icon inside the shortcut:

Form-2 label (
display: block;
padding: 0 0 5px 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
font-size: 11px;
}

Form-2 label i (
margin-right: 5px; /* Gap between icon and text */
display: inline-block;
width: 10px;
}
Note: Using cursor: pointer on labels helps users understand that they can click on that element. This is a very important point.

Form-2 input,
.form-2 input (
font-family: "Lato", Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
display: block;
width: 100%;
padding: 5px;
margin-bottom: 5px;
border: 3px solid #ebe6e2;
border-radius: 5px;
transition: all 0.3s ease-out;
}
Don't forget about pointing and focusing positions:

Form-2 input:hover,
.form-2 input:hover (
border-color: #CCC;
}

Form-2 label:hover ~ input (
border-color: #CCC;
}

Form-2 input:focus,
.form-2 input:focus (
border-color: #BBB;
outline: none; /* Remove Chrome's outline */
}
See how we use the related selector (~) to hover input fields when we hover over the labels. Cool, isn't it?

Now, regarding the confirmation buttons. But wait, since they both float in their own container, we need to apply clearfix to them. Have you forgotten how we should do this?

Clearfix:after (
content: "";
display: table;
clear: both;
}

Form-2 input,
.form-2 .log-twitter (
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;

/* Styles */
box-shadow: inset 0 1px rgba(255,255,255,0.3);
border-radius: 3px;
cursor: pointer;

/* Font styles */
font-family: "Lato", Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
}

Form-2 input (
margin-left: 1%;
background: linear-gradient(#fbd568, #ffb347);
border: 1px solid #f4ab4c;
color: #996319;
text-shadow: 0 1px rgba(255,255,255,0.3);
}

Form-2 .log-twitter (
margin-right: 1%;
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
Both buttons have 49% width and left/right margins, allowing for a small gap between them. Now we will add to them the hover position and the active position.

Form-2 input:hover,
.form-2 .log-twitter:hover (
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}

Form-2 input:active,
.form-2 .log-twitter:active(
top: 1px;
}
Thanks to relative positioning, we can apply top: 1px to the buttons in the active position to make them appear as if we are clicking them.

Important: for browsers that do not support box-shadow (and there are still some), we use a change in background-color. The "no-boxshadow" class will be applied to HTML by Modernizr in case the browser does not support box shadows. This is very good example Here's how we can quickly create a fallback for older browsers:

No-boxshadow .form-2 input:hover (
background: #ffb347;
}

No-boxshadow .form-2 .log-twitter:hover (
background: #2a8ac4;
}
javascript code

Hey, did we forget about our little password display feature? That’s exactly what we’ll do now! First, let's find out, did you know that we can't change the "type" attribute of an input element? Impossible! In order to make the "show password" label a switch, we need to remove the existing password field and create a text input field instead.
We found a little one from Aaron Saray that will help us get the job done. Let's get a look:

$(function())(
$(".showpassword").each(function(index,input) (
var $input = $(input);
$("

").append(
$("").click(function() (
var change = $(this).is(":checked") ? "text" : "password";
var rep = $(" ")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr("class", $input.attr("class"))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($(" ").text("Show password")).insertAfter($input.parent());
});
});
What does this script do? A few things:

It denotes all input elements with the class .showpassword.
Creates new container(.opt).
Inside this container, it creates a checkbox with a label attached to it.
It inserts a container after the field's parent element.showpassword.
When a checkbox is clicked, it deletes the .showpassword input element and creates another one in its place, but with the corresponding “type” attribute.

Let's not forget about styling the checkbox and the new shortcut.

Form-2 p:last-of-type (
clear: both;
}

Form-2 .opt (
text-align: right;
margin-right: 3px;
}

Form-2 label (
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 400;
text-transform: capitalize;
}

Form-2 input (
vertical-align: middle;
margin: -1px 5px 0 1px;
}
Last but not least, we need to add a few lines of jQuery code to change the icon when the checkbox is checked! It's just very simple, but incredibly effective!

$("#showPassword").click(function())(
if($("#showPassword").is(":checked")) (
$(".icon-lock").addClass("icon-unlock");
$(".icon-unlock").removeClass("icon-lock");
) else (
$(".icon-unlock").addClass("icon-lock");
$(".icon-lock").removeClass("icon-unlock");
}
});
Example 3

Marking

CSS code

Form-3 (
font-weight: 400;
/* Size and position */
width: 300px;
position: relative;
margin: 60px auto 30px;
padding: 10px;
overflow: hidden;

/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
The shadow under the login form looks special because of the negative radius. We can use shadow like this.
Let's dive a little deeper into the structure of our form. As for the fields, here we use two p tags wrapping the label and the input element, both of which are floats. This means that we need to apply clearfix to our containers (see previous example).

Let's add some styling to our labels and text and password input fields, and finalize their hover and focus positions:

Form-3 label (
/* Size and position */
width: 50%;
float: left;
padding-top: 9px;

/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}

Form-3 input,
.form-3 input (
/* Size and position */
width: 50%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;

/* Styles */
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;

/* Font styles */
font-family: "Ubuntu", "Lato", sans-serif;
color: #fff;

Form-3 input:hover,
.form-3 input:hover,
.form-3 label:hover ~ input,
.form-3 label:hover ~ input (
background: #27292c;
}

Form-3 input:focus,
.form-3 input:focus (
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #51cbee;
outline: none; /* Remove Chrome outline */
}
Now that we have attractive input fields, we need to create a small checkbox for the "Remember Me" option, as well as a confirmation button. These two things will be aligned next to each other:

Form-3 p:nth-child(3),
.form-3 p:nth-child(4) (
float: left;
width: 50%;
}
We'll use advanced CSS selectors to define them, but you can use the class if you want (or if you have to, to support legacy browsers). Anyway, let's get started designing the checkbox and its label:

Form-3 label (
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}

Form-3 input (
margin-left: 10px;
vertical-align: middle;
}
Since this shortcut is very different from the others, we need to change a couple of things to make it completely correct. It is best to first exclude all previously exposed styles. As for the checkbox, we'll add a small margin to its right side so that the label doesn't stick to it, and we'll also adjust the vertical alignment a little.

Finally, our confirm button with hover position:

Form-3 input (
/* Width and position */
width: 100%;
padding: 8px 5px;

/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #38a6f0;
cursor:pointer;

/* Font styles */
font-family: "Ubuntu", "Lato", sans-serif;
color: white;
font-weight: 700;
font-size: 15px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}

Form-3 input:hover (
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

Form-3 input:active (
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}

No-boxshadow .form-3 input:hover (
background: #2a92d8;
}
But where is the promised lighting effect? So, friends, let's get to it now. We will need three elements:

* one for the gradation line from the top of the form
* one for a small flash in previous line
* one for the large reflection on the right side of the form

Let's start with the first two elements with pseudo elements in form tag.

/* Gradient line */
.form-3:after (
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;

/* Styles */
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}

/* Small flash */
.form-3:before (
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;

/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
Finally, our light reflection. Wait, we don't have enough pseudo-elements, do we? Don't worry, we'll use our first paragraph element for this.

Form-3 p:nth-child(1):before(
/* Size and position */
content: "";
width: 250px;
height: 100px;
position: absolute;
top: 0;
left: 45px;

/* Styles */
transform: rotate(75deg);
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events: none;
}
Important: You will need to disable click events using the pointer-events parameter. If you don't do this, you won't be able to click on the input fields because there will be another layer on top of them. We will need to remove reflection in browsers that do not support pointer-events:

No-pointerevents .form-3 p:nth-child(1):before (
display: none;
}
Example 4

Marking

Important: We recommend that you always create server-side form validation. Using the web inspector you can easily exclude an attribute, and it can also be disabled javascript support, so we don't recommend that you rely on client-side validation alone.

CSS code

As usual, let's start with the form and title, since everything is very simple here.

Form-4 (
/* Size and position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative;

/* Font styles */
color: white;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

Form-4 h1 (
font-size: 22px;
padding-bottom: 20px;
}
Next we move on to the input elements:

Form-4 input,
.form-4 input (
/* Size and position */
width: 100%;
padding: 8px 4px 8px 10px;
margin-bottom: 15px;

/* Styles */
border: 1px solid #4e3043; /* Fallback */
border: 1px solid rgba(78,48,67, 0.8);
background: rgba(0,0,0,0.15);
border-radius: 2px;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

/* Font styles */
font-family: "Raleway", "Lato", Arial, sans-serif;
color: #fff;
font-size: 13px;
}
Let's change the style of the stubs (where possible):

Form-4 input::-webkit-input-placeholder (
color: rgba(37,21,26,0.5);
}

Form-4 input:-moz-placeholder (
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

Form-4 input:-ms-input-placeholder (
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
Next, let's add styling to the elements on hover and focus:

Form-4 input:hover,
.form-4 input:hover (
border-color: #333;
}

Form-4 input:focus,
.form-4 input:focus,
.form-4 input:focus (
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 3px rgba(255,255,255,0.15);
outline: none;
}

/* Fallback */
.no-boxshadow .form-4 input:focus,
.no-boxshadow .form-4 input:focus (
outline: 1px solid white;
}
And also a confirmation button:

Form-4 input (
/* Size and position */
width: 100%;
padding: 8px 5px;

/* Styles */
background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
border-radius: 5px;
border: 1px solid #4e3043;
box-shadow:
inset 0 1px rgba(255,255,255,0.4),
0 2px 1px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease-out;

/* Font styles */
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
font-size: 16px;
font-weight: bold;
font-family: "Raleway", "Lato", Arial, sans-serif;
}

Form-4 input:hover (
box-shadow:
inset 0 1px rgba(255,255,255,0.2),
inset 0 20px 30px rgba(99,64,86,0.5);
}

/* Fallback */
.no-boxshadow .form-4 input:hover (
background: #594642;
}
Now, let's figure out our fallback option in case there is no support for the "placeholder" element. The placeholder or "placeholder" is not a critical element, as far as we know, unless you completely rely on it. In this case, we just need to provide a fallback option.

Form-4 label (
display: none;
padding: 0 0 5px 2px;
cursor: pointer;
}

Form-4 label:hover ~ input (
border-color: #333;
}

No-placeholder .form-4 label (
display: block;
}
It's very simple: if stubs are not supported, then the shortcuts become visible. End of story.

Example 5

Marking

CSS code

Form-5 (
/* Size and position */
width: 300px;
margin: 60px auto 30px;
position: relative;

/* Styles */
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}
Let's format our paragraph and input fields:

Form-5 p (
width: 70%;
float: left;
border-radius: 5px 0 0 5px;
border: 1px solid #fff;
border-right: none;
}

Form-5 input,

/* Size and position */
width: 100%;
height: 50px;
padding: 0 10px;

/* Styles */
border: none; /* Remove the default border */
background:white; /* Fallback */
background: rgba(255,255,255,0.2);
box-shadow:
inset 0 0 10px rgba(255,255,255,0.5);

/* Font styles */
font-family: "Montserrat", sans-serif;
text-indent: 10px;
color: #ee4c8d;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 20px;
}

Form-5 input (
border-bottom: 1px solid #fff; /* Fallback */
border-bottom: 1px solid rgba(255,255,255,0.7);
border-radius: 5px 0 0 0;
}

Form-5 input (
border-top: 1px solid #CCC; /* Fallback */
border-top: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 0 5px;
}
Let's add some hover styling and placeholders here:

Form-5 input:hover,
.form-5 input:hover,
.form-5 input:focus,
.form-5 input:focus (
background: #f7def7; /* Fallback */
background: rgba(255,255,255,0.4);
outline: none;
}

Form-5 input::-webkit-input-placeholder (
color: #fff;

}

Form-5 input:-moz-placeholder (
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}

Form-5 input:-ms-input-placeholder (
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
Now, it's time to move on to the confirmation button. The little i-element will contain an arrow icon, but for now we won't make it visible, only on hover. Notice that we are using a span element inside the button to rotate the text without rotating the button.

Form-5 button (
/* Size and position */
width: 30%;
height: 102px;
float: left;
position: relative;
overflow: hidden;

/* Styles */
background:
url(../images/noise.png),
radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
border-radius: 0 5px 5px 0;
box-shadow:
inset 0 0 4px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
border: none;
border-left: 1px solid silver;
cursor: pointer;
line-height: 102px; /* Same as height */
}

Form-5 button i (
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -20px;
font-size: 64px;
line-height: 109px;
color: #8d1645;
opacity: 0;
transition: all 0.2s ease-out;
}

Form-5 button span (
display: block;

/* Font styles */
color: #8d1645;
font-family: "Montserrat", Arial, sans-serif;
font-size: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transform: rotate(-90deg);
transition: all 0.2s linear;
}
If the browser does not support the "transform" parameter, the text simply will not rotate. Not a big loss.
We also added some subtle texture to the button by applying two backgrounds: a texture and a radial gradation that sits underneath the texture.

Now let's move on to the effect on hover, focus and active position. On hover, we'll make the span element slide left and dissolve, and an arrow appear:

Form-5 button:focus (
outline: none;
}

Form-5 button:hover span,
.form-5 button:focus span (
opacity: 0;
transform: rotate(-90deg) translateY(-20px);
}

Form-5 button:hover i,
.form-5 button:focus i (
opacity: 0.5;
left: 0;
transition-delay: 0.2s;
}

/* Click on button */

Form-5 button:active span,
.form-5 button:active i (
transition: none;
}

Form-5 button:active span (
opacity: 0;
}

Form-5 button:active i (
opacity: 0.5;
left: 0;
color: #fff;
}
When we click the button, we don't need any transitions, so everything looks pretty neat.

javascript code

Let's use some javascript here to simulate how the HTML5 Placeholder parameter works in browsers that don't support it. We will use the jQuery plugin from Mathias Bynens. Please refer to the repository for details.

After including jQuery and the script, we simply call it like this:

$(function())(
$("input, textarea").placeholder();
});
And this will add a mock stub to older versions of browsers.

Attention! You do not have permission to view hidden text.