SitePoint Sponsor

User Tag List

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

    Field Length > Text-Box Size

    Is it bad design to have a back-end Field that is greater than your fron-end Form Text-Box?

    For example...

    My "Create an Account" form currently has the following sized Text Boxes...

    First Name (20)
    Last Name (40)
    E-mail (60)
    Password (40)

    ...however I have had others claim that I need bigger Fields like this...

    First Name (40)
    Last Name (80)
    E-mail (100)
    Password (40)

    If I make my Form Fields larger to match my Database Fields, then that'll screw up my Form and Page Layout?!

    So, is it okay to allow the Field Length to be greater than the Text-Box Size??

    Thanks,


    Debbie

    P.S. Feel free to chime in on how big you think things should be!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    If you apply a width to the input via CSS, the size on the input element become irrelevant (as it only takes over if there is no styling on the field). There's probably no point setting a size at all (assuming you are talking about the size="" attribute).

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you apply a width to the input via CSS, the size on the input element become irrelevant (as it only takes over if there is no styling on the field). There's probably no point setting a size at all (assuming you are talking about the size="" attribute).
    Here is my code...
    HTML Code:
    	<!-- First Name -->
    	<li>
    		<label for="firstName"><b>*</b>First Name:</label>
    			<input id="firstName" name="firstName" type="text" maxlength="20"
    				value="<?php if(isset($firstName)){echo htmlspecialchars($firstName, ENT_QUOTES);} ?>" /><!-- Sticky Field -->
    				<?php
    					if (!empty($errors['firstName'])){
    						echo '<span class="error">' . $errors['firstName'] . '</span>';
    					}
    				?>
    	</li>
    I guess what I was getting at is that I could maybe style a Field to be 20 Characters wide but "upsize" the maxlength=40 so if someone has a really long First Name then they could still type up to 40 characters and submit it to my PHP script/MySQL but the Field in my Form would still be the "prettier" 20 charactrs wide?!

    Or does the Field Size on the Form need to match what is on the backend?


    Debbie

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I think you're confusing 'size' and/or CSS width with 'maxlength'.

    Maxlength is the maximum number of characters an input can hold. Size and/or CSS width is how big it should be shown on the form... if maxlength is larger than size/width it will scroll sideways as the user types.

    <input size="20" maxlength="40" />
    or
    <input maxlength="40" style="width:12em" />

    MaxLength should most always be the maximum length you want to allow in the database. The size attribute or CSS is how you make it pretty, even if the user ends up scrolling sideways inside the field.

    You should also keep in mind server side that like all client-side input, it's suspect and/or unenforceable, so you should check the length again on the server before sending it to the query.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    OK, I misinterpreted, but I don't see the point in letting a user submit info that you don't want anyway.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I think you're confusing 'size' and/or CSS width with 'maxlength'.

    Maxlength is the maximum number of characters an input can hold. Size and/or CSS width is how big it should be shown on the form... if maxlength is larger than size/width it will scroll sideways as the user types.

    <input size="20" maxlength="40" />
    or
    <input maxlength="40" style="width:12em" />

    MaxLength should most always be the maximum length you want to allow in the database. The size attribute or CSS is how you make it pretty, even if the user ends up scrolling sideways inside the field.
    That is what I was implying...

    Is it breaking some great law to have a Text Box that only holds 20 characters in its visible space but that has a MaxLength of 40 characters, so that if a User wanted to "scroll beyond" the Text-Box's natural size, they could still utilize the full 40 characters in this case?

    BTW, I din't know there was a "size" attribute. I have only ever used MaxLength.


    You should also keep in mind server side that like all client-side input, it's suspect and/or unenforceable, so you should check the length again on the server before sending it to the query.
    Well, I have a Regular Expression on every input like this...
    PHP Code:
            // ************************
            // Validate Form Data.        *
            // ************************

            // Validate First Name.
            
    if (empty($trimmed['firstName'])){
                
    $errors['firstName'] = 'Please enter your First Name.';
            }else{
                if (
    preg_match('#^[A-Z \'.-]{2,20}$#i'$trimmed['firstName'])){
                    
    $firstName $trimmed['firstName'];
                }else{
                    
    $errors['firstName'] = 'First Name must be 2-20 characters (A-Z \' . -)';
                }
            } 

    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, I misinterpreted, but I don't see the point in letting a user submit info that you don't want anyway.
    Why isn't anyone understanding me today?!

    You lost me Ralph.

    Again...

    My First Name Text Box is wide enough for 20 characters. It is also constrained to 20 characters by MaxLength. It is further restricted to 20 characters on the server side with a Regular Expression.

    Some people say I should allow up to 40 characters for the First Name, but I don't have enough space for that in my web page.

    So I was wondering if it is a great sin to have a Text Box that is 20 characters wide, but that will accept 40 characters.


    Debbie

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I was wondering if it is a great sin to have a Text Box that is 20 characters wide, but that will accept 40 characters.
    It isn't.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It isn't.
    For the Fields listed above, what Field Sizes would you recommend??


    Debbie

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    I don't normally set any front end limitations, but tend to set a limit of about 60 characters for names on the back end (via regular expressions), but that's just me. I don't know if there's a standard. I think I made a decision once upon a time that there were unlikely to be may legitimate names longer than 60 characters, and so that became my default ... although with email addresses, I just insist on the correct format, rather than the number of characters. The only real point of setting limits, as far as I know (in my ignorance), is to prevent nefarious entries.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    One thing on field sizes, because computers work better in exponents of two and/or multiples of 2/4/8/16, I prefer to keep my field sizes 1 byte smaller than a multiple of 16. That one byte is for the stop byte or run-length byte depending on storage method (for mySQL that's the difference between text and varchar)... or it's two bytes in some cases (the 'new' larger varchar).

    So I'd probably set the database length to 31 or 47 characters for name, for a 32 or 48 byte wide field. But I'm just wired that way from programming at the low-level.


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
  •