Formulaire Html (développement sans tableau mais avec des imput/label/div)

Messages postés
4
Date d'inscription
jeudi 10 octobre 2019
Statut
Membre
Dernière intervention
15 octobre 2019
-
Bonjour,
Je n'arrive pas à faire un formulaire html comme celui-ci. Je dois faire ça pour un petit gite de campagne et je n'y pas. Je fais du html vraiment simple et je voudrais vraiment que ça ressemble à cette exemple.
Quelqu'un pourrait m'aider ?


Merci d'avance pour votre aide.
Cordialement

Lutix
Configuration: Macintosh / Safari 13.0.2
Afficher la suite 

3 réponses

Messages postés
26506
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 octobre 2019
1828
0
Merci
Bonjour
Tu dis ne pas y arriver... mais qu'as tu essayé ?
Montrre nous ton code si tu veux qu'on t'aide à le corriger.
lx0459
Messages postés
4
Date d'inscription
jeudi 10 octobre 2019
Statut
Membre
Dernière intervention
15 octobre 2019
-
Voici le code
<head>
    <title>Rservation Hôtel</title>
    <meta charset="utf-8">
    <meta name="viewport"content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="style/[/css/cssclass.php3 css].css">
    <link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Hôtel Test</h1>
    </header>
    
    <section>
        <div class="photo">
            <img src="style/img/logort.png" alt="Ma photo de profil">
        </div>
        <div class="formulaire">
            <h2>Reservation</h2>
            <h1></h1>
        <div class="contact">
    <form>
        <div id="formulaire">
            <label>Nom</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="text" name="nom" id="lastname" required>
            </div>
        </div>

        <div id="formulaire">
            <label>Prénom</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="text" name="prenom" id="prenom" required>
            </div>
        </div>

        <div id="formulaire">
            <label>m@il</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="" name="email" id="email" required>
            </div>
        </div>

        <div id="formulaire">
            <label">Confirmer le m@il</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="email" name="email1" id="email1" required>
            </div>
        </div>

        <div id="formulaire">
            <label>Téléphone</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="text" name="telephone" id="telephone" placeholder="Format: 00.00.00.00.00" pattern="[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}" required>
            </div>
        </div>

        <div id="formulaire"><label>Date d'arrivée</label>
        </div>
        <div id="reponse">
            <div id="input">
            <input type="date" name="datea" id="datea" required>
        </div>
    </div>

        <div id="formulaire">
            <label>Date de départ</label>
        </div>
        <div id="reponse">
            <div id="input">
            <input type="date" name="dated" id="dated" required>
            </div>
        </div>

        <div id="formulaire">
            <label>Nombre de nuits</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="number" min="0" name="nuits" id="nuits">
            </div>
        </div>
        
        <div id="formulaire">
            <label>Type de chambre</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="text" name="chambre" id="chambre">
            </div>
        </div>

        <div id="formulaire">
            <label>Nombre de personnes</label>
        </div>
        <div id="reponse">
            <div id="nbrpers">
                <input type="radio" name="nbr1">1
                <input type="radio" name="nbr2">2
                <input type="radio" name="nbr3">3
                <input type="radio" name="nbr4">4
            </div>
        </div>

        <div id="formulaire">
            <label>Nombre de petits déjeuners</label>
        </div>
        <div id="reponse">
            <div id="input">
                <input type="number" min="0" name="ptit_dej" id="ptit_dej">
            </div>
        </div>

        <div id="formulaire_option">
            <label id="pff">Options</label>
        </div>
        <div id="option">
            <div id="reponse_option">
            <input type="checkbox" name="1" value>TV<br>
            <input type="checkbox" name="2" value>Minibar<br>
            <input type="checkbox" name="3" value>Balcon vue mer<br>
            <input type="checkbox" name="4" value>Place de parking<br>
            </div>
        </div>

        <div id="formulaire">
            <label>
                <input type="reset" name="reset" id="reset"></label>
            </div>
            <div id="reponse">
                <div id="input">
                    <input type="submit" name="submit" id="submit">
                </div>
            </div>
    </form>
    </section>
   
    <footer>
    <p><a href="cv.html">footer</a></p>
    </footer>
</body>



et le css

html
{ }

*{
    font-family: 'Varela Round', sans-serif;
    padding: 0px;
    margin: 0px;
    text-align: justify;
    box-sizing: border-box;

}
body{
    background: #edfbfc;
}
p{
    font-size: 12pt;
    line-height: 18pt;
}
a{
    text-decoration: none;
    color: #000;
}

header, footer{
    width: 100%;
    padding: 20px 0px;
    background: url("img/fond.jpg") #4f4f4f;
    box-shadow: 0px 0px 15px #333;
}
header{
    border-bottom: 2px solid #fff;
    height: 120px;
}
header h1{
    text-align: center;
    color: white;
    font-size: 1.5em;
    width: 90%;
    margin: 0 auto;
}

section{
    display: flex; 
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    padding-bottom: 20px;
    margin: 20px auto;
    background-color: #fff;
}
input{
 text-align: center;
}

label{
 margin: 0%;
 padding-top: 5px;
 padding-bottom: 3px;
 padding-right: 2px;

}

form {
 text-align: center;
 width: 60%;
 margin-left: 20%;
 margin-right: 20%; 
 padding-right: 1%;
 padding-left: 1%;
 padding-top: 1%;
 padding-bottom: 1%;
 box-shadow: 0px 0px 5px #333;
 height: 515px;
 background-color: #edfbfc;
}

section h2{
    margin: 20px 0;
    width: 90%;
}
section > div{
    width: 90%;
}

footer{
    border-top: 2px solid #fff;
}
footer a,p{
    width: 100%;
    margin: 0 auto;
    color: white;
    text-align: center;
    color: white;
}
#formulaire{
 width: 49%;
 height: 30px;
 margin-top: 2px;
 margin-bottom: 2px;
 border: 1px solid #000000;
 float: left;
    text-align: center;
}
#reponse{
 width: 49%;
 height: 30px;
 border: 1px solid #000000;
 float: right;
 margin-top: 2px;
 margin-bottom: 2px;
}

#input{
 text-align: center;
 width: 100%;
    padding: 1%;
}
#nbrpers{
    text-align: center;
    width: 100%;
    padding: 1%;
}

#option{
    text-align: center;
    width: 100%;
    padding: 1%;
}
#reponse_option{
    width: 49%;
    height: 90px;
    padding: 1%;
    border: 1px solid #000000;
    float: right;
    margin-top: 2px;
    margin-bottom: 2px;
}
#formulaire_option{
    width: 49%;
    height: 90px;
    margin-top: 2px;
    margin-bottom: 2px;
    border: 1px solid #000000;
    float: left;
    text-align: center;
    padding: 1%;
}

.photo{
    text-align: center;
}
.photo img{
    width: 75px;
    height: 75px;
    border: 3px solid #fff;
    box-shadow: 0px 0px 10px #777;
    border-radius: 50%;
    margin-top: -80px;
}
/*VERSION BUREAU DU CV*/
@media screen and (min-width: 980px){
    section{
        width: 80%;
        box-shadow: 0px 0px 10px #bbb;
    }
    a:hover{
        color: #09ceff;
    }
    header h1{
        width: 80%;
    }
lx0459
Messages postés
4
Date d'inscription
jeudi 10 octobre 2019
Statut
Membre
Dernière intervention
15 octobre 2019
-
Et en faite ce sur quoi je bloque et le faite que le site soit responsive. Je n'arrive pas a ce qu'il s'adapte sur smartphone. Je ne vois pas quoi faire, j'ai essayé des flex, et tout autre chose. mais rien ne fonctionne
Encore merci de votre aide
Commenter la réponse de jordane45
0
Merci
voilà :) parce que HTML c'est toujours simple. C'est de le faire bien qui est plus compliqué.
Pour l'apparence/mise en page je vous conseille de vous tourner vers le CSS. Vu l'exemple que vous donnez il n'y a pas grand chose à faire et vous trouverez facilement à mettre un contour en décoration ou autre positionnement.
Voici un exemple de formulaire qui peut vous aider, mais il en existe pléthore sur le web:
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML

par contre pour le traitement si traitement il y a ce ne sera pas du HTML.
lx0459
Messages postés
4
Date d'inscription
jeudi 10 octobre 2019
Statut
Membre
Dernière intervention
15 octobre 2019
-
Bonsoir,
Merci de votre réponse. j'ai pas mal avancé et maintenant je suis à l'étape du responsive ! et je bloque !
Commenter la réponse de Nathcha
0
Merci
Merci beaucoup pour vos réponses
Commenter la réponse de Lx0459