Insertion-> 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 sur le bouton "Vue combinée" puis dans T(1,1).
Dans le code source de cette case
insérer un espace entre "td" et ">", choisir l'attribut
colspan et insérer ="2" et supprimer la colonne suivante
("<td><br></td>").
Réitérer ces opérations pour les lignes 6, 7 et 9.
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->Une zone d'entrée de texte
Saisir "oneLiner" pour "Nom"; 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 choix
Saisir "application" pour "Nom"; 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->Un bouton radio
Saisir "type" pour "Nom" et "anomalie" pour
"Valeur"; Cocher la boite
"L'élément est coché"; Cliquer sur "OK"
Saisir "Anomalie" à droite du bouton
créé
Insertion->Formulaire->Champs de formulaire->Un bouton radio
Saisir "type" pour "Nom" et "evolution" pour
"Valeur"; 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"; 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->Un bouton d'envoi de formulaire
Saisir "Envoyer" pour "Valeur" ...; 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 "Code 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).
Les couleurs devraient
apparaître.