JavaScript, formulaire

Aller à la navigation Aller à la recherche
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formulaire test</title>
    <style>
        header, h2 {background-color: grey; color:white; margin:0.1em; padding: 0.1em;}
        header {font-family: arial; text-align: center; font-size: 200%;}
        form {width: 50em;}
        textarea {width:56em;}
        p {margin:0.5em; padding:0;}
        footer {background-color: grey; color:white; margin:0.1em; padding: 0.1em;}
    </style>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- chargement de jQuery -->
    <script type="text/javascript" src="jquery.zclip.min.js"></script> <!-- chargement de jQuery,  -->
    <script type="text/javascript" src="jquery-ui.min.js"></script> <!-- chargement de jQuery,  -->
    <script type="text/javascript">
        $( function() {
            $( "#texte").click( // création d'un texte d'exemple
                function() {
                    $( "#message").val( "Ceci est un texte d'essai, avec des lettre accentuée (aeiou, àéèîïôöùû)" );
                }
            );

            $( "#encoder" ).click( // encodage du texte
                function() {
                    var TexteEncode = encodeURIComponent( $( "#message" ).val() );
                    $( "#message" ).val( TexteEncode );
                }
            );

            $( "#decoder" ).click( // décodage du texte
                function() {
                    var TexteDecode = decodeURIComponent( $( "#message" ).val() );
                    $( "#message" ).val( TexteDecode );
                }
            );

            $( "#supprimer").click(
                function() { // mise à blanc de la zone de texte
                    $( "#message").val( "" );
                }
            );
        }
        );
    </script>
</head>
    <body>
        <header>Test de formulaire, avec JavaScript</header>
        <h2>Formulaire de saisie</h2>
        <form>
        	<fieldset>

                <input type="text" name="date" id="date">
                <p>Votre saisie</p>
	        	<textarea name="message" id="message" rows="10"></textarea>
                
			</fieldset>

            <fieldset>
            	<input type="button" id="texte" value="Texte modèle">
                <input type="button" id="encoder" value="Encoder">
            	<input type="button" id="decoder" value="Décoder">
				<input type="button" id="copy" value="Copier"> <!-- la fonction copy est définie par jquery.zclip.min.js -->
                <input type="button" id="supprimer" value="Supprimer">
            </fieldset>
        </form>
        <footer>
            <p>Ceci est le pied de page</p>
        </footer>
        
        <script type="text/javascript">
            console.log( "étape numéro 1" );
            $( "#date" ).datepicker();
            $( "footer" ).hide( 3000 ).delay( 500 ).show( 3000 );
        </script>
</body>
</html>