coding180 icon

Coding180

HTML Element: Form - Input type of "text" and "password"

HTML Element: Form - Input type of "text" and "password"

Tutorials > HTML > HTML Form Elements


In the previous lesson, we saw how to implement a basic form.

We can also define input for user entry and buttons to delete the content of all the form data.

We will create a form that requests for username and password:

<!DOCTYPE html>
<html>

<head>
    <title>Form - coding180.com</title>
    <meta charset="UTF-8">
</head>

<body>
    <form action="logdata.php" method="post">
        Enter your name:
        <input type="text" name="name" size="20">
        <br>
        Enter your password:
        <input type="password" name="password" size="12">
        <br>
        <input type="submit" value="submit">
        <input type="reset" value="delete">
    </form>
</body>

</html>

The result in the browser is:

html form element tag

Let's see the new syntax to define a text box for entering a username and password:

<input type="password" name="password" size="12">

We use the same input element, but we initialize the type property with the value password, with this we see that when the visitor enters the password, asterisks are displayed instead of the characters that we typed.

Then to define a button that allows us to delete all the data entered so far, we do it by:

<input type="reset" value="delete">

In other words, we initialize the type property with the value reset, with this the browser knows that when the delete button is pressed it must delete all the data in the form.

Note: The name property of each input element must have a different name.

user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel