« JavaScript, formulaire » : différence entre les versions
Aller à la navigation
Aller à la recherche
(Page créée avec « <pre> <!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... ») |
mAucun résumé des modifications |
||
| Ligne 82 : | Ligne 82 : | ||
</html> | </html> | ||
</pre> | </pre> | ||
[[Catégorie:Programmation]] | |||
Version du 20 janvier 2019 à 15:29
<!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>