Changer l’apparence d’un formulaire en version mobile

Petite astuce bien connue et évidente pour certains, beaucoup moins pour d’autres :

Ici on va voir comment changer l’apparence d’un formulaire lorsqu’on passe en version mobile:On pourrait voir la chose en développeur et chercher un moyen d’appliquer une condition pour savoir si on est sur mobile ou ordi, ou alors on peut faire simple, coder deux formulaires l’un en dessous de l’autre dans la meme page html ou php, chacun des deux formulaires aurait un id:  ensuite il ne reste plus qu’a mettre l’un ou l’autre des formulaires en display none sur ordi, puis en display block sur mobile, et inversement pour le deuxième formulaire: Un exemple plus parlant:

 <form method="post" action="callback.php"  id="call">
            <ul id="firstform">
                <li>
                    <label></label>
                    <input type="tel" required placeholder="Votre numéro de téléphone :" name="telephone" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$">
                </li>
                <li>                        
                    <label></label>
                    <input type="time"  name="entre" placeholder="entre"  value="00:00"/>
                    <label></label>
                    <input type="time" name="et" placeholder="et" value="00:00"/>
                    <button type="submit">Ok</button>
                </li>
            </ul>
            
            <ul id="secondform">
                <li>
                    <label>Votre numéro de téléphone :</label>
                    <input required="required" name="telephone"/>
                </li>
                <li>                        
                    <label>Entre</label>
                    <input type="text" name="entre" value="00:00"/>
                    <label>et</label>
                    <input type="text" name="et" value="00:00"/>
                    <button type="submit">Ok</button>
                </li>
            </ul>
                    </form>

J’ai ici un formulaire, à l’intérieur duquel je place mes deux versions: un ul id= »firstform » et un second avec un un id= »secondform ».
Dans mon css, à l’intérieur d’un mediaquery adapté :

#secondform{display:none}
#firstform{display:block}

et hors des media queries, on cache l’un des formulaires:

#firstform{display:none}

En version desktop:

desktopform

puis en mobile :

mobile

I

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.