FAQ: Learn HTML: Forms - Range Input

This community-built FAQ covers the “Range 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 Range 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!

in the practice html it gave me an “error” because I didn’t use “0.5” I used “.5” for my step. Does this 0 digit matter in real life or is it just for the sake of practice that I should be using the 0.5?

If I’m being totally honest, I’m not thrilled to be seeing “class” or “section” at this point in the studies. I don’t know what these are, and now I am having to google around and figure out why these have been added to the code, what they do, etc. Just some feedback.

In regards to the element, why do we use the ‘id’ and ‘name’ attribute when both have the same value?

My understanding is the ‘id’ attribute is required to connect with correct label element while the ‘name’ attribute is just a unique name for the input element.

I have a question about the use of < span > tags in this exercise to nest the “Rare” and “Well-Done” text elements. These tags are not really mentioned in the “Learn” section of the lesson, and while I remembered seeing them in the Elements and Structure lessons, I couldn’t quite remember their function.
I was unsure as to why they would be used instead of a < h1… > or < p > tags in this context, so I did a bit of research on all these tags. First thing I found is that the < h1… > tags are not appropriate for anything that is not functionally a heading within your document - this is dictated by the best practices for readability and accessibility. As to the < p > tag, the main reason it is not used here seems to be the BLOCK nature of the tag, meaning that each use of this tag to define an element would force a new line (this would also apply to the aforementioned <h1…> tags, as they are also BLOCK tags - err…I think). **edit - this would also appear to be why < div > is an inappropriate option here.
For the formatting of the type=range input to make sense in the example we need the text to remain INLINE. Thus, the < span > tag, which is not a BLOCK tag but an INLINE tag is selected. However, in my research on the < span > tag, the most prevalent function for this tag seems to be sectioning off text for selective application of CSS style formatting rather than the structurally inline effect it has as an element (which I only saw mentioned once in a reply to a different question).

So after all that exposition, here are my actual questions:

Is < span > the only tag that is used for displaying inline text?

AND

If there are others, why is < span > the appropriate choice here?

2 Likes

What part f the cde creates the actual sliding bar

The actual sliding bar is created by the type attribute with the value “range”.
So if you use type=“range” it creates the sliding bar.
Hope it helped!

1 Like

I’m pretty sure it doesn’t matter in a real word application but 0.5 is less ambiguous. If you use .5 it’s easier to miss the decimal point.

Here’s a link to the MDN web docs <input type="range">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step

The name attribute is used in the HTTP request sent by your browser to the server. The id is for CSS and JavaScript as a reference that the element with that id.

They do not have to be the same but they can be as in the case in the tutorial.

Id's must be unique to the tag that it is inside and only used once on any given html page.

name doesn’t have to be unique, for example there are cases where you would use it many times with radio buttons.

Here’s a link to an example where the name attribute is used many times:

Also, a page with a list of attributes:

<span> is a generic inline container for phrasing content. It’s kind of like an inline version of <div>. It’s used to gain control of content inline for styling without changing the semantics of the content.

There are other elements that that have semantic meaning like <h1> for a heading but you can put a <span> inside an <h1> to control part of the content styling without changing the semantic meaning of the <h1>.

Here is a link to a list of inline elements:

Here’s a reference link to the element:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
you can also check at:

https://www.w3schools.com/tags/tag_section.asp