How to create a sign up sheet in html. Create a registration form with one click

Hello, dear habrafriend! In this tutorial, we will learn how to create two HTML5 forms: a login form and a registration form. These shapes will be swapped with each other using the CSS3 :target pseudo-class. We will be using CSS3 and an icon font. The idea of this demo is to show the user a login form and provide them with a “go to” link to the registration form.
In this tutorial I will talk in detail about how to create an effect like in Demo 1. HTML Log in

Your email or username

Your password

Keep me logged in

Not a member yet?

Join us

Your username

Your email

Your password

Please confirm your password

Already a member? Go and log in Here we have used several HTML5 tricks. For example, element type=password automatically hides what the user types and replaces characters with dots or asterisks (depending on the browser). Element type=email allows the browser to check the format is correct email addresses. In addition, we used the parameter require=required; browsers that support this parameter will not allow the user to submit the form until the field is filled in, no JavaScript required here. Parameter

autocomplete=on will automatically fill in some fields. We also used alt text to guide the user when filling out the form.

Now about two tricky points. You probably noticed two links at the beginning of the form. This neat trick will allow our form to behave correctly when working with anchors. The second point is related to the use of a font with icons. We will use data-attribute to display the icons. Setting parameter

data-icon=”icon_character” With the appropriate characters in the HTML, we only need to assign one rule in CSS to style all the icons. You can read more about this technique on the website: 24 Ways: Displaying Icons with Fonts and Data-Attributes. CSS For code purity I will skip basic parameters(html, body, etc.), but you can find them in

#subscribe, #login( position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; ; ) #login( z-index: 22; )

Here we will assign properties for the header:

/**** text ****/ #wrapper h1( font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Currently only webkit supports background-clip:text; **/ #wrapper h1( background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; ) #wrapper h1:after( content: " "; display:block; width:100%; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20% 147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%));

Note that today only browsers with webkit support background-clip: text, so we'll make a webkit-only striped background and tie it to the H1 header. Since the parameter background-clip: text only works in Webkit browsers, I decided to work only with webkit properties. That's why I split the CSS into two parts and only used the webkit gradient. However, you shouldn't just use webkit on your websites! So, for example, the parameter -webkit-text-fill-color: transparent allows us to have transparent background, but only for webkit browsers, all other browsers will ignore this property.

We also created thin line under the title using the element: pseudo-after-class. We used a gradient with a 2px height and reduced the opacity at the edges to zero.

Now let's take care of the input fields and make them look nice.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder ( color: rgb(190, 188, 188); font-style: italic; ) input:-moz- placeholder, textarea:-moz-placeholder( color: rgb(190, 188, 188); font-style: italic; ) input ( outline: none; )

First, we'll style the margins and remove the stroke. But be careful: the outline helps the user understand which field they are on. If you remove it, you need to apply the properties: active and: focus.

/* all fields exclude submit and checkbox */ #wrapper input:not())( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; , #wrapper input:not():focus( border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168 , 168, 168, 0.9) inset )

Here we used the pseudo class:not to style all fields except checkboxes. In addition, I decided to remove the stroke and added the properties:focus and:active.

Now it's time to have fun: font with icons. Since we can't use the :before and :after pseudo-classes, we'll add the icon to the label parameter and then place it in the field. I will use the fontomas library. You can match the icons to the corresponding letter yourself. Remember attribute data-icon? This is where you need to insert the letter. I used data-icon=’u’ for login, 'e' for email, 'p' for password. Once I selected the letters, I downloaded the font and used the fontsquirrel font generator to convert it to a format suitable for @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** magic trick! **/ :after ( content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; )

That's all. You don't need to have a separate class for each icon. We used the parameter content: attr(data-icon) to get the letter from the data-icon attribute. Thus, we only need to assign a font, select a color and place an icon.

Now let's assign rules for the form submit button.

/*style both buttons*/ #wrapper p.button input( width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0 , 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); transition: all 0.2s linear; ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. button input:focus( background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) inset; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

The trick is to use box-shadow to create multiple frames. Naturally, you can use only one frame, but you can also use several. We will use the length parameter to create a “fake” second white border, 3px wide, without blurring.

Now let’s style the checkbox, we won’t do anything unusual here:

/* style the “remember me” checkbox*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) .keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( width: 80%; )

Styling the Form Footer Using Multiples linear gradients to create a striped gradient.

P.change_link( position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); .change_link a ( display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text -decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; ); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198) #wrapper p.change_link a:active( position: relative; top: 1px; )

Now you can see that we have two nice shapes, but we only want one of them to be displayed. It's time for animation!

Creating the Animation The first thing we'll do is hide the second shape by setting the opacity to 0:

#register( z-index: 21; opacity: 0; )

Remember that the login form has a z-index: 22? For the second form we will assign this parameter to 21 to put it “under” the login form.

Now the fun part: we swap the forms using the pseudo class:target. You need to understand one thing about :target: we will use anchors to move it. Normal behavior of an anchor is to jump on specific element pages. But we don't want that, we just want to swap the shapes. This is where our trick of using two links at the top of the page comes to the rescue. Instead of directing us directly to the second form and risking the jump effect, we'll give the links a parameter display: none. This will help avoid jumping. I discovered this trick on the site: CSS3 create (French).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )

This is what happens: when we click on the button Join, we're heading to #toregister. Then the animation occurs and only then we move to the #register element. We use an animation called fadeInLeft. Since we are “hiding” the shape using zero transparency, we will apply an animation that will gradually appear. We also changed the z-index so that it appears on top of the other shape. The same happens for the other form.
Here is the code for the animation. We used the CSS3 animation framework from Dan Eden and adapted this framework for our tutorial.

Animate( animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; ) @keyframes fadeInLeft ( 0% ( opacity: 0; transform: translateX(-20px); ) 100% ( opacity : 1; transform: translateX(0);

The shape that "disappears" will have a fade animation to the left:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animation-name: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacity: 1; transform: translateX(0); ) 100% ( opacity : 0; transform: translateX(-20px);

You can now use other animations from Dan Eden's animate.css file: just change the .animate class and animation names. You'll also find several other animations at the end of the animate-custom.css file.

That's all, friends. I hope you enjoyed this tutorial!

Note that in some browsers the option background-clip: text not supported. IN Internet Explorer 9 animations don't work. In Internet Explorer 8 and below, the pseudo-class:target pseudo-class is not supported, so this effect will not work there at all.

P.S.

I will gladly accept any comments regarding the translation in a personal message. Thank you!

Tags: Add tags Almost all online projects

consist of two parts - open, which is available to all users, and closed, which can only be accessed after registering on the site. Obviously, in order for users of your web resource to be able to leave their registration data to access closed sections of the site (be it a blog or), you need to create registration form

, on any page of the site. And here many are wondering how to create and install such a form. Easier for those who use, since these systems have ready-made modules for working with web forms. True, their capabilities are limited. In other cases, you need to learn programming languages (such as PHP, HTML) and understand the database management system (you can spend a lot of effort, and most importantly time, but still not achieve results). There is another option - to hire a specialist who will complete the task. But the work of programmers is not cheap, but what if there is not enough money to pay for the work?

Just recently appeared new way creating web forms (registration, forms feedback, online ordering of goods or services, etc.), which does not require knowledge of programming languages (PHP, HTML) and other web technologies (CSS, MySQL) - this is the MyTaskHelper.ru service - online constructor forms. This site has intuitive clear interface and does not require any programming knowledge.

It’s easy to create a registration form and install it on your website; you just need to spend a few minutes and follow a series of simple steps:

1.First, go through the process of registering and activating your account (takes less than a minute);

2.Create a project and a form (for each project you can create as many forms as you like);

3.Add the required fields to the registration form (the choice of names is yours, it all depends on the purpose of the form). In the system you can select the type of each field (MyTaskHelper offers 20 different types, such as a line of text, multiline text, date, file, checkbox, drop-down list and others);

4.If necessary, configure the functionality of each field (this could be validation, auto completion, default, field size);

5.In the Widgets module, create a form design to harmonize with what already exists on the site (available a large number of parameters). Also using of this module you can set the “behavior” of the form when users fill it out, that is, make the form dynamic.

6.That's all, the registration form is ready. Copy the embed code and place it on the desired web page.

With MyTaskHelper, all you need to create web forms is a browser and an Internet connection. Important feature The service is that all records entered by users into the registration form will be stored on the servers of our system in a special database that is created along with the form. You can not only view the information collected using any of the forms. Each user has access to options such as data grouping, database sorting, search and filtering.

Hello! Now we will try to implement the most simple registration on the website 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 a 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/). We create a table users , it will have 3 fields.

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

2. A connection to this table is required.

Let's create a bd.php file. Its content:

In my case it looks like this:
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):

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

Registration

Your login:

Your password:

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

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) :

Registration

Your login:

Home page

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 security, design, data fields, loading avatars, logging out of your account (to do this, simply destroy variables from the session with the unset function) and so on. Good luck! I checked everything, it works properly! Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination. HTML Code for registration form

In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.

registration.html

registration form Registration form

Id:
Name:
Course:
Branch:
Rollno:
Email_Address:
User_Name:
About Us:
Password:

Did you know that you can use the service Google, create a registration form for your website with one click? Everyone who has Google account, can click on the button and immediately log in to your application, with his email, name and photo.

This service is called federated login, and is built on the OAuth2 protocol. This difficult process, which involves sharing data between your server and Google, but we'll leave all that work to Google's PHP library, which will handle almost everything server-side.

Using this service you can greatly simplify the authorization/registration process for you and your users. Here are some of the benefits:

There is no need to create and verify registration and authorization forms;
There is no need for the forgotten password recovery feature;
Very simplified authorization/registration - you will receive email person, name and photo with one click;
The address has already been verified by Google, so you don't need to send a message to verify.
Serious security from Google.

Of course, this will only work if the person has a Google account, so it makes sense to use this service as an addition to existing system registration. So let's get started!

Installation

The first step is to create a new application through Google's API Console. Follow the instructions to receive additional information. After the process is completed, copy the received keys to the setup.php file.

Run the code from schema.sql (you can find it in the archive) in PhpMyAdmin or a similar tool. It will create a glogin_users table in the database which will be used to store information about your application's user accounts. After that, write your database connection details in setup.php.

PHP

We create a login form using Google’s Federated login. This means that your website visitors click on a link to Google page, where they grant the app access to their account and will then be redirected back. You then receive an access token that you can use to request information about them. Here is a simplified description of the authorization process:

When a user clicks the "Sign in with Google" button in our demo, they are taken to Google's login page where they see what permissions our app asks for.
After allowing access to this application, they will be redirected back to the site, while special parameter code passed in the URL. Our application will use this code to obtain an access token;
Using a token, the application requests information about the user, which is stored in the database.

To read and insert into the database, I use the tiny Idiorm library, which you can find in the library folder.

Our PHP code is organized as follows:

index.php is the main application file;
setup.php - this file contains database connection information and keys obtained from Google’s API Console;
Library folder - contains the Idiorm, PHP library Google libraries, and a class for including a relative timestamp.

Let's take a look at the code at the beginning of index.php:

require "setup.php" ; // Create a new Google API
client
$client = new apiClient() ;
//$client->setApplicationName("Tutorialzine"); // Configure it
$client -> setClientId ($client_id) ;
$client -> setClientSecret ($client_secret) ;
$client -> setDeveloperKey ($api_key) ;
$client -> setRedirectUri ($redirect_url) ;
$client -> setApprovalPrompt ( false ) ;
$oauth2 = new apiOauth2Service($client ) ;
// The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset ($_GET [ "code" ] ) ) ( // This method will obtain the actuall access token from Google,
// so we can request user info
$person = ORM::for_table ("glogin_users") -> where ("email" , $info [ "email" ] ) -> find_one () ;
if (! $person ) (
// No such person was found. Register! $person = ORM::for_table("glogin_users")->create(); // Set the properties that are to be inserted in the db
$person -> email = $info [ "email" ] ;

$person -> name = $info [ "name" ] ;
if (isset ($info [ "picture" ] ) ) ( // If the user has set a public google
account photo
}
$person -> photo = $info [ "picture" ] ;
else(
//otherwise use the default
$person -> photo = "assets/img/default_avatar.jpg" ;
) // insert the record to the database
$person -> save () ;
) // Save the user id to the session
$_SESSION [ "user_id" ] = $person -> id () ;
// Redirect to the base demo URL
header("Location: $redirect_url");
exit ;
) //Handle logout
if (isset ($_GET [ "logout" ] ) ) (
unset ($_SESSION [ "user_id" ] ) ;
) $person = null ;
if (isset ($_SESSION [ "user_id" ] ) ) (
}

// Fetch the person from the database $person = ORM::for_table("glogin_users") -> find_one($_SESSION["user_id"]) ; What's happening here is we are checking for code in $_

GET parameters

. As I mentioned above, this setting is set by Google when the user is redirected back after allowing access to the application. We then request information about the user and record it in the database. The user ID (the ID value in the database) is written to the session. It is saved between requests and is used as a flag that the user has been authenticated If you want to learn more about OAuth, read the relevant information from Google on the subject. There you can also see a table with the fields that the get() method returns. Towards the end, we define the $person variable. It contains an object that is returned by the Idiorm library, with properties for each table column

glogin_users

. You can see how this object is used in the next section. HTML The HTML code for our example is at the bottom of index.php. Therefore, we have access to the $person object, which is useful when displaying the user's name and photo. The page itself is

standard document

HTML5: