In this tutorial, we are going to tell you how you can create Registration Form using HTML and CSS3. We will create two Registration forms — the first one is simple — and another one has Icons with each input field.
The icons we have used are font icons. These registration forms are simple, clean and attractive.
Html code for student registration form. Here is an example of html code for student registration form. In this example, we have displayed many text fields, radio button, Reset button and Submit Form button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in student registration form. Nov 22, 2016 Web-desingning Registration form html code Hindi/Urdu 8th Leacture. W3Schools provide web-side coding click the below link. How to Create Registration Form Using HTML & CSS - Duration.
These registration forms are simple, clean code and unique in design. You can be utilized it into your website and customize it as you need.
If you are looking for more forms collection, then this 40+ beautiful sign-up forms is the best collection I found on the internet. They posted a lot of forms free and premium as well.
The signup forms used on websites to allow the site visitors to create an account and build their profile. It depends on upon you what benefit you will give to the users who register on your website.
Some site used such form to provide more access to the user such as download files or post article etc. Anyway, Let’s have a look, how we can create them.
How to Create Registration Form in HTML
Let’s start with registration form HTML code. Both forms code added inside the div class name
cclogin .
For simple form, we have added class
simple next to cclogin and for icon style form , we have added class icons next to cclogin .
The input fields of the form are inside the
p tag. let’s have a look block of HTML code.
Let’s add some placeholders
But if you see the demo, I have to make the first name and last name fields small and fit them into one row. To make them like that we have added
half class into p the tag.
As I said you before that, another Form is icon style form. In this form, we have used a similar technique which we have previously used in Simple HTML5 Contact Form As you know we are using font icon so we have added it to
span tag.
Forms Styling with CSS
First of all, we will take a look at style-sheet of icons. For icons, we have used CSS :before selector.
Let’s see styling of the fields
The form fields without icons have 100% width, but for the fields without have 92% width, this is because we require space to add icons before the input fields.
To make the fields small, we just have added class .half into
p the tag and set it’s width to 48%. For second field we have added .last class next to .half class so we can make the margin-right:0%; in the CSS.
The icons used in the demo are from the Font Awesome set by Davegandy and they are licensed under the CC BY 3.0 license. Hope you enjoy this CSS3 user register Form. Leave the comment to let us know.
Today tutorial is about designing registration form in HTML with CSS source code. It is a stylish and attractive looking Signup Form design in CSS that makes your web design outstanding.
The form has a unique look and feel and can be used for any kind of website. It is perfect to use for a custom website where you want to get some important information from the user while registering on your website.
The form has a nice background image and it is a full-screen form with the container. You can remove a container class to decrease its size.
This form comes with a few basic input fields. These are full name, email, and password. But you can easily extend it by just copy & paste HTML structure.
It is noted that We have previously created a beautiful registration form in HTML but here we come up with another design which gives an attractive look.
This HTML registration form has an attractive design that is important for every website. It’s minimal design structure that has the header, few registration fields and creates an account button.
It is full page design and using light color schemes such as Blue and while.
How to Code Registration Form in HTML/CSS
We will start with markup which is simple and straightforward. We define the primary container and then follow up some child divs.
The top header part of form design has included a heading, photo, and SVG. We use SVG to make the header design look better and it will polygon the right area of the header.
We just created a few fields, i.e., name, email, and password. Each field has placeholder text that will be gone when the user types in the form field.
The last area of form design is about adding some info. Xilisoft movie maker 6 license code free download. We have added two anchor links for terms & conditions and log-in link.
The CSS Styling
After coding in HTML, now its time to code styles for registration form in CSS source. In the demo, You can find a full-width background image, so we have designed this our body class. We simply define background image and make its size cover so it will be responsive.
As I explain you above that, We have defined the primary container, but we make it margin: 0 autos; so it should align the center of the page body.
The child or inner div of the main container called
.SignUp which have simple background white color and some padding-bottom of 30px.
To style photo of a person, We used the class name
.portrait that has few basic styling e.g., Border, border-radius and set some width and height according to achieve the desired size of the photo.
The important thing here you must remember, You should add position: relative; and z-index: 2; so that picture should not get hide.
Flash Web Design Free Download
Here is CSS that needs to include for SVG to keep the design polygon.
Ok now let’s create the form fields. We have used some border, color, and padding to style them as you can see below.
In the end, We have style bottom info area.
Registration Form Web Design Free Download Css With Code Free
Well, that’s today tutorial about designing user signup form using CSS3 and HTML5. I am sure you love it and find it useful.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |