crowd-input - Amazon SageMaker

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>

Attributes

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.

label

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.

nom

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.