Sélect HTML et saisie de texte

Question

Nous avons tous vu d'innombrables instances de formulaires avec un menu déroulant de sélection ayant l'une de ses options comme "Autre" et en choisissant cette option, nous arrivons à voir une boîte de texte de saisie (qui était cachée tout le long) nous demandant de taper dans notre entrée.

Y a-t-il une meilleure façon de l'implémenter? Y a-t-il des plugins qui me permettront de faire mieux? Ou est-ce que les éléments HTML standard suffisent (certains paramètres peuvent être définis pour une balise select)?

Answer 1

Une zone de liste modifiable peut être une bonne alternative. Le défi consiste à le styliser de manière à ce qu'il soit clair pour l'utilisateur qu'il peut réellement modifier le contenu du contrôle, plutôt que de sélectionner uniquement le contenu par défaut fourni.

Answer 2

C'est une façon assez courante de concevoir un formulaire à la fois sur papier et sur le Web. Je ne suis pas tout à fait sûr de ce que vous entendez par une meilleure façon de le faire ...

Si le champ caché n'apparaît pas si l'utilisateur a javascript désactivé, je vous suggère de masquer le champ à l'aide javascript ou un double « Si d'autres s'il vous plaît spécifier » zone de texte dans un bloc noscript:

<select><!-- implemented something like rahul showed --> 
<noscript> 
    <label for="ifOtherInput">If other please specify</label> 
    <input type="text" name="ifOtherInput" id="ifOtherInput"> 
</noscript> 
<!-- This is initially hidden and shown by when the user selects the other option --> 
<div id="divOther" class="dispnone"> 
    <!-- Here we know the user selected other so we can just have this label: --> 
    <label for="ifOtherInputJs">Please specify</label> 
    <input type="text" name="ifOtherInputJs" id="ifOtherInputJs"> 
</div> 

le back-end doit gérer que l'entrée dans le bloc noscript peut manquer. Ou vous pouvez ajouter la version javascript de l'entrée à la page de l'entrée en utilisant javascript (si les deux ne peuvent éventuellement apparaître simultaniously afin qu'ils puissent avoir le même nom

Answer 3

Vous pouvez utiliser datalist Exemple:..

<input list="cookies" placeholder="Type of Cookie"/> 

<datalist id="cookies"> 
    <option value="Chocolate Chip"/> 
    <option value="Peanut Butter"/> 
    <option value="Raisin Oatmeal"/> 
</datalist> 

Fiddle. http://jsfiddle.net/joshpauljohnson/Uv5Wk/

Cela donne à l'utilisateur la possibilité de choisir parmi une liste de cookies et, si le type de cookie qu'ils cherchent ne se trouve pas dans la liste, entrer dans leur propre

Mon seul b Eef avec elle dans votre situation est que cela peut ne pas être immédiatement évident pour l'utilisateur, ils peuvent l'utiliser comme une liste déroulante. Mais cela pourrait facilement être corrigé avec un peu de css.