Jump to content
Larry Ullman's Book Forums
Marie

Changing Size Of Text Fields

Recommended Posts

Hello,

 

I know this should be simple but I cannot see where one can change the length of the text fields in any of the forms, more specifically the register page. Also, I cannot see what is determining the size as they are now. I would like to make them longer in case someone has an extremely long name.

 

Thanks,

 

Marie

Share this post


Link to post
Share on other sites

The actual width of the input field? Such as the search bar on this forum in the top right? They're are controlled by the CSS template (or should be) I havent looked at the code. What browser are you currently using? If you are using Firefox there is a very good plugin called the web developer plugin https://addons.mozil.../web-developer/ That allows you to view the CSS styles by hovering over the HTML elements, you can then view what CSS styles are being used on this element and also edit the CSS inline, to guarantee that the changes you were going to make to the CSS file will work.

 

Shout me if that's not what you want and tell me what page of the book your on and i'll get mine out.

Share this post


Link to post
Share on other sites

Although it is possible to style it through your HTML, markup text should be used to divide page content and CSS is where you should style and make pretty the HTML markup. If you add a width to this css command

form input, form textarea {
width: 300px; /* Or whatever*/

you can alter the register page field widths

Share this post


Link to post
Share on other sites

Thank you,

 

I should have realized that this would be controlled by CSS. I was working on the register.php page under section 2 of the book and just trying to rearrange the fields into a different layout as well as make the length of the "name", "password" fields a little wider.

 

Marie

Share this post


Link to post
Share on other sites

Please notice this html code:

 

<p><b>Last Name:</b> <input type="text" name="last_name" size="20" maxlength="40" value="<?php echo $ln; ?>" /></p>

 

20 is the size of the field the user sees and 40 is the size of the variable your code will accept.

CSS has nothing to do with it.

If you want to move things around on the form you don't need CSS for that either.

If you want to move the form around probably then you would like to use CSS.

Share this post


Link to post
Share on other sites

That's interesting. I didn't know CSS could size the form field like that and I haven't seen it done with CSS before.

I thought html is specifying the number of characters, which doesn't seem to me to be a CSS function.

Share this post


Link to post
Share on other sites

I wasn't able to edit my above post.

 

Also, taking a look at their example (w3schools), it doesn't show any CSS even though they say it should be done that way. I really don't understand what CSS has to do with the number of characters.

 

Share this post


Link to post
Share on other sites

Hi Abigail,

 

As a general rule, although I guess there are exceptions (as with all rules it seems) anything depicting the visual appearance should be through the CSS. So in this case if it is the physical width of the input field then that should be the CSS. I don't believe the maxlength attribute is anything to do with CSS and so it would be expected to be a HTML command, I guess because it doesn't affect the layout, it just affects the number of charachters the field can accept. I wasn't sure exactly what Marie wanted as my initial reply does kind of suggest, nor did I have the code to hand, so I just assumed that it should be styled within the CSS. Although I suppose it doesn't currently matter how you do it, I just advocate following standards as much as possible, sure I forget or miss things on occasions but I feel they are there for a reason, so might as well abide by them. Also with tools like the web developer tool bar its so much easier to inline edit css in your browser, no need to guess a width save the file, reload it etc. I can tinker with the CSS inline get it how I want it and then just copy it over to the file.

Share this post


Link to post
Share on other sites

Hi Jonathon.

 

I follow your thinking. And suggesting the tool bar is helpful.

 

But I believe the question Marie is asking is about the number of characters, not the visual.

And that is why I asked her to post her code, which she hasn't done as of yet.

Seeing the code and knowing details of what she wants would give us the information we need, otherwise we are each talking about something different, it seems to me.

 

 

Also, if you look at the example at w3schools, there is not CSS. I can't understand why they say you should use CSS in this case. And if they do believe that then where is the example?

 

Either way, Marie should be able to figure out how to resolve this issue or else post more info.

 

Share this post


Link to post
Share on other sites

Just to clarify there are two input attributes being discussed here: size & max-length.

 

Size sets the visual width of the input and absolutely should be styled using CSS (keep markup and styling separate).

 

Max-length determines the maximum number of characters that can be entered by the user. Max-length cannot be set using CSS.

 

Interestingly, the new HTML5 specs have included a new attribute called pattern which allows you to set rules via a regular expression; I wonder over time if max-length will be deprecated and you'll have to test maximum input length against a PCRE.

 

I would strongly advise the use of <label> instead of <b> around, well labels; that's what it's for (huge usability advantage too).

 

I don't know which page you were referencing on w3schools; but, I've found a number of errors on their website in the past. I go to the specs or books now.

Share this post


Link to post
Share on other sites

Hi Rob,

 

Yes I and Abigail are both aware of the two different attributes. But it isn't clear whether Marie wanted size or max-length. Either way, she should be able to adjust the page either way through the replies she's got.

Share this post


Link to post
Share on other sites

A better name for size would be DisplayLength. What this does is, my example of last name has a variable of length 40 chars. But I don't want my form field to be that long. So html form provides the size attribute by which I can specify that I only want 20 chars for display and entering. I could make it 10 or 30 or whatever.

You can do this with CSS?

 

The w3schools page is what Jonathon posted above and then there was a link for an example but that example does not use CSS.

 

Share this post


Link to post
Share on other sites

Size is the physical width of the input field and should be done through the css using, px em or %. Maxlength is a HTML attribute specifying the maximum number of charachters that can be input into that field. It is not able to be controlled through CSS.

Share this post


Link to post
Share on other sites

rob is right, the examples on w3schools are not very good, and contain all sorts of undesirable markup.

 

And like Jonathon said, the width (appearance) of any form fields should be adjusted via the width property in CSS.

 

For example:

 

input {

 

width: 100px;

 

}

 

<form method="#" action="#">

 

<input type="text">

 

</form>

Share this post


Link to post
Share on other sites

And Larry, if I might put in my two cents, the old-new forum design was unfriendly to IE6 (which I'm forced to use at work), but this new-new forum is even worse to IE6. What gives?!

Share this post


Link to post
Share on other sites

Oh, it's a hoot, lemme tell you!

 

The best is when I go to a work-related site and all I see is...nothing! because the site won't load for IE6.

 

It's truly awesome. Also, without giving away the name, I work for a major player in the Japanese electronics industry. God! They're so far behind, it's not even funny.

 

Also, yeah, I love that countdown site. I still aim to support IE6 in all my site designs, but I can't wait to no longer feel obligated to do that. I heard once that something like 60%-70% of all jQuery's code is there purely to deal with IE6 incompatibilities.

Share this post


Link to post
Share on other sites

As I wrote in response to your other post, HartleySan, I don't believe in making sites that won't work on browsers, even though the idea of having to support IE6 is criminal. That being said, this forum software is a commercial product that I've purchased and installed. Perhaps I could start mucking around in its internals to change its behavior (like this issue you're having, or your request that it not automatically capitalize the first letter of each word in the subject, or your request that it allow you to use the letter b as a variable), but I'm really never going to. It's unfortunate that you're having this problem, but I have a very limited amount of time (specifically, about 20% less time than I need), and have to prioritize accordingly. I still need to update the look of the updated site so that it ties in with my main site (e.g., actually use my icons and link to the book pages)! And, of course, I need to do the work that actually makes me money...

Share this post


Link to post
Share on other sites

Larry, I understand. I didn't mean to criticize too much.

 

In this case though, it's quite frustrating in that with this new-new forum, I can no longer edit a previously posted message from IE6. I get an error message, which is quite annoying.

 

And again, I imagine that your profit margin is already razor thin, but you ever think about hiring someone to assist with all this? Specifically, maybe if you were to hire one of the gurus on the forum, it'd be great for everyone. (I'm specifically thinking of Stuart.)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...