Number Input: type number attribute and step attribute

 HTML FORMS

We’ve now gone over two type attributes for <input> related to text. But, we might want our users to type in a number — in which case we can set the type attribute to… (you guessed it)… "number"!

By setting type="number" for an <input> we can restrict what users type into the input field to just numbers (and a few special characters like -, +, and .). We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute. Below is the code needed to render an input field for numbers:

<form>
  <label for="years"> Years of experience: </label>
  <input id="years" name="years" type="number" step="1">
</form>

Which renders:

rendered number input field with arrows to the right hand side of the field

Now it’s time to apply this knowledge.


Instructions:

In index.html we started a <form> for users to make a custom burger. Right now we have a <label> for patties that needs an associated <input> element.

Since we want users to enter a number, create an <input> and set the attributes:

  • Associate the <input> to the first <label> by assigning the correct value to id.
  • type="number"
  • step="1"
  • name to "amount".

Note: You may notice that we started adding <section>s and other semantic HTML elements to help organize our <form> elements. If you want to learn more about these elements, please take our Semantic HTML lesson.


Hint:

To assign attributes to the <input>, add the attributes inside the opening tag of <input> like so:

<input exampleAttribute="value-for-attribute">

To associate the <input> with the created <label> the value of the for attribute must match the value of the id of <input>.

Comments

Post a Comment

Popular posts from this blog

Password Input: type password attribute and relationship between name and id attribute of input tag

Image
  HTML FORMS Password Input Think about all those times we have to put sensitive information, like a password or PIN, into a  <form> . We wouldn’t want our information to be seen by anyone peeking over our shoulder! Luckily, we have the  type="password"  attribute for  <input> ! An  <input type ="password">  element will replace input text with another character like an asterisk (*) or a dot (•). The code below provides an example of how to create a password field: <form>    <label for = "user-password" > Password: </label>    <input type = "password" id = "user-password" name = "user-password" > </form> After a user types into the field, it would look like: Even though the password field obscures the text of the password, when the form is submitted, the value of the text is sent. In other words, if “hunter2” is typed into the password field, “user-password=hunter2” is sent a...
Read more

Adding a Label: label tag, for attribute and id attribute for input tag.

Image
  HTML FORMS Adding a Label In the previous exercise we created an  <input>  element but we didn’t include anything to explain what the  <input>  is used for. For a user to properly identify an  <input>  we use the appropriately named  <label>  element. The  <label>  element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a  <label>  and an  <input> , the  <input>  needs an  id  attribute. We then assign the  for  attribute of the  <label>  element with the value of the  id  attribute of  <input> , like so: <form action = "/example.html" method = "POST" >    <label for = "meal" > What do you want to eat? </label>    <br>    <input type = "text" name = "food" id = "meal" > ...
Read more