FAQ: Learn HTML: Form Validation - Set a Minumum and Maximum

This community-built FAQ covers the “Set a Minumum and Maximum” exercise from the lesson “Learn HTML: Form Validation”.

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

Introduction to HTML

FAQs on the exercise Set a Minumum and Maximum

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!

how can we set rules for range type of input field ? and what rules can we set for it?
thanks :thinking::thinking::slightly_smiling_face:

I cannot see any warning when testing the code:

What’s wrong?

(I’m using Chrome.)

Perhaps “required” is missing from "input

1 Like

This is because nothing is going wrong. Setting the min/ max in the tag only works if the input changes with those arrow buttons. Direct input on the input field itself is still allowed.

Note: Al tho it visual allows inputs above and beneath the min and max. I do not know if the input will return these values or if it will take the max/min value you have set. You should test this.

If you want to take direct input into account you could look into Javascript.

1 Like

I checked the javascript code for this to see how it works and i have a question i can kinda seem to understand the lines of code except for line excpet for line 2 in numCheck.js where it says const guess = new

I looked around in the other files and i dont know where new was defined or located when I erase it the whole code stops working can anyone please explain to me what this line of code does

Why are we able to have to inputs under the same label? How do they know to combine to each other?

The label identifies the element it is bound to. for is bound to id. Normal flow rules apply.

1 Like

Where does the error message come from and is it possible to style it? I looked through the other files but can’t figure this out.

For example, if I type 0 and click submit it says: “Value must be greater than or equal to 1”. Say you wanted to change the message ( for example, “Enter a number between 1 and 10”) or style it with css. Is that possible in this case?

Anything in the DOM can be given CSS properties of our liking, so yes, the message can be styled. Chances are the error messages are written in the HTML but hidden from view (with, display: none;). Dig through the HMTL and CSS and find the id or class attribute given to the element(s).

1 Like

Is there a best practice for the order of attributes in an element? Sometimes it seems to start with “id”, other times with “type”. As a beginner it would be helpful to just adopt a standard practice for it.

In other exercises the order was type, id, name… In this exercise it:s the opposite.

Also why doesn’t the code I was trying to paste here as an example not appear? Thanks

From what I’ve seen the order doesn’t matter, but I guess consistency within your own code is good so I think it’s up to you.

If you mean posting your code in this textbox here you need to surround it with this: ` on each side for it to appear. Or use three of those for a block.

Single wrapping, like this: <input>
Or block wrapping with three of those, like this:

<input type="text" id="some" name="some">
<label for="some">Some text</label>

Just look up formatting help.

2 Likes

The document (HTML) is an object which attributes (elements) are also objects. Think of an HTML element being represented in the DOM as,

p-node = {
    'opentag': '<p>',
    'id': '',
    'className': '',
    'style': {
        'width': '100%',
        'height': 'auto',
        'margin-top': '1em',
        'margin-bottom': '1em',
        'font-size': 'inherit'
    },
    'endtag': '</p>'
}

not an exact representation

The order in which object attributes are written is of no special concern as objects are not ordered the way an array is.

If one has blue eyes, blond hair, fair complexion, height of 6ft, weight of 175lb, does it matter what order this description is written? No matter what order the attributes are written they still apply.

person = {
    height: 6ft,
    weight: 175lb,
    hair-color: blond,
    eye-color: blue,
    complexion: fair
}
3 Likes

Thank you. I understand now that the order is of no special concern, but it seems that there are other situations where there are “best-practices” that are followed, even if the code will function without following those best-practices. So I was wondering if there existed a best-practice for the order in this example…

Best practice relates more to consistency, as @karolisvaitkevicius6 pointed out. For instance id could be written before class or name, to help it stand out. href could be written before rel, and src before alt, but it won’t matter which way you choose. Just keep it consistent in your markup.

2 Likes

MDN documentation says you can change the message with JavaScript: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Customized_error_messages

Not sure you can change the style (font, color, margin etc.), though.

1 Like

One way to go, though I’m not sure if this is an accepted practice, is alphabetization. Something like:

<input id="guess"
       max="10"
       min="1"
       name="guess"
       required
       type="number">

Consistency in your code is important, but most rules are easy to forget other than alphabetization. That’s my opinion.

For CSS properties, alphabetization is an accepted practice, as recommended by Google.

1 Like

Great, thank you! Good to know

in the forms exercice , does the input have to follow a specific order or not because in the learn box there is :
input id=“guests” name=“guests” type=“number” min=“1” max=“4”

while in the index box we have ;

<input type=“number” name=“guess” id=“guess” required min=“1” max=“10”

so the type=“number” is once written at first then in the middle …

Is it possible to change min and max values in the browser’s code inspector to submit another value? Would it work?