[HTML] Formulaire et photo avec webcam

Bonjour à vous. J'anticipe déjà en vous souhaitant un joyeux...

Je suis débutant dans le développement Web et je voudrai associer à mon formulaire html une zone où il sera possible d'y associer une photo ( format demi carte photo) quand une personne viendra renseigner ses informations..

Merci!

Bonjour,

Une ligne de code en HTML:

<input type="file" id="photo" name="image" onchange="getverifiles(this)">

Et un script Javascript:

<script>
  function getverifile(id){
    let type = id.files[0].types;
    let types = ['jpg','png','jpeg','svg'];
    if(types.includes(type)){
       //Envoi du formulaire par AJAX
    }
  }
</script>

Bonne Journée

bonjour a tous! encore désolé de l'extreme retard par rapport à mon premier post.

je suis perdu quant à l'envoie du formulaire par ajax.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="formulaire_style.css">
    <title>Leçon formulaire</title>
    <form action="dbname2.php " method="POST">
        <div class="c100">
              <label for="nom">nom:</label>
              <input type="text" id="nom" name="nom" placeholder="nom a saisir">
        </div>
        <div class="c100">
              <label for="prenom">prenom:</label>
              <input type="text" id="prenom" name="prenom" placeholder="prenom a inserer">
        </div>
        <div class="c100">
              <label for="mail">mail:</label>
              <input type="mail" id="mail" name="mail">
        </div>
        <div class="c100">
              <label for="nom">Age:</label>
              <input type="number" id="age" name="age" min="5" max="100">
        </div>
        <div class="c100">
            <label for="pays">Pays de residence:</label>
            <select id="pays" name="pays">
                <optgroup label="Europe">
                    <option value="france">France</option>
                    <option value="belgique">Belgique</option>
                    <option value="italie">Italie</option>
                </optgroup>
                <optgroup label="Afrique">
                    <option value="algerie">Agerie</option>
                    <option value="tunisie">Tunisie</option>
                    <option value="maroc">Maroc</option>
                    <option value="cameroon">Cameroon</option>
                    <option value="gabon">Gabon</option>
                </optgroup>
            </select>
        </div>
        <div>
            <input type="file" id2="photo" name="image" onchange="getverifiles(this)"  >
        </div>
        <div class="c100" id="submit">
            <input type="submit" name="Envoyer">
        </div>
    </form>
<script type="">
    function getverifile(id2){
        let type = id2.files[0].types;
        let types = ['jpg','png','jpeg','svg'];
            if(types.includes(types)){

            }
    }
</script>
</body>
</html>

merci!

bonjour a tous! encore désolé de l'extreme retard par rapport à mon premier post.

je suis perdu quant à l'envoie du formulaire par ajax.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="formulaire_style.css">
    <title>Leçon formulaire</title>
    <form action="dbname2.php " method="POST">
        <div class="c100">
              <label for="nom">nom:</label>
              <input type="text" id="nom" name="nom" placeholder="nom a saisir">
        </div>
        <div class="c100">
              <label for="prenom">prenom:</label>
              <input type="text" id="prenom" name="prenom" placeholder="prenom a inserer">
        </div>
        <div class="c100">
              <label for="mail">mail:</label>
              <input type="mail" id="mail" name="mail">
        </div>
        <div class="c100">
              <label for="nom">Age:</label>
              <input type="number" id="age" name="age" min="5" max="100">
        </div>
        <div class="c100">
            <label for="pays">Pays de residence:</label>
            <select id="pays" name="pays">
                <optgroup label="Europe">
                    <option value="france">France</option>
                    <option value="belgique">Belgique</option>
                    <option value="italie">Italie</option>
                </optgroup>
                <optgroup label="Afrique">
                    <option value="algerie">Agerie</option>
                    <option value="tunisie">Tunisie</option>
                    <option value="maroc">Maroc</option>
                    <option value="cameroon">Cameroon</option>
                    <option value="gabon">Gabon</option>
                </optgroup>
            </select>
        </div>
        <div>
            <input type="file" id2="photo" name="image" onchange="getverifiles(this)"  >
        </div>
        <div class="c100" id="submit">
            <input type="submit" name="Envoyer">
        </div>
    </form>
<script type="">
    function getverifile(id2){
        let type = id2.files[0].types;
        let types = ['jpg','png','jpeg','svg'];
            if(types.includes(types)){

            }
    }
</script>
</body>
</html>

merci!

Bonjour,

L'envoi de ton formulaire par AJAX ou il est en PHP. A toi de voir selon ton serveur.

Je te renvoie ton code avec une erreur d'écriture de ma part.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="formulaire_style.css">
    <title>Leçon formulaire</title>
    <form action="dbname2.php " method="POST">
        <div class="c100">
              <label for="nom">nom:</label>
              <input type="text" id="nom" name="nom" placeholder="nom a saisir">
        </div>
        <div class="c100">
              <label for="prenom">prenom:</label>
              <input type="text" id="prenom" name="prenom" placeholder="prenom a inserer">
        </div>
        <div class="c100">
              <label for="mail">mail:</label>
              <input type="mail" id="mail" name="mail">
        </div>
        <div class="c100">
              <label for="nom">Age:</label>
              <input type="number" id="age" name="age" min="5" max="100">
        </div>
        <div class="c100">
            <label for="pays">Pays de residence:</label>
            <select id="pays" name="pays">
                <optgroup label="Europe">
                    <option value="france">France</option>
                    <option value="belgique">Belgique</option>
                    <option value="italie">Italie</option>
                </optgroup>
                <optgroup label="Afrique">
                    <option value="algerie">Agerie</option>
                    <option value="tunisie">Tunisie</option>
                    <option value="maroc">Maroc</option>
                    <option value="cameroon">Cameroon</option>
                    <option value="gabon">Gabon</option>
                </optgroup>
            </select>
        </div>
        <div>
            <input type="file" id2="photo" name="image" onchange="getverifile(this)"  >
        </div>
        <div class="c100" id="submit">
            <input type="submit" name="Envoyer">
        </div>
    </form>
<script type="">
    function getverifile(id){
        let type = id.files[0].types;
        let types = ['jpg','png','jpeg','svg'];
            if(types.includes(type)){

            }
    }
</script>
</body>
</html>

Bonne Journée

Rechercher des sujets similaires à "html formulaire photo webcam"