The type attribute
There are lots of different kinds of < input/ > tags, so you need to use the type attribute to tell your browser exactly what sort of < input/ > tag you need.
You have to choose from defined values for your type attribute. Here are some of the common type attributes you can use inside your < input/ > tag:
| Attribute value | What does it do? |
| text | Creates a box for entering text |
| password | Creates a box for entering a password |
| button | Creates a clickable button (with JavaScript) |
| checkbox | Creates a box the user can tick or untick |
You may have noticed above that when we set the type attribute to text, the text for the password was displayed in the box.
That isn’t very secure! What happens if a cyber criminal was nearby when user types in the password?
If we want to keep our password secret we can change the value of our type attribute to password. This will hide what the user types by changing the text to dots. Let’s take a look:
<body> <p style="font-size: 30pt;">Hello World!</p> <p>Please enter the password to view this website.</p> <p>Password:<input id="passwordBox" type="password"/></p> <a href="secretinfo.html"> Click here to submit password and view website </a> </body>
