crowd-input

A box that accepts input data.

Cannot be self-closing
Unlike the input element in the HTML standard, this element cannot be self-closed by putting a slash before the ending bracket, e.g. <crowd-input ... />. It must be followed with a </crowd-input> to close the element.

The following attributes are supported by this element.

A regular expression that is used with the auto-validate attribute to ignore non-matching characters as the worker types.

When the value is set to true, the browser places focus inside the input area after loading. This way, the worker can start typing without having to select it first.

A Boolean switch that, if present, turns on input validation. The behavior of the validator can be modified by the error-message and allowed-pattern attributes.

A Boolean switch that, if present, displays the input area as disabled.

The text to be displayed below the input field, on the left side, if validation fails.

A string that is displayed inside a text field.

This text shrinks and rises up above a text field when the worker starts typing in the field or when the value attribute is set.

A maximum number of characters the input will accept. Input beyond this limit is ignored.

A minimum length for the input in the field

Sets the name of the input to be used in the DOM and the output of the form.

A string value that is used as placeholder text, displayed until the worker starts entering data into the input, It is not used as a default value.

A Boolean switch that, if present, requires the worker to provide input.

Takes a string to set the HTML5 input-type behavior for the input. Examples include file and date.

A preset that becomes the default if the worker does not provide input. The preset appears in a text field.

This element has the following parent and child elements. + Parent elements: crowd-form + Child elements: none

Provides a name string as the property name, and the text that was entered in the field as its value.

Example : Sample JSON Output
The values for multiple elements are output in the same object, with their name attribute value as their property name. Elements with no input do not appear in the output. For example, let’s use three inputs:

<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>

This is the output if only two have input:

[
  {
    "tag1": "blue",
    "tag2": "red"
  }
]

This means any code built to parse these results should be able to handle the presence or absence of each input in the answers.

For more information, see the following. + Amazon SageMaker Ground Truth + HTML Elements Reference