Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <title>Les formulaires</title>
        <meta charset="utf-8">
            
        <style>
            label{display: inline-block;min-width: 200px;}
        </style>
    </head>
    
    <body>
        <h1>Les formulaires HTML</h1>
        
        <form method="post" action="traitement.php">
​
            <label for='prenom'>Entrez votre prénom svp : </label>
            <input type='text' name='prenom' id='prenom' maxlength='20' required>
            <span id='missPrenom'></span><br>
            
            <label for='mail'>Entrez votre mail : </label>
            <input type='email' name='mail' id='mail' required><br>
            
            <label for='tel'>Numéro de téléphone :</label>
            <input type='tel' name='tel' id='tel' required><br>
                
            <input type='submit' value='Valider' id='bouton_envoi'>
        </form>
        
        <script>
            var formValid = document.getElementById('bouton_envoi');
            var prenom = document.getElementById('prenom');
            var missPrenom = document.getElementById('missPrenom');
            
            formValid.addEventListener('click', validation);
            
            function validation(event){
                //Si le champ est vide
                if (prenom.validity.valueMissing){
                    event.preventDefault();
                    missPrenom.textContent = 'Prénom manquant';
                    missPrenom.style.color = 'red';
                }
            }
        </script>
    </body>
</html>
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
PierreGiraudpro
0viewers