If we are building a HTML form, either to register a user or to authenticate them in a login process, we will need to use input fields where what is written cannot be read. To do this, we are going to see how to build a form to request passwords.
You can consult all the examples that Line of Code has for the construction of form elements and thus take full advantage of the capabilities that this element of HTML offers us.
And when a user writes their password it is not highly recommended that it be readable. Since who doesn’t tell us that there is someone behind them reading what they are writing and could compromise the integrity of that password.
The first thing we will have to do is define our form. For this we are going to use the element
form
from HTML. The elements of the form will always go inside this element and we can place them in the part of our website that we want.
<form> <!-- Form elements --> </form>
Now we will see how to insert fields to be able to enter text within the form. To do this we have to know that text entry fields can be created using the
input
. This element has an attribute
type
, where the text value will be indicated.
<label for="name">Name:</label> <input id="name" size="40" type="text"/>
If what we want is to put the field with non-readable text, we must use the password value within the attribute
type
. We are left with the following line of code on our website.
<label for="key">Password:</label> <input name="key" size="12" type="password"/>
The form will look like this:
<form> <label for="key">Password:</label> <input name="key" size="12" type="password"/> </form>
In this way we will have built our form to request passwords in HTML and we will be able to ask the user to enter their passwords in a secure way without anyone being able to see their content.
Did you know the existence of this type of fields? What fields do you use the most in forms? Or what form elements would you like us to write about in Line of Code?