SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Adjust size of comments box

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

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


    Debbie

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use something like

    Code:
     
    <input type="text" style="height: 100px; width: 500px" name="txtInput" />
    but are you sure you don't really want a <textarea>

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

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    you can use something like

    Code:
     
    <input type="text" style="height: 100px; width: 500px" name="txtInput" />
    but are you sure you don't really want a <textarea>

    Code:
     
    <textarea name="txtArea" rows="20" cols="50"></textarea>
    I don't know?!

    Why would I want one versus the other?



    Debbie

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You use a text area when you expect long , potentially multi-line input.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Why are you using an LI?
    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. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I don't know?!

    Why would I want one versus the other?
    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. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So does this syntax look okay?

    Code HTML4Strict:
    		<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>

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


    Debbie

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So does this syntax look okay?
    yep, looks good to me 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. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, thanks for the help guys!!


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •