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:

puis en mobile :

06/06/2015 Mis à jour le 20/07/2015 Par Copier coller | Dans CSS