Стилизуем формы, используя CSS3

#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; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #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; } /** На донный момент только webkit поддерживает 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%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** 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; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают submit и 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():active, #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; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @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; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #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; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .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%; }

Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.

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); } #wrapper p.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; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

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

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

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); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#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); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

Share

Have you minutely ever followed the login page that appears when you sign up for a particular website? The first page that comes up whenever you are logging in is the first impression of a website. The design of the login form will itself define the nature of the website and hence it should carry pertinence with the website it is leading to.

Truly, login or signup forms are one of the most important elements that a web page contains and hence designing these online forms is one of the most significant features when it comes to designing the website. A successfully created sign up form also encourages as well as allows the visitors to becoming a member, a subscriber or a customer for a particular business. A sober-looking, creative as well as visually attractive signup form will surely encourage a fruitful rate of conversion of a visitor if all the other features are properly coordinated.

Designing an effective as well as clean login/signup form asks for a lot of creativity from the designer as it is important for a website to have an appealing & outstanding form for the sake of its success and efficacy.

Some highly effective and attractive login form designs

There are some registration forms which consist of basic that are created with the help of some elementary web designing concepts. Apart from these elementary ones, there are few which may look a bit different o some extent. However, there are some others which are extremely impressive as well as creative that categorically lures the visitor to enter the website.

Some of these forms have an option of entering personal contact information in details and they include the name, e-mail, contact number and other things . The styles of these forms go much beyond ordinary, and some of them even have come up with an option of handwritten calligraphy.

Few login pages come up with various innovative input style of text beside some highly innovative option or select menus. These types of forms really ask for a high level of creativity from the designers, especially when it comes to designing the space in between various layers, creating texts that are large and easily readable, and creating the sidebar links that connect to their e-mails directly.

A specific type of form provides a dramatic insight of a new data input field. The users have the leverage of getting to the login link from the homepage itself and call up a login box powered by jQuery. This particular type of form comes up with an Ajax that it uses to direct an external script of PHP. It evaluates the information that a user has used in logging in and once processed, it either grants the permission to the user or denies it.

A number of login form designs that we see these days are indeed extremely dynamic and consist of some of the very latest designs. One of these new age designs provides a wonderful insight into the various data input fields. Users can easily go to the homepage and can click the link on the login page to call up a dynamic login box powered by jQuery. This particular login form comes up with the option of linking an external PHP script that helps in evaluation of various login information and depending upon the outcome of the result; it either allows entry of the user or denies it.

Login Form Examples

Login Form from Impressionist UI by Designmodo

Although, at first sight, it seems that inputs slightly soar in the air, since gradients and vector realization placed on a textured canvas leads to a slight balanced in harmony. Nevertheless, this tooltip-inspired basic login form looks interesting and unique.

Login by Haziq Mir

The designer places fields in line, making the overall component suitable for standard relatively narrow headers. While soft, warm brownish coloring paired with inner shadows give each item pleasant, smooth and finished appearance, the dark version has a more sophisticated look.

Stellar Login, Improved by Haziq Mir

The first thing that catches the eye is a background that can become an excellent complement to any intricate or illustrative design, where natural textures such as wood or paper run the show. While sleek inputs and grayish coloring ideally suit to the notebook-styled canvas, the huge blue ‘Sign In’ button grabs the whole attention with its great visual weight.

Login Form by Sergey Shmidt

This is an excellent example of a dark login form that exudes an image of sophistication without being brutal. The glossy brown button instantly strikes the eye, calling to action. Tiny metallic toggle adds a lovely skeuomorphic flair to the composition.

Login form for personal application by Ionut Zamfir

The backdrop of the form mimics a common notebook surface where we usually make notes. Wooden canvas enhances the overall aesthetics. Although shiny gradient buttons slightly break away from the theme, here flat or sketchy buttons might look more natural, yet still the component achieves a sense of harmony.

Sign In Widget

The designer exhibits a subtle and elegant web form, the wow factor of which is produced by its semi-transparent background. It has an optimal contrast that sets apart lettering and icons from the backdrop, and as usual, massive almost overwhelming bulging CTA.

iPhone App Login Form

iPhone App Login Form by Mason Yarnell is executed in the best traditions of iOS designs of previous years. There are lots of glossy stuff, ornamental ribbons, embossed icons and, of course, complicated textured backdrop. Nevertheless, in general, the component looks clean, fresh and with lots of air.

Light login by Maxwell Barvian

Light login by Maxwell Barvian looks exactly as stated on the nameplate: light, clean and crisp. Grey and white colors together can do wonders easily providing users with an excellent experience. As befits, for better conversions, the main button is intentionally oversized and is painted in a bright tone.

How to Create Login Form with CSS3 and jQuery

It is a small tutorial that is subservient even to novice web developers. Although the design is quite simple and input fields at first look like buttons because of a gradient styling; however, it is a representative example of sleek and well-structured web form that can come in handy in numerous UIs.

Login by Paresh Khatri

Some login by Paresh Khatri is a tiny web component that boasts of a vibrant color scheme and meticulous attention to details. The tooltip-inspired shape, circular photo thumbnail, inset treatment, semi-transparent backdrop make this design easily stand out from the crowd.

App Login

Carefully laying out each element of the form one above the other, Mynus is managed to tie the design together and ditch the backdrop that would only distract attention from a refined screen. The coloring, edges, shapes, rounded corners, typography, amount of white space and embossed touches make the design unique and crisp.

Dark login by Adam Whitcroft

Dark login by Adam Whitcroft looks sophisticated and top-notch. An excellent choice of font in tandem with contrasting colors offers users an optimal readability. ‘Sign In’ button, grayish glyphs and switch look a bit seamless, yet they ideally blend in the environment.

User login

User login has a warm creamy coloring that evokes positive feelings. Orange and blue are used as decorative touches that add a zest and make the form suitable for various designs. Gradient-based CTA with a convex appearance simply jumps at you, inviting to action.

Snappy Login by Charlie Waite

Snappy Login by Charlie Waite is an interesting take on a web form that has a simple yet original appearance mainly thanks to flat transparent inputs. Although text inside fields experiences some illegibility, when the backdrop is too washy, yet on the whole, it certainly has a charm. The decorative font and embossed button look exceptional, and as it should be, an attention-grabbing.

Sazzi Login by Ionut Zamfir

Sazzi Login by Ionut Zamfir features a nice twist produced by the CTA buttons. The primary coloring is neatly selected, and the accent tone perfectly complements the overall aesthetics. The form looks great on a monotone or noisy canvases, especially input fields that seem to be naturally inbuilt.

Notepad Login final by Haziq Mir

Notepad Login final by Haziq Mir is another illustrative take on a common minimalistic form in our collection that is planned down to the last detail. The background holds the theme together, original dashed-styled fields and elegant cursive typography have artistic flair.

Stacked Paper login by Patrik Larsson

The author goes for a more traditional route by using clean backdrop, standard boxes for inputs, regular type, and calm color palette. Here red is used for accent, giving the CTA a striking appearance. Tiny details as a metallic clip as well as wooden texture just enrich the aesthetics.

This is in continuation of the tutorial on making a membership based web site. Please see the previous page for more details.

Download the code

You can download the whole source code for the registration/login system from the link below:

The ReadMe.txt file in the download contains detailed instructions.

The login form

Here is the HTML code for the login form.

Logging in

We verify the username and the password we received and then look up those in the database. Here is the code:

function Login() { if(empty($_POST["username"])) { $this->HandleError("UserName is empty!"); return false; } if(empty($_POST["password"])) { $this->HandleError("Password is empty!"); return false; } $username = trim($_POST["username"]); $password = trim($_POST["password"]); if(!$this->CheckLoginInDB($username,$password)) { return false; } session_start(); $_SESSION[$this->GetLoginSessionVar()] = $username; return true; }

In order to identify a user as authorized, we are going to check the database for his combination of username/password, and if a correct combination was entered, we set a session variable.

Here is the code to look up the username and password.

function CheckLoginInDB($username,$password) { if(!$this->DBLogin()) { $this->HandleError("Database login failed!"); return false; } $username = $this->SanitizeForSQL($username); $pwdmd5 = md5($password); $qry = "Select name, email from $this->tablename ". " where username="$username" and password="$pwdmd5" ". " and confirmcode="y""; $result = mysql_query($qry,$this->connection); if(!$result || mysql_num_rows($result) <= 0) { $this->HandleError("Error logging in. ". "The username or password does not match"); return false; } return true; }

Please notice that we must compare the value for the password from the database with the MD5 encrypted value of the password entered by the user. If the query returns a result, we set an “authorized” session variable, and then redirect to the protected content. If there are no rows with the entered data, we just redirect the user to the login form again.

Access controlled pages

For those pages that can only be accessed by registered members, we need to put a check on the top of the page.
Notice that we are setting an “authorized” session variable in the login code above. On top of pages we want to protect, we check for that session variable. If user is authorized, we show him the protected content, otherwise we direct him to the login form.

Include this sample piece of code on top of your protected pages:

CheckLogin()) { $fgmembersite->RedirectToURL("login.php"); exit; } ?>

See the file: access-controlled.php in the downloaded code for an example.

Here is the CheckLogin() function code.

function CheckLogin() { session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) { return false; } return true; }

These are the basics of creating a membership site. Now that you have the basic knowledge, you can experiment with it and add new features, such as a “Forgot password” page to allow the user to retrieve or change his password if he forgets it.

Updates

9th Jan 2012
Reset Password/Change Password features are added.
The code is now shared at GitHub .

License

The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.

No related posts.

Comments on this entry are closed.

Do you have a website? If your answer to this question is yes , then a classic must have is an attractive login form. Be it a social networking site or an online fashion store, an email site or an online magazine, the first thing that catches the eye of the customer is the login option. So, why not let your customer get the desired impression in the first contact. Download and get the look for your website that creates an everlasting first impression.

Helpful Articles:

HTML5 Tutorial – Creating Easy HTML Login Form using CSS!

White Transparent HTML Login Form Template

Login Form – Orange Skin Type is an easy to use login form template with its PSD ready to be converted into CSS. It comes with various styles for buttons and is highly customizable.

Basic Login Form Template Free HTML

8 Modern & Web 2.0 Login/Signup Panels is a set of login forms with a futuristic feel to it with quirky and out of the box designs. These forms come in layered PSDs and are highly editable. Source: codepen.io

Black Skin HTML Login Form Template

With sleek and smart design, Modern Login & Register Forms looks very appealing. The smart objects and shapes in the PSD are easily editable making this template highly flexible and adjustable to your needs.

Day/Night Login Page is a very charming HTML login template that comes in two variations. Brightly colored buttons against a dark or a white background are very eye catchy and this template is easily editable.

Login / Registration Form with Password Meter

This template comes with password meter and features a perfectly transparent layout with minimal designing effects. They feature a pinkish shade for the background. They come with a customizable login page. The design is based on single PSD layer that makes it easily editable. The texts are also editable and come with Google Web Fonts.

Batman Styled Dark CSS3 Login Form Download

With darker appearance, this designer template features perfectly editable CSS3 login form with simplistic design. Perfectly responsive, this template work finer in any device, mobile or desktop. It is printable and can be customized as per the requirement. A niche login form design, this template is perfect to be used for corporate and professional WordPress sites.

Simple HTML5 Login Form Sample Source Code

These forms are perfectly responsive and assures easy, with simple nice layout. They also have a darker background with white login form to start with. This template is best for including and contact pages in websites. Their appearance makes them perfectly apt for any website settings. It is fully editable.

8 Modern HTML Login Signup Panels

With an extremely niche layout, this template features 8 modern HTML based signup panels. It has a white layout with very unique designing structures integrated perfectly to create amazing effects for login forms. It is totally responsive and can be edited as per requirement. It is perfect for commercial as well blog sites.

Absolutely simple and basic template files, they can be easily customized and promises to be browser friendly. The template works absolutely fine with any device, big or small, laptop or tablet, smart phone or desktop. It features easy login page in html option. Google Login tool has been integrated. Access Google account using email and password.

How to Use Custom Login Form in Your Website

Creating a custom login form for your WordPress website is quite easy with the latest themes and templates. These are fully customizable and editable. Now edit the login logo to make it more attractive. Replace the logo with your brand icon. It helps in the branding part and depicts a clear message the visitors. There are several plugins available that help in creating customized login form for your website. These plugins are easy to install and helps in providing the most innovative login pages that promises fully editable and responsive for your website. Using custom login form in your website just gets easier.

How to Design / Create Login Form in HTML

It is really important to business to have a nice and creative login form. This is the first point of contact for many customers and hence a lot of efforts should go in creating a perfect design login form. It is possible to code the entire webpage in HTML and there are also Free HTML5 & CSS3 Login Forms Downloads that are available on the web. These templates can be used with little modification and it saves a lot of time and efforts while designing any page. Some may prefer using the paid templates for the web designing and others may simply resort to creating it from scratch.

HTML Day, Night Login Page Template

Very unique login page with day night settings, this template are fully responsive and promises cross browser compatibility. It is perfectly niche in terms of design layouts and button configurations. It comes with several social login options through twitter, Facebook, and Google+. This template feature sample forms that can be easily customizable.

Horizontal Responsive Login Form UI Design

This template features a horizontal layout and promises to be 100% responsive which makes them perfectly accessible to desktops as well smartphone devices. It can be customized without any problem. It comes with a cool sky blue layout, comprising of dropdown and radio buttons. It is perfectly apt for personal registration forms and blog sites.

Beautiful Login Form with New HTML5 Attributes

With minimalistic and simple designing interface, this template login form is perfect for modern day websites. This template feature layered PSD files and comes with easy customizable features. There are wide ranges of HTML5 attributes that makes it so special and unique. It is perfectly compatible with mobile devices like smartphone and tablets. you may also see .

HTML Coded Login Form Template

Source: premiumfreebies.eu | This HTML template has simple interface and comes with minimalistic designing layout. It is compatible with different browsers and offer easy and fast loading. It promises to be printer friendly. Some of the features include Google web fonts, sliced PSD, dropdown menu, customizable color theme, favicon, and social sharing options.

Dark HTML Login Form Template

This template features quite a darker appearance. But it has a sober and niche layout that promises to offer easy navigation through the sections. 100% responsive and can be customized easily, this template are best suited for entertainment and magazine portals. It is feature rich and easy on the eyes.

Beautiful CSS3 Login Form Template

This is a very elegantly designed and niche templates for forms and login pages. The registration form template html css free download is responsive and works perfectly fine with any browser, be it IE, Chrome, or Safari. It has a retina ready display and promises to offer smooth navigation. It feature social sharing options installed at the home page.

Clean Design HTML Login Page

Extremely niche layout, this template has dark shades with social sharing options integrated at the home page. Fully customizable, this template can work easily with any browser and device. It features dropdown menu and password remember button. It also offers fast loading option and promises to be printer friendly. It comes with editable coding files.

HTML & CSS Login Form Template Using Asp.Net

Some programmers also use C# language for creating the HTML Login Page. The programming language offers a lot of versatility to the programmers and it is also easy to compile the login form with help of C#.

JQuery Mobile Login Form Wedget Template

Admin Login/Sign in Form with PHP Template