Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
crowd-input
Zone qui accepte la saisie de données.
Ne se ferme pas automatiquement.
Contrairement à l'élément HTML input standard, cet élément ne se ferme pas automatiquement en raison de la barre oblique placée avant le crochet de fermeture, par exemple <crowd-input ... />. Pour se fermer, l'élément doit être suivi d'un </crowd-input>.
Consultez un exemple interactif d'un modèle HTML qui utilise cet élément HTML Crowd dans CodePen
Voici un exemple de modèle Liquid qui utilise l'élément <crowd-input>. Copiez le code suivant et enregistrez-le dans un fichier avec l'extension .html. Ouvrez le fichier dans n'importe quel navigateur pour prévisualiser et interagir avec ce modèle.
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <crowd-form> <img style="max-width: 35vw; max-height: 50vh" src="{{ task.input.taskObject | grant_read_access }}"> <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input> <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input> <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input> <short-instructions> Your custom quick instructions and examples </short-instructions> <full-instructions> Your custom detailed instracutions and more examples </full-instructions> </crowd-form>
Attributs
Les attributs suivants sont pris en charge par cet élément.
allowed-pattern
Expression régulière utilisée avec l'attribut auto-validate pour ignorer les caractères saisis par l'employé qui ne correspondent pas.
auto-focus
Lorsque la valeur est définie sur true, le navigateur place le curseur dans la zone de saisie après le chargement. L'employé peut ainsi commencer sa saisie sans avoir à la sélectionner d'abord.
auto-validate
Commutateur booléen qui, s'il est présent, active la validation de la saisie. Le comportement du valideur peut être modifié par les attributs error-message et allowed-pattern.
disabled
Commutateur booléen qui, s'il est présent, affiche la zone de saisie comme désactivée.
error-message
Texte à afficher sous le champ de saisie, sur le côté gauche, si la validation échoue.
étiquette
Chaîne qui s'affiche dans un champ de texte.
Ce texte rétrécit et se déplace au-dessus du champ de texte lorsque l'employé commence sa saisie dans le champ ou lorsque l'attribut value est défini.
max-length
Nombre maximal de caractères accepté pour la saisie. Au-delà de cette limite, la saisie est ignorée.
min-length
Longueur minimale de la saisie dans le champ.
name
Définit le nom de la saisie à utiliser dans le DOM et la sortie du formulaire.
placeholder
Valeur de chaîne qui est utilisée comme espace réservé pour le texte et s'affiche jusqu'à ce que l'employé commence à saisir des données. Elle n'est pas utilisée comme valeur par défaut.
obligatoire
Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.
type
Prend une chaînes de caractères pour définir le comportement HTML5 input-type de la saisie. Exemples : file et date.
value
Ce préréglage devient la valeur par défaut si l'employé ne saisit rien. Il s'affiche dans un champ de texte.
Hiérarchie des éléments
Les éléments parents et enfants de cet élément sont les suivants :
-
Éléments parents : crowd-form
-
Éléments enfants : aucun
Sortie
Fournit une chaîne de caractères name comme nom de propriété, et le texte saisi dans le champ comme valeur.
Exemple : Exemple de sortie JSON
Les valeurs de plusieurs éléments sont générés dans le même objet, avec la valeur de l'attribut name comme nom de propriété. Les éléments sans entrée n'apparaissent pas dans la sortie. Par exemple, utilisons trois entrées :
<crowd-input name="tag1" label="Word/phrase 1"></crowd-input> <crowd-input name="tag2" label="Word/phrase 2"></crowd-input> <crowd-input name="tag3" label="Word/phrase 3"></crowd-input>
Voici la sortie avec seulement deux entrées :
[ { "tag1": "blue", "tag2": "red" } ]
Cela signifie que n'importe quel code conçu pour analyser ces résultats devrait être en mesure de gérer la présence ou l'absence de chaque entrée dans les réponses.
Voir aussi
Pour plus d’informations, consultez les rubriques suivantes.
