Learn to create a login page for your website with us.

 

LOGIN PAGE

       INTRODUCTION  :

A login page using HTML and CSS. A login page in HTML collects information from the user and has a submit button to send the details for server-side operations.In login page CSS help to design to describing the presentation of a documen .However, our objective here is to design a login page and not to deal with the backend tasks.

        REQUIREMENTS  :

• HTML

• CSS

• BACKEND  LANGUAGES (Ruby,PHP,Java,.Net,Python ,etc.)

Note: we learn Java for Backend Languages.
Note: To Learn create Website you must know HTML and CSS with Backend Languages .For Html and Css you must visit my tab of html and css.        

      We Creat  :

The login page uses HTML and CSS for the structuring and styling. We'll first create the simple structure with HTML and then move to make it look great with CSS. This is what our final output will look like:

At first, we'll go through the HTML code for the login page and then switch to CSS to make it look better.

        STRUCTURE with HTML  :

Basically, we are going to make login page using <form> tag in HTML. Forms are readily available in HTML to gather information from a user.

HTML FORM:

Input element in HTML Forms: 

The element is used to get input from the user. The element can be displayed in many ways depending on the type attribute. The default value of the type attribute is text.

 Some of the important values of type attribute are described as follows:

 Type Attribute Values           Description 

     <input type=”text”>    Text input field .

     <input type=”email”> The user input should contain an email address 

when submitting the email validation will be done automatically. 

     <input type=”submit”>Displays a submit button, for submitting a form. 

   <input type=”button”>Displays a clickable button

 <input type=”radio”> Displays radio button, to select one of multiple options.         

<input type=”checkbox”>Displays checkbox, to select zero/one/multiple options.

<input type=”date”>The user field should contain a date, it does date validations

<input type=”Number”>Numeric input field, the restriction can be made to accept 

    only a specific set of numbers. 

<input type=”tel”>The user input should contain a telephone number.

Important HTML elements included in Forms:

<textarea>

● The text area is a multiple-line text input field.

● The text area is often used in a form to collect user information like comments,

messages, reviews, etc…

● Example:

● The Attributes rows and cols are used to specify the size of the text area.

<textarea rows="50" cols="50" name="Description" id="Description"></teastarea>

 

<label>

  ● Label defines what to be entered in the input fields

. ● Labels are optional in forms.

  ● Example: 

<label for="username">User Name</label>

  ● The attribute for is used to define for which input field this label is used. 

<button>

● The tag defines the clickable button. 

● The tag also has the type and class attribute which is the same as the tag. 

● Example:

 <button type="button" onclick="alart('hello world')">click me!</button>

● The attribute onclick defines what should happen on the click of a button.Usually it is used to call JavaScript functions.

 Updates are coming soon.....