JavaScript, formulaire
Révision datée du 30 août 2021 à 22:00 par Fylip22 (discussion | contributions)
<!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>