formulaires web réutilisables et élégants

Question

Je cherche des exemples de formulaires Web élégants qui peuvent être utilisés sur n'importe quel site. J'ai cherché des «formes Web élégantes», mais la plupart des exemples que je trouve sont des formes très ornées qui utilisent beaucoup d'images, qui sont peu susceptibles de bien paraître sur d'autres sites qui utilisent des couleurs différentes. J'ai également trouvé de nombreux exemples d'utilisation de CSS pour mettre en forme des formulaires, mais ils n'appliquent généralement aucun style aux formulaires pour les rendre beaux.

Ce que je suis à la recherche de quelque chose entre:

• correctement aménagé, par exemple étiquettes et entrées alignées (je n'ai pas d'opinion sur l'ensemble du débat "étiquette en haut ou à côté")
• Bien conçu, mais sans utiliser d'images, les couleurs peuvent être facilement modifiées
• Balisage valablement valide, p. aucune table ou JavaScript, bien que je ne suis pas intégriste à ce sujet (quelques divs supplémentaire est OK)

Une réponse qui pointe vers un seul exemple est beaucoup plus utile que « voici une page avec un million exemple formulaires, dont la plupart ne répondent pas à vos exigences ".

Je réalise que je suis très exigeant ici, donc excuses et merci!

Answer 1

Voir Prettier Accessible Forms.

Toutefois, comme indiqué dans Styling form controls with CSS, revisited, vous allez avoir beaucoup de variation dans l'apparence entre les navigateurs et les systèmes d'exploitation.

Ces articles vous montreront comment de construire des formes visuellement agréable, au lieu de vous donner un catalogue d'un tas de modèles prêts à l'emploi.

Answer 2

http://www.rockettheme.com/ a quelques très bons modèles et thèmes. Ils sont généralement pour les systèmes CMS existants, mais vous pouvez les adapter ou des parties d'eux pour vos propres sites.

Answer 3

Voici quelques bons sites, avec des exemples explicites et l'utilisation.

1. http://designshack.co.uk/articles/10-css-form-examples
2. http://www.smashingmagazine.com/.../
3. http://jeffhowden.com/code/css/forms/
4. http://24ways.org/2006/showing-good-form

Il y a des milliards d'autres en ligne, des tutoriels, des exemples téléchargeables, les feuilles de style. Pour obtenir votre solution idéale vous devrez peut-être les écraser ensemble.

Answer 4

Je ne suis pas sûr que ce soit aussi complet que ce que vous demandez, mais j'aime aller avec quelque chose de simple comme ceci:

<fieldset> 
    <legend>New customer? Provide the following</legend> 

    <label for="FirstName">First Name:</label> 
    <input type="text" ID="FirstName" name="FirstName" /> 

    <label for="LastName">Last Name:</label> 
    <input type="text" ID="LastName" name="LastName" /> 

    <label for="Address">Address:</label> 
    <input type="text" ID="Address" name="Address" /> 

    <label for="City">City:</label> 
    <input type="text" ID="City" name="City" /> 

    <label for="State">State:</label> 
    <input type="text" ID="State" name="State" /> 

    <label for="Zip">Zip:</label> 
    <input type="text" ID="Zip" name="Zip" /> 

    <input type="submit" Text="Submit Order" /> 
</fieldset> 

L'utilisation de CSS comme ceci:

fieldset { 
    overflow: hidden; 
} 

label { 
    clear: both; 
    float: left; 
    margin-top: 10px; 
    width: 125px; 
    /* If you want the labels flush along the right edge */ 
    padding-right: 5px; 
    text-align: right; 
} 

input { 
    float: left; 
    margin-top: 10px; 
} 

/* Align the submit button under the fields */ 
input[type=submit] { 
    clear: both; 
    float: left; 
    margin-left: 135px; 
    margin-top: 10px; 
} 

Cela produit la disposition montrée dans l'image au début in this (completely unrelated) post.Il y a un téléchargement de source avec le balisage et CSS aussi, si cela ne vous dérange pas ASP.NET. Parlant de réutiliser, j'ai trouvé que la structure de base soit assez flexible pour utiliser n'importe où. Par exemple, nous avons utilisé essentiellement le même balisage et CSS pour ce formulaire de contact plus personnalisé: http://www.thirtyfiveatlanta.com/meet/

Answer 5

Je aime vraiment les formes de Wufoo: http://wufoo.com/examples/ Je l'ai copié et utilisé leur code HTML et CSS pour mes propres projets avec de bons résultats.

Answer 6

Uni-Form

Cette réponse a été affiché comme commentaire par Darmen, mais je pense qu'il est suffisamment utile qu'il mérite d'être promu à une réponse