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

lx0459 Messages postés 4 Statut Membre -  
lx0459 Messages postés 4 Statut Membre -
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

3 réponses

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    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.
    0
    1. lx0459 Messages postés 4 Statut Membre
       
      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%;
    }
      0
    2. lx0459 Messages postés 4 Statut Membre
       
      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
      0
  2. Nathcha
     
    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.
    0
    1. lx0459 Messages postés 4 Statut Membre
       
      Bonsoir,
      Merci de votre réponse. j'ai pas mal avancé et maintenant je suis à l'étape du responsive ! et je bloque !
      0
  3. Lx0459
     
    Merci beaucoup pour vos réponses
    0