Cant understand!

HTML-CSS
1 
<input type="number" name="age" id="number"  placeholder="your age" min="10" max="99" class="form-control">

-When I change max=“99”(years) my age-field change a size . Why ?

3

min=“10” max=“99” no value =(

5

I am doing an <label> for age
when I put in input field a max 99 power the input field changes size
I know I can change it but I wanna know what I did id wrong What kind of tag working not correct

6

The placeholder attribute only works for text, search, url, tel, email, and password. It’s supposed to be a sample value of what the user is expected to enter. It isn’t supposed to be used as the only prompt or as a label for the input box.

So what’s happening here is that when you define the input values to be in the range of 10 to 99, the input box reduces down in size to 2 characters and your placeholder value gets truncated.

What you need to do is remove the placeholder attribute and put the prompt outside the <input> element:

<p><label>Age: <input type="number" name="age" id="number" min="10" max="99"
class="form-control"> Years</label></p>

To give the user a little more info/help you could use the value attribute to give the input field a default value so the box is not completely empty to start with:

<p><label>Age: <input type="number" name="age" value="10" id="number" min="10" max="99"
class="form-control"></label></p>

… but that runs the risk of them submitting the form with the default value by mistake.

In that case, you could use the placeholder value if you want give another visual cue to the user that this input field needs a number, rather than text. But to be honest the UI for the input field prevents you entering anything but a number anway, so I think it’s OK to leave it blank.

<p><label>Age: <input type="number" name="age" placeholder="10" id="number" min="10" max="99"
class="form-control"></label></p>
1 Like
7

thank you ! I will try it

1 Like
8

Suggest to keep max=“999” it looks more clean as it adds more space between labels.:slightly_smiling_face:

2 Likes
9

You shouldn’t “hack” the HTML for presentational reasons :slightly_smiling_face:

Much better to use a couple of CSS rules like:

input {
  padding: 10px 5px 5px 10px;
  font-size: 1.1em;
}

But good spot :grin:

10

Is it maybe because you’re putting numbers in quotes so it’s being treated like text?

11

@geonz HTML isn’t that clever - all attribute values are strings :slight_smile:

In fact the double quotes are optional in HTML5 if you’re dealing with attribute values that don’t contain spaces. It’s just good practice to use double quotes (or single quotes if the value contains double-quotes) in case you forget when you do have values with spaces in them.

1 Like
12

Thanks!! I am figuring this out, usually the hard way, where it matters and where it doesn’t :wink:

1 Like