Wrapping Text in Input Box

HTML & CSS
1

I am echoing the article that a user wants to comment on in an Input box (to be consistent with the rest of the form).

If the Article Title that I am echoing is super long and therefore won’t fit within my Max-Min Form width, [b]how can I wrap the text inside the Input box??[b]

Thanks,

Debbie

2

You can’t wrap text in a text input box, so perhaps you should use a textarea.

3

Maybe I’m taking the wrong approach? :-/

Here is what my “Add a Comment” form looks like…

Article Title:
‘This is an incredibly long Page Title used for the purposes of testing how page wrapping works.’

Name:
Double Dee

Comments:
<enter comments here>

Add Comment button

The “Article Title” and “Name” are auto-populated by PHP from my database.

So maybe I shouldn’t use an Input Box after all??

Since I am just displaying text, should I just use <p>'s ??

I just figured it was easier to work with Labels and Inputs since they fit into my Form better if you follow me?!

Debbie

4

I started to wonder about that after posting. Yes, that’s what I’d suggest.

5

Okay, but what do I do if I want to shade the background so that it appears that I have a data entry form with “Buff” colored Input Boxes?

If I used Inputs for both echoed data and actual inputs, I am using one HTML Tag-Type so it’s easy to style things.

Is there a way to do that with what we are discussing?

Here is what I have so far for my new way…


<!-- DISPLAY ADD A COMMENT FIELDS -->
<fieldset>
	<ol>
		<!-- Article -->
		<li>
			<p class="fauxLabel">Article Title:</p>
			<p class="fauxInput"><?php echo '\\'' . (isset($_SESSION['pageTitle']) ? $_SESSION['pageTitle'] : '') . '\\''; ?></p>

			<p class="fauxLabel">First Name:</p>
			<p class="fauxInput"><?php echo (isset($_SESSION['memberFirstName']) ? $_SESSION['memberFirstName'] : ''); ?></p>

			<label for="articleTitle">Article Title:</label>
			<input id="articleTitle" name="articleTitle" class="text" type="text" maxlength="20"
					 value="<?php echo '\\'' . (isset($_SESSION['pageTitle']) ? $_SESSION['pageTitle'] : '') . '\\''; ?>" /><!-- Sticky Field -->



.fauxLabel{
	margin: 0;
	padding: 0 0 0 0;
	display: block;
	font-weight: bold;
}

.fauxInput{
	margin: 0;
	padding: 0 0 1em 0;
	line-height: 1em;
}

Also, should my “fauxLabel” and “fauxInput” be in one <li> with <p> wrapping each, OR should each be a separate <li> ??

Debbie