Display web forms in different OS
This article is a small study of how browsers render standard web forms in different operating systems. We’ll talk about standard, default forms and don’t touch on the now common forms with png-substrates and heavily modified CSS and JS.
I love firefox (at times when it doesn’t slow down), and so for the sake of example I made such a form. Nowhere except firefox, I, for example, have not tested it.
')
As you can see, I have aligned all the input elements on the grid, adding a few classes. I changed the padding of the select to even its height with other fields. Also slightly increased the width of the fields in the right row, to trim them under the static upload file upload. HTML and CSS came out like this:
This form looks good and you probably guessed from the screenshot that I made it on windows 7, let's see how it is rendered by other browsers on the same OS.
I spent two guides to see the difference. As seen in the screenshot, chrome draws more minimalist fields and smaller checkboxes and buttons. But he selected with another selection button and a little different in height. As for the file upload field, it is already completely different from other browsers, and then we will see that this is a kind of webkit (chrome and safari) standard, which we will have to put up with.
Opera is somewhere between firefox and chrome, and draws most of the fields to us as in chrome, but checkboxes and selects look more like a firefox version. The loading field here is the most elaborate and differs from everything we saw before.
IE also draws a compromise version, it looks more like firefox, but checkboxes and selects are there like in the chrome version. And the boot field is also unique and unlike anything.
I did not include safari in the list. It is almost the same as chrome. In IE of earlier versions (6-7-8), forms are rendered in the same way as in version 9, however, in 6 and 7 there will be problems associated with the old standards, but this article is not about them.
I have ubuntu 11.10 installed on my virtual machine, let's see how things are there:
As can be seen in the screenshot, the form in firefox on ubuntu and the same form on windows differ even more than this form in different browsers on the same OS. This is due to the fact that firefox does not have its own form renders, it just takes them from the standard OS libraries on which it is launched. Absolutely all the elements were rendered differently than in windows, and the file upload field simply broke the entire grid.
Chome renders its input and does not use the standard OS. But on ubuntu it also has strong differences with the windows version. Completely different checkboxes, selekt, teksareya and buttons. But overall it’s better than firefox.
Opera in ubuntu behaved like firefox, but the differences here are in almost all elements.
It’s hard to imagine people using ubuntu safari or IE, although there are probably some. Let them check the drawing of forms themselves, I did not do that.
If you look at this form in Mac OS X Leopard, the picture is as follows:
Lion displayed the form in all browsers as equally as possible and made the standard design for all fields, but there are also differences and the main thing, of course, is the download field, on the webkit it is just different. The rest is not so significant, but if you look closely there is a difference.
So it goes. And this is only on the three most popular systems, and there is still solaris, bsd, a bunch of windows, mac and unix-system versions. It is necessary to accept that if your design provides standard input in the forms (and this is a good tone), they will differ in different OSs and they need to be laid out so that the form grid does not break and fall when differently drawn. In order for the grid to be even, I advise you not to put elements with strict and most importantly different widths in front of any input. you can’t perfectly fit them to the lines “in pixel”. You should not also enclose the form in a strictly fitted parent block that is fixed on it, make it wider. form inputs on some operating systems will be wider than you expect.
The file upload field in modern designs is increasingly being omitted and replaced with a link, but you should also remember about it. in webkit it draws quite differently than other browsers.
I love firefox (at times when it doesn’t slow down), and so for the sake of example I made such a form. Nowhere except firefox, I, for example, have not tested it.
')
As you can see, I have aligned all the input elements on the grid, adding a few classes. I changed the padding of the select to even its height with other fields. Also slightly increased the width of the fields in the right row, to trim them under the static upload file upload. HTML and CSS came out like this:
<div class="wrapper"> <label for="1"></label> <input type="text" id="1"> <label for="2"></label> <input type="text" id="2" class="mail"> <label for="3" class="lbl-msg"></label> <input type="text" id="3"> <label for="4"></label> <select id="4"> <option value="1"></option> <option value="2"></option> <option value="3"></option> </select> <label for="5" class="lbl-msg"></label> <input type="checkbox" id="5"> <input type="checkbox" id="51"> <input type="checkbox" id="52"> <input type="checkbox" id="53"> <label for="6" class="lbl-dwl"></label> <input type="file" id="6"> <label for="7" class="lbl-msg"></label> <textarea id="7"></textarea> <input type="button" value=" "> </div> body { font:16px "Trebuchet MS", Tahoma, Arial, serif; } .wrapper { float:left; margin:50px 0 0 50px; width:740px; } .wrapper input { display:block; float:left; width:200px; } .wrapper input[type=checkbox] { width:10px; margin:6px 7px 0 0; } .wrapper input[type=button] { width:auto !important; margin:20px 0 0 139px; } .wrapper select { display:block; float:left; width:213px; padding:2px; } .wrapper textarea { display:block; float:left; width:553px; height:70px; } .wrapper label { display:block; text-align:right; float:left; width:100px; margin:0 20px 20px; } .lbl-msg { clear:left; } .lbl-dwl { margin-left:146px !important; } .mail { width:207px !important; } This form looks good and you probably guessed from the screenshot that I made it on windows 7, let's see how it is rendered by other browsers on the same OS.
I spent two guides to see the difference. As seen in the screenshot, chrome draws more minimalist fields and smaller checkboxes and buttons. But he selected with another selection button and a little different in height. As for the file upload field, it is already completely different from other browsers, and then we will see that this is a kind of webkit (chrome and safari) standard, which we will have to put up with.
Opera is somewhere between firefox and chrome, and draws most of the fields to us as in chrome, but checkboxes and selects look more like a firefox version. The loading field here is the most elaborate and differs from everything we saw before.
IE also draws a compromise version, it looks more like firefox, but checkboxes and selects are there like in the chrome version. And the boot field is also unique and unlike anything.
I did not include safari in the list. It is almost the same as chrome. In IE of earlier versions (6-7-8), forms are rendered in the same way as in version 9, however, in 6 and 7 there will be problems associated with the old standards, but this article is not about them.
Ubuntu
I have ubuntu 11.10 installed on my virtual machine, let's see how things are there:
As can be seen in the screenshot, the form in firefox on ubuntu and the same form on windows differ even more than this form in different browsers on the same OS. This is due to the fact that firefox does not have its own form renders, it just takes them from the standard OS libraries on which it is launched. Absolutely all the elements were rendered differently than in windows, and the file upload field simply broke the entire grid.
Chome renders its input and does not use the standard OS. But on ubuntu it also has strong differences with the windows version. Completely different checkboxes, selekt, teksareya and buttons. But overall it’s better than firefox.
Opera in ubuntu behaved like firefox, but the differences here are in almost all elements.
It’s hard to imagine people using ubuntu safari or IE, although there are probably some. Let them check the drawing of forms themselves, I did not do that.
Mac OS X Leopard
If you look at this form in Mac OS X Leopard, the picture is as follows:
Lion displayed the form in all browsers as equally as possible and made the standard design for all fields, but there are also differences and the main thing, of course, is the download field, on the webkit it is just different. The rest is not so significant, but if you look closely there is a difference.
So it goes. And this is only on the three most popular systems, and there is still solaris, bsd, a bunch of windows, mac and unix-system versions. It is necessary to accept that if your design provides standard input in the forms (and this is a good tone), they will differ in different OSs and they need to be laid out so that the form grid does not break and fall when differently drawn. In order for the grid to be even, I advise you not to put elements with strict and most importantly different widths in front of any input. you can’t perfectly fit them to the lines “in pixel”. You should not also enclose the form in a strictly fitted parent block that is fixed on it, make it wider. form inputs on some operating systems will be wider than you expect.
The file upload field in modern designs is increasingly being omitted and replaced with a link, but you should also remember about it. in webkit it draws quite differently than other browsers.
Source: https://habr.com/ru/post/136152/
All Articles