FAQ: Learn HTML: Forms - Number Input

#1

This community-built FAQ covers the “Number Input” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Number Input

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

1 Like
#2

I am confused about the order when using the element.

Coming from passwords we were given the example:

       <input type="passwords">

So I used that for numbers, writing:

   <form action="/practice.html" method="POST">
        <label for="numbers"></label>
            <input type="number" id="amount" name="amount" step="1">
    </form>

This was marked as wrong as it was meant to be:

   <form action="/practice.html" method="POST">
       <label for="numbers"></label>
          <input id="amount" type="number" name="amount" step="1">
    </form>

Can anyone explain how I am meant to know the ordering and why it differs? I am enjoying codecademy but it doesn’t explain why something I have done is wrong! So then I am just trying and trying to until I get it right, but don’t really feel I understand why it was ever wrong?

Thanks in advance!

1 Like
#4

Actually ordering doesnt matter your id doesnt match the label thats why it showed wrong

2 Likes
#6

This was the wrong one:

<form action="/practice.html" method="POST"> <label for="numbers"></label> <input type="number" id="amount" name="amount" step="1"> </form>

Here

<input id="amount">

is incorrect. It should be same as <label for="numbers">

Solution: use id in <input id="numbers">. The sequence does not matter.

2 Likes
#7

Are the “name” and “id” always the same? what is an example of when we would need them to be different?

2 Likes
#8

Hello and welcome on the site :grinning:
They can be different, Id is to identify the element in CSS or in JS, name is to identify element in HTML and in PHP for form handling

Hope this helps :grinning:

2 Likes
#9

What does step mean? Or step=1 mean? It didn’t explain it, it just said to do it. Help?

1 Like
#10

step defines how much should it jump once you decrease or increase it, so if step is 2 then when I click up it will be incremented by 2

Hope this helps :grinning:

2 Likes
#11

I’ve noticed that the instructions mention name but not id, however to pass the code you need to have both.

1 Like
#12

Use name attributes for form controls, as that’s the identifier used in the POST or GET call that happens on form submission.
Use id attributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier.
It’s possible to look up elements by name too, but it’s simpler and more reliable to look them up by ID.
Name is used for form handling in PHP when a form is submitted via HTML, name doesn’t have to be unique on a page, as it can link other elements together.

Hope this helps :grinning:

2 Likes
#13

how do i remove the arrows inside the textbox for a number type? or does it automatically appear for every number box

1 Like
#14

Here’s a question on stackoverflow that is the same as yours:

#15

I still don’t get it.
Why is the id attribute to identify the element in CSS/JS even though in the lesson whe saw that it’s related to the attribute “for” in the label element (which is html language or I am wrong?)?
Sorry for my bad english!

1 Like
#16

Id is used in CSS and in JS as you said:

document.getElementById("someId") // javascript

#someId {
  color: green; /* CSS */
}

For is used for labeling as you said, and name too.

But beacuse Id-s are unique it’s easier to handle them in JavaScript.
So that name’s aren’t unique they return an array even if there is only one name, just like classes:

document.getElementsByName("someName") // Names

document.getElementsByClassName("someClass") // Classes

As I said they return an array so we target one of them with:

document.getElementsByName("someName")[0] // Names

document.getElementsByClassName("someClass")[0] // Classes

We can even target all of them (or some of them) with a for loop:

for (let i = 0; i < document.getElementsByClassName.length; i++) {
  document.getElementsByClassName[i].style.color = "green";
}

And we use names to work with forms in PHP.

Hope this helps :grinning:

1 Like
#17

When using the type=“text’” attribute we used the value attribute. But i don’t see it being used when using the type=“number” atrribute. Why so?

1 Like
#19

type has nothing to do with value, of course I mean that type will change how (for example password) and what can be written there (for example number) but there aren’t any links between these like when using for and name.

Value was only needed to set there to provide the “customer” an example that can be written there.

Hope this helps :grinning:
(And I’m really sorry for the late reply but I got busy)