Adjust size of comments box

HTML & CSS
1

How do I set the height and width of a comments box like this…


<li>
	<label for="comments">
		Comments:
	</label>
	<input id="comments" name="comments" class="text" type="text" />
</li>

Debbie

2

you can use something like

 
<input type="text" style="height: 100px; width: 500px" name="txtInput" />

but are you sure you don’t really want a <textarea>

 
<textarea name="txtArea" rows="20" cols="50"></textarea>
3

I don’t know?!

Why would I want one versus the other?

Debbie

4

Why are you using an LI?
Also I am assuming you want an area for people to provide long reponses? The correct tag for this would be a <textarea></textarea>. Note that you have to close the tag!

you could then use this:
label {vertical-align:top}
textarea{ height:5em; width:25em}
(I am sizing the box in ems, but pixels and percentages are also ok}

Incidentally, a textarea can also be sized in the tag itself … as a back up when CSS is off
For example:
<textarea id=“comments” name=“comments” COLS=40 ROWS=16> </textarea>

hope that helps.

==:)

5

You use a text area when you expect long , potentially multi-line input.

6

Because that is what the SitePoint tutorial said to do…

Also I am assuming you want an area for people to provide long reponses? The correct tag for this would be a <textarea></textarea>. Note that you have to close the tag!

you could then use this:
label {vertical-align:top}
textarea{ height:5em; width:25em}
(I am sizing the box in ems, but pixels and percentages are also ok}

Incidentally, a textarea can also be sized in the tag itself … as a back up when CSS is off
For example:
<textarea id=“comments” name=“comments” COLS=40 ROWS=16> </textarea>

hope that helps.

==:)

Debbie

7

You would normally use <input> if you expect a single line text string from the user.

<textarea> is used when you want to give the user the option to enter a multi-line text string. For example, in a contact form you could use a <textarea> for the user to enter the message they want to send you in an email.

8

So does this syntax look okay?


		<form action="submitted_form.php" method="post">
			<fieldset>
				<legend>Post your Comments</legend>
				<ol>
					<li>
						<label for="name">
							Name:
						</label>
						<input id="name" name="name" class="text" type="text" />
					</li>
					<li>
						<label for="email">
							Email:
						</label>
						<input id="email" name="email" class="text" type="text" />
					</li>
					<li>
						<label for="comments">
							Comments:
						</label>
						<textarea id="textarea" name="comments" class="text"
											rows="5" cols="50"></textarea>
					</li>
					<li>
						<input id="submit" class="submit" type="submit" value="Submit" />
					</li>
				</ol>
			</fieldset>
		</form>


input.text, 
textarea{
	background-color: #FFFFE0;
}

Debbie

9

yep, looks good to me :slight_smile: and it even passes as xhtml strict with only a minor warning.

You need to change the id for the textarea to “comments” for its corresponding <label> to work when you click it.

10

Okay, thanks for the help guys!! :wavey:

Debbie