125 votes

Formulaire de sélection HTML avec option pour saisir une valeur personnalisée

J'aimerais avoir un champ de saisie dans lequel les utilisateurs peuvent saisir une valeur de texte personnalisée ou choisir dans la liste déroulante. Un <select> régulier n'offre que des options déroulantes.

Comment puis-je faire en sorte qu'un <select> accepte une valeur personnalisée ? Par exemple : Ford ?

 <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

27voto

mickmackusa Points 18931

Le dernier JSFiddle d'Alen Saqe n'a pas basculé pour moi sur Firefox, j'ai donc pensé fournir une solution de contournement html/javascript simple qui fonctionnera bien dans les formulaires (en ce qui concerne la soumission) jusqu'au jour où la balise datalist est acceptée par tous les navigateurs/appareils. Pour plus de détails et le voir en action, rendez-vous sur : http://jsfiddle.net/6nq7w/4/ Remarque : ne laissez aucun espace entre les frères et sœurs basculants !

 <!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

10voto

Sam Points 923

Vous ne pouvez pas vraiment. Vous devrez avoir à la fois le menu déroulant et la zone de texte, et leur demander de choisir ou de remplir le formulaire. Sans javascript, vous pouvez créer un ensemble de boutons radio distinct où ils choisissent la liste déroulante ou la saisie de texte, mais cela me semble désordonné. Avec certains javascript, vous pouvez désactiver l'un ou l'autre en fonction de celui qu'ils choisissent, par exemple, avoir une option "autre" dans la liste déroulante qui déclenche le champ de texte.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X