All the versions of this article: [English] [français]
Le 12/5/2010, 14:44 Nice style for forced form fields
During my development phase, I created a nice style to show "forced text fields" in web forms. Those text input fields used when part of the field content is locked.
How does it work and how does it looks like ?...
Ugly usual text fields
When surfing the web, we often fill forms, text areas, check boxes etc. This is even our main usage of the Web : when you search something using a search engine, or when you send an email using a webmail, you are filling forms and fields ...
Sometimes, you only have to put the beginning or the end of the form field value
e.g.: I want to create an email address on my domain name. I have to enter the email address, but the domaine part should be fixed and forced.
Historically, when doing this using AlternC, you find this form : a text area followed by @yourdomain.net, showing the right side already filled.
Graphically, it looks like a classical form field as follow :
A hype text field
Some days ago, trying to find a usable way of showing this, I had the following idea (I say I had this idea since I never saw this elsewhere) : we can use CSS styles to show something more obvious for human being. So I ended up with this:
There is many differences between those 2 forms, but the one we are interested in is the field where you can enter your email address.
In the second case, we understand that we will fill a text field that will be an email address. The cursor is align to the right, and right before the domain name and @ sign.
This idea is simple, and I invite my fellow developers to use this kind of trick without any limitation : as long as it make a form more usable for your end user (ask him if you have any doubt ;) ).
Technically, it’s simple:
<input type="text" name="addresse" id="adrtxt" class="int" /><span class="int" id="adrlbl">@mondomaine.net</span>
border: 1px dotted black;
font-family: Verdana, Arial, Helvetica, sans-serif;
Finally, more tricks & tips I just remember :
list the words and terms you are using for each part of your software. For example, we are using "email address", and not "email", "mail", or "mail account". Build a glossary your developers will have to follow.
use radio button instead of dropdown lists if you want, unless the number of items may grow large (an example is shown below) :
Leave some space inside your forms : the human eye need some kind of freedom to see things. For example, in the 2 forms below, you will see that there is more space between elements in the second form, but the border is also less visible, we are using a light gray: the eye can freely navigate inside this form.
And finally, if I remember other ideas regarding website or forms usability, I will post them here ;)
Welcome on Benjamin Sonntag's blog, web entrepreneur, Linux expert and free-software-savvy half-geek.
Here you will find geek tuff, tricks and tips and friendly ads, personal histories and a bunch of politics ...
On the same topic ...
In the Octopuce boat ...
- 15 February 2016 – Accélérer votre réponse SSL/TLS avec l’OCSP Stapling
- 9 February 2016 – Débugger PHP en CLI avec Xdebug & Vim
- 14 September 2015 – Analyser une attaque avec les logs d’Apache2
- 30 April 2015 – Conditions générales de vente
- 7 April 2015 – Testing Augeas lenses with augparse on Debian GNU/Linux
La Quadrature du Net
- 22 March – Le rapport « del Castillo » sur le code européen des télécoms, de mal en pis
- 16 March – Lettre ouverte aux législateurs européens sur les réseaux Internet communautaires
- 6 March – Filtrage automatisé des plateformes : La Quadrature envoie ses arguments aux eurodéputés
- 6 March – ePrivacy arrive au Parlement européen : La Quadrature publie son analyse
- 3 March – Lettre ouverte internationale des ONG demandant la suspension du Privacy Shield
Old stuff ...
- 8 août 2014 – Google favorisant https: pourquoi c’est une excellente nouvelle
- 22 février 2014 – Compilation d’un paquet debian à partir des sources
- 5 décembre 2015 – Comment verrouiller Tails avec un mot de passe
- 5 December 2015 – How to lock a running tails with a password
- 21 janvier 2014 – Flying Robots / Buy a shotgun