Need to have an OpenSesame expert by your side 24/7? Subscribe to Sigmund!
Formulaires HTML personnalisés
L'élément inline_html vous permet de mettre en place des formulaires en utilisant du HTML personnalisé.
- L'attribut
name
des balisesinput
correspond à une variable expérimentale. Par conséquent, le texte saisi dans l'entrée de texte de l'exemple 1 sera stocké en tant que variable expérimentaletext_response
. - Pour les éléments
checkbox
etradio
, vous pouvez utiliser l'attributid
pour attribuer une valeur spécifique à la variable expérimentale associée. - Vous pouvez utiliser l'attribut
required
pour indiquer qu'un formulaire ne peut être soumis avant qu'un champ ait été complété. - Le formulaire est fermé lorsque le participant clique sur une entrée de type submit.
- Pour inclure des images provenant de la réserve de fichiers dans un formulaire HTML personnalisé, commencez par récupérer l'URL du fichier, attribuez-le à une variable expérimentale, puis utilisez cette variable comme source pour la balise
<img>
(voir exemple 3).
Exemple 1 :
Un formulaire de saisie de texte très basique :
<input type='text' name='text_response'>
<input type='submit' value='cliquez ici pour continuer'>
Exemple 2 :
Un formulaire avec plusieurs boutons radio :
<p>Veuillez sélectionner votre âge :</p>
<input type="radio" id="age1" name="age" value="30" required>
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="Envoyer">
Exemple 3 :
Vous pouvez inclure des références de variables (excepté dans les balises <script>
, où les accolades sont simplement interprétées comme faisant partie du code JavaScript) :
<p>Votre tranche d'âge est {age}</p>
<input type='submit' value='ok'>
Exemple 4 :
Vous pouvez utiliser JavaScript via les balises <script>
. Par exemple, vous pouvez obtenir une image de la réserve de fichiers et l'attribuer à une balise <img>
initialement vide comme ceci :
<img id='capybara'>
<input type='submit' value='ok'>
<script>
document.getElementById('capybara').src = pool['capybara.png'].data.src
</script>