INPUT tag. size, css width, or HTML5 width?

Forum Moderators: phranque

Message Too Old, No Replies

INPUT tag. size, css width, or HTML5 width?

csdude55

7:56 pm on Apr 24, 2018 (gmt 0)

Let's say you're using a basic input tag:

<input type="text" name="whatever">

What is the "better" way to set the size / width?

<input type="text" name="whatever" size="15">
<input type="text" name="whatever" style="width: 100px">
<input type="text" name="whatever" width="100">

The 3rd option is new to HTML5 (I literally just now heard of it), but I'm not sure how well it degrades for old browsers; I still have a significant amount of traffic using IE9, even down to IE7. But if it doesn't naturally degrade and I have to still plug in CSS, then that kinda defeats the purpose.

csdude55

7:58 pm on Apr 24, 2018 (gmt 0)

Nope, wait, just discovered that "width" only applies to type="image". That changes everything... ignore this, I'll ask to have the thread deleted for stupidity

not2easy

8:05 pm on Apr 24, 2018 (gmt 0)

No question is stupid, at least that's what my mom told me. Maybe she was just being nice..

If this is for a form or a textarea, can't its size be controlled by its container?

keyplyr

8:25 pm on Apr 24, 2018 (gmt 0)

Assign a class and control all the presentation with CSS.

NickMNS

9:56 pm on Apr 24, 2018 (gmt 0)

I agree with keyplyr. You may not even need a class you simply style the tag.


input[type=text]{width:100px;}

keyplyr

11:51 pm on Apr 24, 2018 (gmt 0)

If you use other textareas on the page with different specs (especially if there is an action) so the browsers don't get confused it helps to assign them IDs and names:

<textarea id="example1" name="example2" rows="number" cols="number">lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a arcu a tellus consectetur dictum.</textarea>