<html lang="fr-fr" dir="ltr"><head></head><body>### [Comment créer un champ de saisie semi-automatique dans votre formulaire](https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/)

**Publié :** 20 juin 2023
**Auteur :** Équipe éditoriale

**Extrait :** Ce tutoriel vous montrera comment transformer un champ de texte simple en champ de saisie semi-automatique à l'aide de JavaScript et de CSS. 

**Contenu :**

Souhaitez-vous créer un champ de saisie semi-automatique dans votre formulaire ? La fonctionnalité de saisie semi-automatique peut considérablement améliorer l'expérience utilisateur en fournissant des suggestions pendant que les utilisateurs tapent, en leur faisant gagner du temps et en garantissant la cohérence des données. Dans cet article, nous vous montrerons comment utiliser JavaScript pour implémenter la saisie semi-automatique pour un champ de saisie de texte avec une liste de réponses pré-approuvées.

## Création du formulaire

Nous commencerons par créer un nouveau formulaire et ajouter nos champs, qui comprendront au moins un champ de formulaire **Texte sur une seule ligne**. Si vous avez besoin d'aide pour créer votre formulaire, [veuillez consulter ce guide utile](https://wpforms.com/docs/creating-first-form/ "Création de votre premier formulaire").

![créez votre formulaire et ajoutez vos champs](https://wpforms.com/wp-content/uploads/2023/06/wpforms-autocomplete-create-form.jpg)

## Création d'un champ de saisie semi-automatique

Il est maintenant temps d'ajouter cet extrait à votre site. Si vous avez besoin d'aide pour savoir où et comment ajouter un extrait personnalisé à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms").

```

/**
 * Transformer n'importe quel champ de texte simple en champ de saisie semi-automatique
 *
 * @link https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/
 */
  
function wpf_dev_text_autocomplete( ) {
?&gt;

**Catégories :** Champs

**Tags :** CSS, Javascript, JS

---</body></html>