DONATE  
MENU
JAVASCRIPT
JSON
CSS
AJAX
PHP
HTML
MYSQL

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Html Example » Login Page
Share Tweet WhatsApp

Login Page

Now that you have learnt enough HTML to start creating webpages. Let's take our first practical example. The example is to create a login page. To create this, the first logic should be what is a login page? A login page is simply a webpage that enables users to input data that uniquely identifies them in order to access an internet resource or a webpage/website/application in general. For example, you need to pass through a login page to have access to the Facebook site. Secondly, what does it usually consist? It usually consist of input fields to allow users enter their username and passwords and then, a button to submit the entered data. Lastly, what html tags do I need to create this elements? You should then remember that the <form> tag enables you to collect input from the user. It also has input elements such as those with type of text, password and submit. With this knowledge you can now proceed to creating a login page and that is how the process for creating any HTML webpage goes. You first define what you want e.g a login page, visualize it e.g how it will look like and finally, determine the tags that will enable you create what you have visualized.
<!DOCTYPE html>
<html>
<head>
    <title>Welcome: My Login Page</title>
<meta name='viewport' content='width=device-width; initial-scale=1'/>
</head>
    <body>
<h1>My Login Page</h1>
<form name="my_login">
    <p><b>Username:</b></p>
    <input name="username" type="text" placeholder="e.g bheelz" value=""/>
    <p><b>Password:</b></p>
    <input name="password" type="text" placeholder="e.g bheelz" value=""/>
<p><input type='submit' value='SUBMIT'/> &nbsp;<small>Not yet registered? register <a href=''>here</a>.</small></p>
</form>
        </body>
    </html>

Copy PRACTICE IT

Take a short quiz on Login Page.
Ask a question or tell us if Login Page is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode