crowd-radio-button

Bouton qui peut être coché ou décoché. Lorsque les boutons radio appartiennent à un groupe, seul un bouton radio du groupe peut être coché à tout moment. Voici un exemple de configuration d'un élément crowd-radio-button à l'intérieur d'un élément crowd-radio-group.

Consultez un exemple interactif d'un modèle HTML qui utilise cet élément HTML Crowd dans CodePen.

Voici un exemple de syntaxe que vous pouvez utiliser avec l'élément <crowd-radio-button>. 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>
<crowd-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

L'exemple précédent est visible dans un modèle de tâche de travail personnalisé dans cet exemple GitHub : modèle personnalisé de tâche d'étiquetage de reconnaissance d'entité.

Les boutons radio de l'élément HTML Crowd ne prennent pas en charge la balise HTML required. Pour que la sélection d'un bouton radio soit requise, utilisez des éléments <input type="radio"> pour créer des boutons radio et ajoutez la balise required. Tous les éléments <input> appartenant au même groupe de boutons radio doivent avoir le même attribut name. Par exemple, dans le modèle suivant, l'utilisateur doit sélectionner un bouton radio dans le groupe animal-type avant d'envoyer l'élément.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <p>Select an animal type:</p>
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1539&q=80" style="height: 500; width: 400;"/>
<br><br>
<div>
  <input type="radio" id="cat" name="animal-type" value="cat" required>
  <label for="cat">Cat</label>
</div>
<div>
  <input type="radio" id="dog" name="animal-type" value="dog">
  <label for="dog">Dog</label>
</div>
<div>
  <input type="radio" id="unknown" name="animal-type" value="unknown">
  <label for="unknown">Unknown</label>
</div>
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </short-instructions>
</crowd-form>

Attributs

Les attributs suivants sont pris en charge par cet élément.

checked

Commutateur booléen qui, s'il est présent, affiche le bouton radio comme coché.

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton comme décoché et empêche celui-ci d'être coché.

name

Chaîne utilisée pour identifier la réponse envoyée par l'employé. Cette valeur correspondra à une clé dans l'objet JSON qui spécifie la réponse.

Note

Si vous utilisez les boutons en dehors d'un élément crowd-radio-group, mais avec la même chaîne name et des chaînes value différentes, l'objet du name dans la sortie contiendra une valeur booléenne pour chaque chaîne value. Pour vous assurer qu'un seul bouton d'un groupe est sélectionné, faites-en des enfants d'un élément crowd-radio-group et utilisez des valeurs de nom différentes.

value

Nom de propriété pour la valeur booléenne de l'élément. S'il n'est pas spécifié, « on » est la valeur par défaut, par exemple { "<name>": { "<value>": <true or false> } }.

Hiérarchie des éléments

Les éléments parents et enfants de cet élément sont les suivants :

• Éléments parents : crowd-radio-group

• Éléments enfants : aucun

Sortie

Génère un objet avec le modèle suivant : { "<name>": { "<value>": <true or false> } }. Si vous utilisez les boutons en dehors d'un élément crowd-radio-group, mais avec la même chaîne name et des chaînes value différentes, l'objet du nom contiendra une valeur booléenne pour chaque chaîne value. Pour vous assurer qu'un seul bouton d'un groupe est sélectionné, faites-en des enfants d'un élément crowd-radio-group et utilisez des valeurs de nom différentes.

Exemple de sortie de cet élément

[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

Voir aussi

Pour plus d’informations, consultez les rubriques suivantes.

• Utilisation d'Amazon SageMaker Ground Truth pour étiqueter les données

• Référence des éléments HTML crowd