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 valueWhat does it do?
textCreates a box for entering text
passwordCreates a box for entering
a password
buttonCreates a clickable button
(with JavaScript)
checkboxCreates 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:

 <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