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
Related
thats my code
<form class="contactForm">
<label> Your name
<input type="text" name="name" placeholder="Your name">
</label>
</form>
I want my input element to be shown beneath my label element. Thought its a problem of block element but when i style in css input or label to be shown as a block nothing happens. Thanks for help
While the label can be setup that way, try making it the input's sibling instead of parent. Also, give it the for attribute to match an input's name attribute.
<form class="contactForm">
<label for="name">Your name</label>
<input type="text" style="display:block" name="name" placeholder="Your name">
</form>
Once the label is being used like this, you can see display:block works as intended. Just want to add: in a final solution it's poor practice to use style tags directly, and I recommend creating easy to understand CSS classes.
Hope that helps.
A <span> with display: block set on it should do the trick - and, unlike using a <div>, it's valid HTML. Just make sure the parent label isn't still set to display: inline - which is default.
Example:
label,
label > span {
display: block;
}
<form>
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
Would a <br /> work?
<form class="contactForm">
<label> Your name
<br />
<input type="text" name="name" placeholder="Your name">
</label>
</form>
<form class="contactForm">
<label> Your name
<input style="display:block;" type="text" name="name" placeholder="Your name">
</label>
</form>
The text in the label doesn´t have a tag. If you add a <span>, you can add some style to that.
label span{
display: block;
}
<form class="contactForm">
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
You just have to use the input fields within div
<form class="contactForm">
<label> Your name </label>
<div>
<input type="text" name="name" placeholder="Your name">
</div>
</form>
I am trying to have my forms float right, so that it looks neat when everything is placed next to each other, and it works fine, EXCEPT for the first 2? That is what weirds me out? It works great after the first 2. Here is a screenshot that says it all and my HTML code
<head>
<title>New user</title>
<style type="text/css">
#form_container {
width: 25%;
}
#form_container input {
float: right;
clear: both;
}
</style>
</head>
<body>
<div id="form_container">
<form action="" method="post">
Username: <input type="text" name="username" value="" /><br />
Password: <input type="text" name="username" value="" /><br />
Password again: <input type="text" name="username" value="" /><br />
Password triple: <input type="text" name="username" value="" /><br />
</form>
</div>
</body>
Why is there that "space" between the first and second ones?
Thanks on advance everyone!
It's simply because you are asking for a password 3 times.. the markup doesn't like that and throws a random gap at you.
In all seriousness, there are a few ways to fix this.. the easiest is to set clear:both on the br.. that was causing the gap.
jsFiddle example
br {
clear:both;
}
Also, remove clear:both from #form_container input as that isn't needed anymore.
#form_container input {
float: right;
}
I'd also suggest adding a label to each input for validation purposes.
Restructure your markup a bit to add labels (which you could have anyway), and you can ditch the <br>'s completely. Working example here: http://jsfiddle.net/designingsean/rWfek/1/
HTML:
<div id="form_container">
<form action="" method="post">
<label>Username</label>
<input type="text" name="username" value="" />
<label>Password</label>
<input type="text" name="username" value="" />
<label>Password again</label>
<input type="text" name="username" value="" />
<label>Password triple</label>
<input type="text" name="username" value="" />
</form>
</div>
The important bit of CSS:
label {
float:left;
width:50%;
}
The first answer is fine, but I also suggest wrapping everything in label.
The advantage is that when you click on the label text, 'Username: ', it will automatically put focus in the input box. While this might seem small, it really helps on touch devices, and especially on radio inputs -- try tapping the little 10x10 radio box. Much nicer and more intuitive with label.
<label>Username: <input type="text" name="username" value="" /></label>
and in the CSS:
#form_container label {
display:block;
clear:both;
}
Also, if you didn't already know this, I suggest using <input type="password"/> for passwords.
See this JSFiddle.
I have the following code that basically is a input form as I have it now the spacing between the title of each field and the field are all lined up properly when executed on my browser but when I try it on another browser some of the spacing is off, what is the best way to align the input so that it will render the same on all browsers?
<div style="z-index:12; position:absolute">
<font style="color:#FF6600; font-family:pirulen">
*Name: <input type="text" name="name" style=" margin-left:70px" size="30px" /><br/>
*Email: <input type="email" name="email" style="margin-left:70px; margin-top:5px; " size="30px" /><br/>
Company: <input type="text" name="company" style="margin-left:28px; margin-top:5px" size="30px" /><br/>
Address: <input type="text" name="address" style="margin-left:30px; margin-top:5px" size="30px" /><br/>
Address 2: <input type="text" name="address2" style="margin-left:10px; margin-top:5px" size="30px" /><br/>
City: <input type="text" name="city" style="margin-left:92px; margin-top:5px" size="30px" /><br/>
State: <input type="text" name="state" style="margin-left:65px; margin-top:5px" size="30px" /><br/>
Zip: <input type="text" name="zip" style="margin-left:106px; margin-top:5px" size="30px" /><br/>
*Phone: <input type="text" name="phone" style="margin-left:58px; margin-top:5px" size="30px" /><br/>
*Comments:<textarea style=" margin-left:12px; margin-top:5px; vertical-align:top; resize:none" name="comments" cols="30" rows="10" draggable="false"></textarea><br/>
<input type="submit" value="Submit" style="margin-left:150px" />
Thanks
This pretty well covers it:
http://www.alistapart.com/articles/prettyaccessibleforms
A styled unordered list, labels and inputs.
Just use a table, with labels (titles) in one column, fields in another. Having done that, you can then easily test different stylistic settings. The default rendering (fields aligned to the left) is not too bad, but consider right-aligning the labels; you may find this even better. You won’t need any pixel widths, since browsers automatically make each column as wide as needed for its widest cell contents. No other approach does this, except the use of CSS to simulate an HTML table (a clumsier way, which does not work on many versions of IE still in use).
If i set the css for textarea like this=>
#id_content {
padding: 0;
width: 100%;
height: 600px;
}
The height and width work.
But if i type something on textarea texts are at the middle of the height of the textarea though the padding:0.
Why is it happenning? How can i fix it?
This is the html source=>
<div id="id_div_content">
<form action="/createpost/" method="post"><div style='display:none'><input type='hidden' name='xxx' value='xxx' /></div>
<p><label for="id_title">Title:</label> <input id="id_title" type="text" name="title" maxlength="100" /></p>
<p><label for="id_content">Content:</label> <input type="text" name="content" id="id_content" /></p>
<input type="submit" value="Submit" />
That happens if you are using the input tag in your html as such:
<input type="textarea" id="id_content" />
If you are, use the textarea tag instead:
<textarea id="id_content"> </textarea>
Here is an HTML input text box:
<input type="text" id="text" name="text_name" />
What are the options to define the size of the box?
How can this be implemented in CSS?
You could set its width:
<input type="text" id="text" name="text_name" style="width: 300px;" />
or even better define a class:
<input type="text" id="text" name="text_name" class="mytext" />
and in a separate CSS file apply the necessary styling:
.mytext {
width: 300px;
}
If you want to limit the number of characters that the user can type into this textbox you could use the maxlength attribute:
<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />
The size attribute works, as well
<input size="25" type="text">
Try this
<input type="text" style="font-size:18pt;height:420px;width:200px;">
Or else
<input type="text" id="txtbox">
with the css:
#txtbox
{
font-size:18pt;
height:420px;
width:200px;
}
You can set the width in pixels via inline styling:
<input type="text" name="text" style="width: 195px;">
You can also set the width with a visible character length:
<input type="text" name="text" size="35">
<input size="45" type="text" name="name">
The "size" specifies the visible width in characters of the element input.
You can also use the height and width from css.
<input type="text" name="name" style="height:100px; width:300px;">