Need a better way to dispaly forms

[Krik]

I have spent days looking through several new programing languages. I am searching for a better way to display forms.

The reason is this. Of the 3 major browsers (FireFox, IE, Safari) none can get it right.

Mozial dispalys the color wrong for borders and backgrounds.

Safari has bold text causing the "size" in the input field to have to be changed using javascript. As well they insist on highlighting the field in a color that clashes so bad with my sites color it makes you think of vomit. And you can not set the size of select fields any larger than some arbitrary unknow size.

IE, well there's alot here but my most current irritation is them instisting on using there dull borders on select fields.

So, flash is the most obvious choice but that price tag is to much to swallow for an occational use. As well I am not one that likes using complicated graphics software. Let me code it and I will be happy.

So what other options are avaible to make forms that look exactly as I originally intended them to across all browsers?

The door for flash isn't completely shut but that price tag has to come down alot especially as I may not use it but for an occationall thing here or there.

[NogDog]

The other drawback to Flash besides any price issue is that not all users have it installed/enabled.

[HalfaBee]

Maybe you should look into CSS and hopefully you can force all the browsers to display it the same. www.w3schools.com/css

[NogDog]

A lot can be done with CSS (see this article (http://www.picment.com/articles/css/funwithforms/) for one example), but because form elements are "replaced elements" generally supplied by the underlying OS, not all attributes can be controlled on all browsers.

Frankly, I'd go with something simple and generic, as (1) the user needs to be able to recognize it as a form, and (2) no one other than the designer is really going to care that much about what it looks like. :)

[Krik]

Frankly, I'd go with something simple and generic, as (1) the user needs to be able to recognize it as a form, and (2) no one other than the designer is really going to care that much about what it looks like. :)

Man oh man, is that true. Sometime I'll spend days getting one sectoin of the page to look and function just right and I'll go to show the progress and I get a quick "It looks fine" and I feel like they couldn't careless about the effort I put into it.

Any way on the CSS side I have tried every CSS and javascript hack available to get it to work. As well I looked up some of the browsers information on the standards they use. It has all been invain.

While a generic form would normally do the trick, this form is on the main page in an attempt to give them an easy way to have someone contact them about their questions. As such first impression are lasting impression and so I am going all out for how it looks. I have done tons of forms in the past and never used much for CSS on them this is really the first time I have tried much will CCS on forms and it has been a real trial.

Wish you could make a graphic that had an editable text field that the data could be passed to some code (javascript, php, something don't matter). I guess that is flash. So simple yet so overly complicated and $$$. A nice combining of the <object> and <form> tags would be nice as well. Better yet combining of <object> and xforms.

:(

[Krik]

hmm

A little out of the ordinary but maybe I can make an Open Office presentaion that can be converted to flash.

I wonder???

[coldwerturkey]

but, using css to make a form look the same on all browser is really, really, easy... why bother with flash


input, textarea {
border: 1px solid black;
background:white;
}

or-

.styled {
border: 1px solid black;
background:white;
}
...
<input type='text' class='styled'>

[Krik]

*cough*

Reading what I worte might clue you into the fact I tried that

Dare yout to get a <select> field to have a diferrent color border in IE

Fail!

Dare you to get a <select> field to go larger that 250px in Safari

Fail!

Dare you to get the colors in FireFox to match the colors in IE and Safari with just CSS

Fail

Dare you to get the <input> size in Safari to visually match IE and FirFox using just CSS

Fail!

Double Fail!

Triple Fail!

CSS has it uses but it is completely useles against browers that hate W3C standars. Javasript is much more viable for it especially when combined with CSS. But in this case the individual browser do not allow certain changes to the DOM and so both are useless.

And so with the restating of the issue do you have solution for it?

[Krik]

hmm

A little out of the ordinary but maybe I can make an Open Office presentaion that can be converted to flash.

I wonder???

Well, I stayed up way too late last night playing with this and here is what I found.

First you can export an open office impress presentaion as an .swf file.

Second you can create forms inside of an impress presentation.

I did a quick one last night and except the fact I have no experience in using the <object> tag I might have had it working.

So I will be learning a bit today and let you know how it turned out.

[Krik]

Well I am still on this. Bouncing around between a couple projects.

But I had a strange thought hit me while I was working on something else. And I will probably play around with it later.

But has anyone tried making a select box out of a dynamic drop-down (or cascading) menu. That when an item is clicked it is what is displayed and then javascript submits that value to the form validation.

I think the code is already spining a round in my head will have to wait till later to try it. But thought I would get any input that is available as far as issues or even the feasability of it.

[NogDog]

You might like this: http://www.cult-f.net/2007/12/14/elselect/

[nrg_alpha]

I have spent days looking through several new programing languages. I am searching for a better way to display forms.

The reason is this. Of the 3 major browsers (FireFox, IE, Safari) none can get it right.

I don't think it is so much that browsers get it wrong, so much as each browser interprets things slightly differently (especially when taking into account aspects such as CSS.. you can get pretty close.. but in all likelyhood, not exact...


Mozial dispalys the color wrong for borders and backgrounds.


I apologize for my ignorance.. but what is Mozial? You referring to firefox in general?

Safari has bold text causing the "size" in the input field to have to be changed using javascript. As well they insist on highlighting the field in a color that clashes so bad with my sites color it makes you think of vomit.


Not sure what you mean by the text size. As for the field highlighting, I agree.. it is rather ugly and odd... but I'm not terribly upset over it. So long as the forms on my site display correctly, its all good. I simply accept it as 'Apple's way'.

And you can not set the size of select fields any larger than some arbitrary unknow size.

I'm not sure I follow.. do you mean a fixed width for example? If so, you sure can..
but maybe I'm misunderstanding things.


IE, well there's alot here but my most current irritation is them instisting on using there dull borders on select fields.

I do not seem to have this issue. So long as you declare border size and colours in CSS, IE displays the form fields just as well as any other browser (this is not to defend IE however.. [especially v6].. in general, IE was a headache to develop for.. but as for forms and how they display, I do not have these issues.


So, flash is the most obvious choice but that price tag is to much to swallow for an occational use. As well I am not one that likes using complicated graphics software. Let me code it and I will be happy.

So what other options are avaible to make forms that look exactly as I originally intended them to across all browsers?

The door for flash isn't completely shut but that price tag has to come down alot especially as I may not use it but for an occationall thing here or there.
Forget flash.. just focus on good clean code with well structured and assigned CSS. Again, I have had good success on a rather consistent display of my forms across all major browsers (is it EXACT? no.. but close enough to call it 'consistent').

Cheers,

NRG

[fdgloworm]

But has anyone tried making a select box out of a dynamic drop-down (or cascading) menu. That when an item is clicked it is what is displayed and then javascript submits that value to the form validation.

I think the code is already spining a round in my head will have to wait till later to try it. But thought I would get any input that is available as far as issues or even the feasability of it.

Actually, Krik, I have done this. I have a page that has a generic form with two dynamic drop down boxes populated by data from MySQL db backend. The second drop-down then triggers an AJAX call that pulls up the requested form (from dropdown #2) and displays it in a <div> that was blank up till now. The user then completes this new form, and all the $_POSTed information, from the first form and from the second form, is then sent to an INSERT into that same MySQL database.

Works pretty well, but I'm having some issues with CSS following all the way through the AJAX (or keeping it on the first page) for the correct look. I'm not sure where the CSS needs to go for that. Still playing with it.
:)


Aaron