Insertion->Définir un formulaire : ...
Cliquer à l'intérieur de la forme créée
On va créer un tableau de 9 lignes et 2 colonnes dans lequel vont s'insérer les différents éléments du formulaire
Tableau->Inserer->Tableau : 9 lignes, 2 colonnes
On va modifier l'attribut colspan de certaines lignes pour qu'elles ne montrent qu'une colonne. (T(i,j) désigne la case en colonne j de la ligne i).
Cliquer dans T(1,1); Bouton droit->Propriétés Cellule ...; Cliquer sur le bouton "Edition avancée"; Ajouter l'attribut colspan (choisi dans liste "Attribut:"); mettre "Valeur" à 2
La première ligne occupe désormais 2 colonnes, l'ancienne deuxième colonne s'est déplacée sur la droite. On va la supprimer.
Cliquer dans T(1,2); Bouton droit->Suppression dans le tableau->Cellule
Réitérer ces opérations pour les lignes 6, 7 et 9.
Voir le source généré (cliquer sur onglet "Source" en bas de page). Les <tr> sont verbeux! En prévision de l'utilisation future d'une feuille de style CSS, on va les réduire à leur plus simple expression:
Cliquer dans T(1,1); Remplacer (Ctrl-F) tous les '<td align="undefined" valign="undefined">' par '<td>'
Insérons les différents champs du formulaire dans les cases du tableau.
Cliquer dans T(5,1); taper
"Résumé:" directement dans la cellule.
Cliquer dans T(5,2);
Insertion->Formulaire->Champs de formulaire...
Sélectionner "Texte" dans "Type de champ", saisir "oneLiner" pour "Nom du champ"; Cliquer sur "OK"
Répéter l'opération pour l'entrée de texte à droite de la liste de sélection dans T(2,2) (la nommer "applicationOther").
Cliquer dans T(2,1); taper
"Application:" directement dans la cellule.
Cliquer dans T(2,2);
Insertion->Formulaire->Liste de sélection
Saisir "application" pour "Nom de la liste"; Rajouter 2 "options" dans la liste (par le bouton "Ajouter une option"). Une de ces options aura pour "Texte" "--Autres--" et on positionnera sa "Valeur" à "-1"
Répéter l'opération pour la liste Priorité dans T(3,2) (la nommer "priority").
Cliquer dans T(4,2);
Insertion->Formulaire->Champs de formulaire...
Sélectionner
"Bouton radio" dans
"Type de champ", saisir "type" pour "Nom du groupe" et "anomalie" pour
"Valeur de champ"; Cocher la boite
"Sélectionné
initialement"; Cliquer sur "OK"
Saisir "Anomalie" à droite du bouton
créé
Insertion->Formulaire->Champs de formulaire...
Sélectionner
"Bouton radio" dans
"Type de champ", saisir "type" pour "Nom du groupe" et "evolution" pour
"Valeur de champ"; Cliquer sur "OK"
Saisir "Demande d'évolution" à droite du bouton
créé
Voir le source généré.
Cliquer dans T(7,1);
Insertion->Formulaire->Zone de texte...
Saisir "contents" pour "Nom du champ"; déclarer 14 lignes et 60 colonnes; Cliquer sur "OK"
La taille de la forme s'ajuste à la taille de son plus grand élément..
Cliquer dans T(9,1);
Insertion->Formulaire->Champs de formulaire
Sélectionner "Bouton de validation" dans "Type de champ", saisir "Envoyer" pour "Valeur de champ"; Cliquer sur "OK"
La saisie du champ "Résumé" est obligatoire. L'envoi du formulaire doit être bloqué tant que ce champ reste vide.
On va donc associer dans le formulaire une fonction JavaScript à l'évenement "onSubmit" (cet évenement est reçu par le formulaire lorsque l'utilisateur "soumet" le formulaire en cliquant sur le bouton "Envoyer").
Cliquer dans le formulaire
(mais à l'extérieur du tableau qu'il contient);
Bouton droit->Propriétés
Formulaire
...; Cliquer sur le bouton "Edition avancée";
Cliquer sur l'onglet "Evenements JavaScript"; Ajouter l'attribut
onsubmit (choisi
dans liste "Attribut:"); saisir "return checkForm();" dans le champ
"Valeur".
Le champ "Résumé" a pour identificateur (name) "oneLiner". Il est donc accessible par l'objet JavaScript référencé par l'expression document.forms[0].oneLiner ou document.editTicketForm.oneLiner (si l'identificateur du formulaire est "editTicketForm").
La propriété value de cet objet Text permet d'obtenir la valeur saisie dans la zone de texte (Cette propriété value est un objet de type String; on obtient sa longueur par la propriété length).
On obtient la valeur sélectionnée dans la liste de sélection document.editTicketForm.application par l'attribut value. Si cette valeur vaut -1, cela signifie que "--Autres--" a été sélectionnée comme application; on contreint alors l'utilisateur à saisir le nom de l'application.
Cliquer sur l'onglet "Source" en bas de page; Insérer le code ci dessous à l'intérieur de la balise <head>
<script
language="javascript" >
function checkForm() {
var input = document.editTicketForm.oneLiner;
if ( input.value.length == 0 )
{
alert("Vous n'avez
pas saisi de résumé");
input.focus();
return false;
}
var selectApp = document.editTicketForm.application;
input = document.editTicketForm.applicationOther;
if ( selectApp.value == -1 &&
input.value.length == 0 )
{
alert("Vous devez
saisir le nom de l'application si vous n'en choisissez pas une dans la
liste");
input.focus();
return false;
}
return true;
}
</script>
Cliquer sur l'onglet "Source"
en bas de page; Remplacer (Ctrl-F) tous les <tr> par
<tr class="tab_bg_1">
Insérer le code ci dessous à
l'intérieur de la balise <head>
<link
rel="stylesheet" href="../styles/styles.css" type="text/css"
media="screen">
Dans la première
ligne du tableau, remplacer la balise <td> par
<th> (cellule de titre).
Cliquer sur l'onglet "Normal". Les couleurs devraient
apparaître.
Note : NVu possède également un éditeur de feuille de style puissant.
Outils->Editeur CSS...