The input tag: < input/ >
Websites often need you to type in information. It’s how you log in to an online account, book cinema tickets or use a search engine. So asking your user to type in information is a common part of coding.
It’s called asking for user input. There are lots of tags you can use to ask for user input, but the one you will use the most is the < input/ > tag.
It’s great for creating boxes on your page so your user can enter data. It’s a self-closing tag and you include two attributes inside it: the id attribute and the type attribute.
As you already know, you set the value of these attributes using the equals sign (=) and double quotes ” “.
Let’s take a look at how we would use the < input/ > tag on our page:
<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="text"/></p> <a href="secretinfo.html"> Click here to submit password and view website </a> </body>
Using the < input/ > tag with these two attributes creates a box that we can type our password into. You use the id attribute to give your < input/ > tag a unique name. You have to choose the name of your id attribute.
Make sure it’s easy to remember. Here we’ve set the value of the id attribute to passwordBox. Doing this allows us to use the value inside the < input/ > tag in our JavaScript. We use the id attribute to tell our browser exactly which piece of data we want it to use. Without the id attribute, your browser will not be able to find the password and check if the password is correct.
