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
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;" />
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; }
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
Related
I tried many times that google give me answers, but, It not working... Someone help?
I tried:
<input type="text" height="10">
<input type="text" style="min-height: 10px;">
use this style to height the input element
input {
height:50px;
}
<input type="text" placeholder="Enter Text Here"/>
Try This
<input type="text" style="height:10px;">
This code you wrote <input type="text" style="min-height: 10px;"> - does work actually. it just won't go to min-height you stated because inside the font for the text is bigger. If you maintain the font correlated with the input height it will work.
This example works if you make the font size smaller.
<input type="text" style="min-height: 5px; font-size: 4px;">
It is not height its size.
If you want in the way you questioned.Something like this help
<input type="text" size="10">
<input type="text" size="10px">
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
Can someone explain how I can modify the second input id shown below so that it is not visible on the page and also does not take up any space on the page?
<section>
<label for="muni">Municipality</label>
<div>
<input id="county_select" type="text" />
<input id="county_no" type="text" value="" disabled="disabled" style="visibility:hidden" />
</div>
</section>
Currently, this second input id takes up space on my form and I don't want it to take up any space. Thank you.
Use display: none;, as shown:
<input id="county_no" type="text" value="" disabled="disabled" style="display: none;" />
Reference:
The CSS display property.
display:none in stead of visibility:hidden
Use the style="display:none;" instead of visibility:hidden
visibility:hidden leaves space.
You can style the input using CSS, targeting it via its id tag.
In your .css file:
#county_no {
display: none;
}
Styling HTML inline should be avoided.
In my html form the word message is showing at the bottom-left of the textarea, How can I adjust it on the top-left of textarea? img - http://img641.imageshack.us/img641/415/htms.jpg
<form name="reg_form" method="post" action="home.php">
First Name:
<input type="text" name="f_name"/><br/> <br/>
Last Name:
<input type="text" name="l_name"/><br/> <br/>
Your Email:
<input type="text" name="new_email"/><br/> <br/>
Re-enter Email: <input type="text" name="check_email"/><br/> <br/>
Message: <textarea cols="30" rows="10" name="message"></textarea>
</form>
You'll need to use a <label> tag to put your, well, labels in. Then using some CSS you can align it to the top of the <textarea> using this:
label
{
display: inline;
vertical-align: top;
}
HTML:
<form>
<label>Message:</label>
<textarea></textarea>
</form>
There's a live example I made here.
In other news
Your technique of spacing the inputs using isn't the best. For one, different fonts have different space widths and secondly, it makes your code look rubbish. You can get around this by using <label>s with CSS inline-block. There's a working example here.
I have two input elements.
One is to put your email and the other is the email text.
How do I make the email input big enough to put a lot of text in it and be able to space down and stuff?
thanks
<form method="post" action="ttp.actions.emailAction.action">
<h3>Email</h3>
<input name="email" id="email"/><br /><br />
<h3>Message</h3>
<input name="message" size="50" id="message"/>
<br />
<br />
<input type="submit" value=" Send "/>
</form>
use textarea instead of input
<textarea name="email" id="email" rows="25" cols="80">Write stuff here...</textarea>
instead and you can set the size and other properties (scrolling etc...) using CSS.
textarea{
width: 640px;
height: 200px;
}
Check out the size attribute.
<input type="text" size="25" />
Use textarea for large texts instead of input fields:
<textarea rows="5" cols="25"></textarea>
Here is an example of different methods to make input larger