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

Signaler
Messages postés
4
Date d'inscription
jeudi 10 octobre 2019
Statut
Membre
Dernière intervention
15 octobre 2019
-
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

3 réponses

Messages postés
29741
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
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.
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%;
    }
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
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.
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 !
Merci beaucoup pour vos réponses