HTML form elements

[lala.anderson]

Hi there,

I would love to have the exactly the same lenght for my single and multiline text areas. As you specify the width for the first one as size and the second one with cols I wondered how you would match the exact size? Is there any chance of also having a drop-down menu the same length?

It would be great if you could help me out on this one

lala

BTW Why is it that some textareas appear yellow (although the others do not)? Could I specify a style or sth to avoid it?

[Deadeye]

right now I cant think for the life of me how to get those the same size. I'm sure there is a way though.

As for the yellow text box's are you using the google toolbar, or any type of toolbar that auto fills forms for you?

Those generally will highlight the text box's yellow that have a general name like FirstName or Address to signify that it can auto fill the information for you.

Wesley

[lala.anderson]

Yes, I do indeed. Is there any way to stop them doing this? It looks quite awful. Also, the border around the textareas is rendered not too nice with Netscape. Is there any way around this?

lala

[curtiss]

While you specify their width with "size" and "cols" in the HTML tags themselves, you can use CSS to override those definitions. You can set all of your inputs to a specific length by adding:

input, textarea {
width: 150px;
}

If you want to set specific widths for only inputs that appear within a specific parent class, you could do something like:

.myClass input, .myClass textarea {
width: 150px;
}

Of course, you could also specifically assign a class to each element you want sized. In which case, you would do something like:

<input type='text' name='foo' class='bar' id='foo' />
input.bar, textarea.bar {
width: 150px;
}

When making your decision, please remember that the majority of form elements (textboxes, checkboxes, buttons, etc.) will all be effected by those definitions, unless you specifically exclude them.

[lala.anderson]

Curtiss,

Thank you for your reply.

I am just a bit lost as I am a newbie to CSS (have to admit: I never really used it that much). So, in an HTM file: where do I put the CSS (for all inputs)?

Sorry,
lala

[Allen]

Originally Posted by lala.anderson

Curtiss,

Thank you for your reply.

I am just a bit lost as I am a newbie to CSS (have to admit: I never really used it that much). So, in an HTM file: where do I put the CSS (for all inputs)?

Sorry,
lala

lala - you can either put the css pieces inside your html file - or you can put it into a separate file and "call it" from the html file.

do you plan to use these styles across the site or just on the page with the form?

[lala.anderson]

I really just need to have it on this particular page...

lala

[Deadeye]

you can have an inline CSS page.

here is a link on how to get a inline CSS working for that page only.

http://www.w3schools.com/css/css_howto.asp

I hope that helps

Wesley

[lala.anderson]

Cheers :-)

lala

[lala.anderson]

Hi guys,

I am amazed that the form looks so pretty now. Yeah, thanks to you. Great help...

I included the syle information within each element. For the drop-down I also added the style information in the same manner: <select name="dropdown menu" style="width: 200px">). Unfortunately, it is a bit different (although on the other side the textarea with scrolling is exactly the same width as the other elements). Why could that be?

Then a further question: Many people seem to produce a form with <label></label> enclosing the text and the field. How would you do this if you had text and connected input field (drop-down, textarea etc) in two different table cells?

lala

[curtiss]

You have to assign an ID to the form element:

<textarea id='myTextArea'></textarea>

Then, you add a "for" switch to your label, which refers to that particular ID:

<label for='myTextArea'>This is my label.  If you click here, no matter where I place this label in relation to the textarea, your cursor will go into the textarea</label>

[lala.anderson]

Curtiss,

You are my hero! That is so cool That's a great feature that the pointer will go to the corresponding field. Thank you so much!!!!

As the king of all CSS problems do you know what might be the problem with the size of the drop-down? I just seem not to be able to make it exactly the same size...

lala

[lala.anderson]

Also,
Is it possible at all to change the colour of the borner around any textarea, input and drop-down including the scrolling bar? Is there any way to prevent browser from highlighting fields automatically with a yellow background?

This would be marvellous...

Getting there...

lala

[curtiss]

Alrighty. That's a lot of questions wrapped up there, but I will try to answer them to the best of my ability without skipping over anything.

1. I am not certain what actually causes the issue with the dropdown menus, but for some reason, dropdown (or "select") elements are about 4 pixels shorter than other inputs. So, to solve that problem, you simply add 4 pixels to the length of your select elements.
2. You can change the color of the border around your form elements, but different browsers interpret that information differently. For instance, if you apply a border and background to radio buttons, Firefox renders them beautifully, but IE makes them look like crap.
3. Anyway, to do so, you would simply add the following CSS to the head of your document:
   

   textarea, input, select {
   border: 1px solid #000;
   }

4. Changing the scrollbars on anything is a little more difficult. Again, it's a problem with the way different browsers render the information. I don't know of any reliable way (or any other way for that matter) to get a Mozilla-based browser to change scrollbars. The only way I've found to get Firefox to change scrollbars is to trick it with CSS, although I can't think of a way to make that work on a textarea.
5. The only way to stop your browser from highlighting the form elements in yellow is to remove the Google toolbar. That is a direct result of the Google toolbar, and has nothing to do with your coding or anything else.

I hope that information helps. Good luck with all of it.

[lala.anderson]

Curtiss,

Thanks again. That is a great help

You are right. The border looks really crap in IE. I decided to leave it as it is.

To add 4 pixel to the width of SELECT works perfectly well with Firefox, but does not look the greatest in IE or Netscape (still a tiny bit off). I am really at the end of my patience with that ... thing

lala