This tutorial will cover the process of concealing the password field within a form by utilizing HTML. Initially, we will delve into foundational HTML concepts, the importance of the form tag, and the password input element. Subsequently, we will explore practical examples to illustrate this concept.
What do you mean by HTML?
Hypertext Markup Language, known as HTML, is the primary markup language utilized for creating and structuring web pages. The most recent version of HTML is HTML5, which sets the standard for web page development and design.
Within HTML, tags are essential elements that provide instructions embedded directly within the content of an HTML file. Each tag in HTML denotes a specific action that the web browser executes to display content on a webpage.
<form> tag in HTML
One crucial component in HTML is the <form> tag. This tag requires two essential attributes and offers additional optional attributes for customization.
<Input> element
The input element is essential for including diverse controls within a form, like text boxes, file upload fields, password fields, email inputs, and more. To integrate the input element into a form, the <input> tag is utilized.
Syntax:
In HTML forms, passwords are a type of data that users can input. When users type in a password, it is not displayed as plain text; instead, it is usually masked with asterisks (*) or dots (.). This masking ensures that the characters entered remain hidden from view. To create a text box where entered characters are hidden, the type attribute of the input element needs to be set to "password."
Syntax:
<input type ="password" name ="name_of_password_box">
The password input element supports all the attributes that are used with the textbox element.
The various attributes used with <input type = "password" > are given below:
- Size: It specifies the size or width of the <input type = "password" > box. If the user enters more characters than the specified size, the characters are automatically scrolled to the left. For Example: <input type="password" size ="20" >
- Placeholder: It specifies a short hint that describes an input field's expected value (e.g., a sample value or a short description of the expected format). This hint is displayed in the input field before the user enters a value. For Example: <input type="password" size ="20" placeholder=" Enter the value of Password">
- Maxlength: It specifies the maximum number of characters that can be entered in the <input type = "password" > box by the user. For Example: <input type="password" size ="20" maxlength ="20" placeholder="Password">
- Min length: It specifies the minimum number of characters that can be entered in the <input type = "password" > box by the user. For Example: <input type="password" size ="20" Minlength ="20" placeholder="Password">
- Value: It specifies the default text that will appear in the <input type = "password" > box when the form is initially loaded in the browser. For Example: <input type="password" size ="20" Minlength ="20" placeholder="Password" value =" Enter Password" >
Let's explore the <input> component through a variety of illustrations:
Example 1:
<! DOCTYPE html>
<html>
<head>
<title>
Password hide in HTML
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
body {
background: #191828;
color: #efedef;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.6em;
margin: 0;
padding: 100px;
}
h4 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #3494e6;
align: center;
}
.form-wrapper {
background: #fff;
border-radius: 5px;
padding: 50px;
}
.form-control,
.custom-select {
border-radius: 0px;
color: #495057;
background-color: #f1f1f1;
border-color: none;
}
.form-control:focus {
color: #495057;
background-color: #ffffff;
border: 1px solid #b5b6b3;
outline: 0;
box-shadow: none;
}
.btn {
background: #3494e6;
border: #3494e6;
padding: 0.6rem 3rem;
font-weight: bold;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
background: #3494e6;
border: #3494e6;
outline: 0;
}
button {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid #3494e6;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto',sans-serif;
font-weight: 700;
color: #3494e6;
text-align: center;
transition: all 0.2s;
}
button:hover {
color: #FFFFFF;
background-color: #3494e6;
}
</style>
</head>
<body>
<section class="contact-from pt-4">
<div class="container">
<div class="row mt-5">
<div class="col-md-7 mx-auto">
<div class="form-wrapper">
<div class="row">
<div class="col-md-12">
<h4> <b> Example: Password Hide in HTML </b> </h4>
</div>
</div>
<form _lpchecked="1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="First name" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Last name" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1"> Male </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1">
<label class="form-check-label" for="inlineRadio1"> Female </label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone number" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="date" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password" >
</div>
</div>
<div class="col-md-12">
<select name="countries" class="custom-select" id="exampleFormControlSelect1">
<option> Select country </option>
<option> India </option>
<option> USA </option>
<option> France </option>
<option> China </option>
<option> Japan </option>
</select>
</div>
</div>
<div class="mt-3" align="center">
<button> Register </button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Output:
The output of this example is given below:
Example 2:
<html>
<head>
<title>
Password hide in HTML
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
body {
background: #191828;
color: #efedef;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.6em;
margin: 0;
padding: 100px;
}
h4 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #3494e6;
align: center;
}
.form-container {
display: block;
width: 500px;
margin: 60px auto;
text-align: left;
}
lable {
display: block;
position: relative;
text-transform: uppercase;
color: #aaa;
}
input[type='password'] {
width: 100%;
box-sizing: border-box;
height: 55px;
display: inline-block;
border: 3px solid #2F96EF;
border-radius: 5px;
padding: 0 15px;
margin: 10px 0;
transition: .2s;
}
input[type='password']:focus {
outline: none;
-moz-outline: none;
-webkit-outline: none;
}
lable:before {
content: "\f070";
color: #aaa;
font-size: 22px;
font-family: FontAwesome;
position: absolute;
right: 25px;
top: 44px;
}
h4 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #3494e6;
align: center;
}
</style>
<body>
<div class="form-container">
<h4> Example 2: Password hide in HTML </h4>
<form class="form-2" action="">
<lable> Enter password
<input class="input-2" type="password" placeholder="??????">
</lable>
</form>
</div>
</body>
</html>
Output:
The output of this example is given below: