Render of HTML form elements on mobile / tablet : we need you.

Stéphanie Walter

Senior UX & UI designer

Senior UX & UI Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

This content is 6 years old. Remember that the following content might be outdated.

As you may know, the form element visual render is controlled by both the OS and the browser. With the arrival of all the new mobile and tablet browser and OSs, we get more and more different render for form elements. The idea of this little project is to test and gather many screenshots of how the different form elements, HTML5 and “old” classic ones will look across different mobile and tablet OS and browsers. Then we want to create in the end a gallery of what it would look like for everybody to show clients, devs and designers. The idea is not only to see if the form element is supported and the render of the element, but to see how the nativ control looks when the field it is focused( eg. keyboard changes for email, search, nativ select lists, etc.). That’s actually why we need you to do the screenshots with the field focused (and can’t use online testing tools)

How to help ?

If you want to help to create this little gallerie of screenshots, you just have to check this form elements page (put together by Pascal C – @eQRoeil ) and take some screenshots from your mobile / tablet. We need you to make a screenshot of each field with the focus on it (except radio/checkbox and range) so that we can gather as many information as possible on the native controls of each browser + OS. form element qrcode It would also be if you could add the browser + information. To participate, you’ll just have to use our template to re-create the page for your mobile  or fork it on github. You can also use my contact information here to send me the screenshots and I’ll do the boring work of putting them together.

You can also directly fork the code on github and send me a merge request !

Thanks to all in advance 🙂

Results so far

List of Screenshots so far :

form element render

 

 

Thank to all of those who helped : @Nilpohc , Yoann, Fred, @wleloutr@eQRoeil, @rodoldphebreard , Rudloff and those I forgot 🙂

Are you looking for a UX or UI designer, for a site or mobile application? Do you want me to give a talk at your conference, or simply want to know more about me? You can take a look at my portfolio and contact me.

5 thoughts on “Render of HTML form elements on mobile / tablet : we need you.

  1. Je voudrais bien participer mais un détail m’échappe.
    Vous voulez autant de screen que de focus ?

    Comment vous envoyez ces screen?

    • Oui le but c’est bien de voir à quoi ressemble le clavier ou le select natif déclenché par chaque type de champ lors du focus. Pour me les envoyer il y a mon mail en dur sur le lien de contact 😉