crowd-input

入力データを受け取るボックス。

自己終了型にすることはできない

HTML 標準の input 要素とは異なり、閉じ括弧の前にスラッシュを配置する (例えば、<crowd-input ... />) ことによって、この要素を自己終了することはできません。この要素の後に </crowd-input> を指定して終了する必要があります。

この Crowd HTML 要素を使用する HTML テンプレートのインタラクティブな例については、「CodePen」を参照してください。

<crowd-input> 要素を使用する Liquid テンプレートの例を次に示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。

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

属性

次の属性が、この要素でサポートされています。

allowed-pattern

ワーカータイプとして一致しない文字を無視するために、auto-validate 属性と共に使用される正規表現。

auto-focus

この値を true に設定すると、ロード後にブラウザのフォーカスは入力領域に配置されます。このようにして、ワーカーは最初に選択することなく入力を開始できます。

auto-validate

ブールスイッチ。存在する場合、入力の検証を有効にします。検証の動作は error-message 属性と allowed-pattern 属性によって変更できます。

無効

ブールスイッチ。存在する場合、入力領域を無効なものとして表示します。

error-message

検証が失敗した場合に、入力フィールドの下、左側に表示されるテキスト。

label

テキストフィールド内に表示される文字列。

ワーカーがフィールドへの入力を開始するとき、または value 属性が設定されているとき、このテキストは縮小されてテキストフィールドの上に表示されます。

max-length

入力が受け入れる最大文字数。この制限を超える入力は無視されます。

min-length

フィールドの入力最小文字数。

name

DOM およびフォームの出力で使用される入力の名前を設定します。

プレースホルダー

プレースホルダーテキストとして使用される文字列値で、ワーカーがこの入力へのデータ入力を開始するまで表示されます。これはデフォルト値として使用されません。

必須

ブールスイッチ。存在する場合、ワーカーに入力を要求します。

type

文字列を受け取って入力の HTML5 input-type 動作を設定します。例には、file や date が含まれます。

値

ワーカーが入力を提供しない場合にデフォルトとなるプリセット。プリセットはテキストフィールドに表示されます。

要素の階層

この要素には、以下の親および子要素があります。

• 親要素: crowd-form

• 子要素: なし

出力

name 文字列をプロパティ名として提供し、フィールドに入力されたテキストを値として提供します。

例 : JSON 出力のサンプル

複数の要素の値は、name 属性値をプロパティ名として同じオブジェクトに出力されます。入力のない要素は出力に表示されません。例えば、次の 3 つの入力を使用するとします。

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

以下は、2 つだけが入力を持つ場合の出力です。

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

つまり、これらの結果を解析するように構築されたコードはすべて、回答でのそれぞれの入力の有無を処理できる必要があります。

以下の資料も参照してください。

詳細については、以下を参照してください。

• Amazon を使用する SageMaker ラベル付けデータの Ground Tru

• Crowd HTML 要素のリファレンス