CODEWITHSUNDEEP
htmlcssformsinputheight
ChatNoir
ChatNoir

Reputation: 545

HTML altering height of input box in a form

I'm creating a form for my website and have the following piece of code for the enter message part of my code. I want to change the height for this input box only but am unsure how to do it. I would prefer to change the height in the html code rather than CSS if possible. Thanks :)

<p>
<label for="from">Your message:</label>
<br />
<input type="text" name="message" id="message" value="type your message..." maxlength="40"      size="40" onclick="this.value=''"/>
</p>

I have tried doing:

<p>
<label for="from">Your message:</label>
<br />
<input type="text" name="message" id="message" value="type your message..." maxlength="40"    width="40px" height="40px" onclick="this.value=''"/>
</p>

But this didn't work

Upvotes: 0

Views: 6144

Answers (3)

Elemental
Elemental

Reputation: 36

A "text" input does not have a height or width attribute. Since you want to define the height in your HTML, you can use the style attribute. You use CSS rules as its value like this:

<input type="text" style="height: 40px;" />

Upvotes: 2

Mooseman
Mooseman

Reputation: 18891

According to the MDN article for <input>:

width

If the value of the type attribute is image, this attribute defines the width of the image displayed for the button.

The same description applies to height

Use CSS instead. Either inline (not preferred) style="height: 40px;" or

#message{ height: 40px; }

Upvotes: 2

Boaprivate
Boaprivate

Reputation: 35

You can style text inputs like so with css

input[type=text] {
    ...
}

Without css you can use the style attribute like so 

<input type="text" style="..."/>

If using text areas you can use the rows attribute to change the height of the element however this does not work with inputs

Upvotes: 1

Related Questions