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?! :eek:

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



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

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…

	<!-- First Name -->
		<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 -->
					if (!empty($errors['firstName'])){
						echo '<span class="error">' . $errors['firstName'] . '</span>';

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?


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” />
<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.

OK, I misinterpreted, but I don’t see the point in letting a user submit info that you don’t want anyway.

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…

		// ************************
		// Validate Form Data.		*
		// ************************

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


Why isn’t anyone understanding me today?! :nono:

You lost me Ralph.


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.


It isn’t. :slight_smile:

For the Fields listed above, what Field Sizes would you recommend??


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.

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.