Learn

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?