crowd-input

입력 데이터를 수락하는 상자

자체 닫기가 불가능합니다.

HTML 표준의 input 요소와 달리 이 요소는 닫는 대괄호 앞에 슬래시를 입력해 자체 닫기가 불가능합니다(예: <crowd-input ... />). 이 요소를 닫으려면 뒤에 </crowd-input>이 와야 합니다.

CodePen에서 이 군중 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하세요.

다음은 <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>

Attributes

이 요소는 다음 속성을 지원합니다.

allowed-pattern

작업자가 입력할 때 일치하지 않는 문자를 무시하기 위해 auto-validate 속성과 함께 사용하는 정규식

auto-focus

이 값이 true로 설정되면 로드 후 브라우저가 입력 영역 내에 초점을 배치합니다. 이러한 방식으로 작업자는 입력 영역을 먼저 선택할 필요 없이 입력하기 시작할 수 있습니다.

auto-validate

(있는 경우) 입력 확인을 활성화하는 부울 스위치. 검사기의 동작은 error-message 및 allowed-pattern 속성으로 수정할 수 있습니다.

disabled

(있는 경우) 입력 영역을 비활성화 상태로 표시하는 부울 스위치

error-message

확인에 실패한 경우 입력 필드 왼쪽 아래에 표시되는 텍스트

label

텍스트 필드 내에 표시되는 문자열.

이 텍스트는 작업자가 필드에 입력하기 시작한 경우 또는 value 속성이 설정된 경우 줄어들고 텍스트 필드 위로 올라옵니다.

max-length

입력 시 수락되는 최대 문자 수. 이 제한을 벗어난 입력 데이터는 무시됩니다.

min-length

필드에 입력 가능한 최소 길이

name

DOM 및 양식 출력에 사용되는 입력의 이름을 설정합니다.

placeholder

작업자가 입력 영역에 데이터를 입력하기 시작할 때까지 표시되는 자리 표시자 텍스트로 사용되는 문자열 값으로, 기본값으로는 사용되지 않습니다.

필수

(있는 경우) 작업자가 입력을 제공해야 하는 부울 스위치

유형

입력에 대한 HTML5 input-type 동작을 설정하는 문자열을 가져옵니다. 예를 들면 file나 date와 같습니다.

value

작업자가 입력 데이터를 제공하지 않으면 기본값이 되는 사전 설정. 사전 설정은 텍스트 필드에 나타납니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

• 상위 요소: 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 Truth를 사용하여 데이터 레이블 지정

• 군중 HTML 요소 참조