crowd-radio-group - Amazon SageMaker
属性元素层次结构输出另请参阅

crowd-radio-group

一组单选按钮。只能选中组内的一个单选按钮。选择一个单选按钮将清除同一组内先前选择的任何单选按钮。有关使用 crowd-radio-group 元素的自定义 UI 模板的示例，请参阅此实体识别标记作业自定义模板。

请参阅在 CodePen 中使用此 Crowd HTML 元素的 HTML 模板的交互式示例。

以下是可与 <crowd-radio-group> 元素一起使用的语法示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

  
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<style>
	body {
		padding-left: 20px;
		margin-bottom: 20px;
	}
	#outer-container {
	    display: flex;
	    justify-content: space-around;
	    max-width: 900px;
	    margin-left: 100px;
	}
	.left-container {
    	margin-right: auto;
    	padding-right: 50px;
	}
	.right-container {
    	margin-left: auto;
    	padding-left: 50px;
	}
	#vertical-separator {
	    border: solid 1px #d5dbdb;
	}
</style>

<crowd-form>
    <div>
        <h1>Instructions</h1>
	Lorem ipsum...
    </div>
    <div>
        <h2>Background</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="outer-container">
	<span class="left-container">
	    <h2>Option 1</h2>
	    <p>Nulla facilisi morbi tempus iaculis urna. Orci dapibus ultrices in iaculis nunc sed augue lacus.</p>
	</span>
	<span id="vertical-separator"></span>
	<span class="right-container">
	    <h2>Option 2</h2>
	    <p>Ultrices vitae auctor eu augue ut. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.</p>
	</span>
    </div>
    <div>
        <h2>Question</h2>
    	<p>Which do you agree with?</p>
	<crowd-radio-group>
	    <crowd-radio-button name="option1" value="Option 1">Option 1</crowd-radio-button>
	    <crowd-radio-button name="option2" value="Option 2">Option 2</crowd-radio-button>
	</crowd-radio-group>

    	<p>Why did you choose this answer?</p>
	<crowd-text-area name="explanation" placeholder="Explain how you reached your conclusion..."></crowd-text-area>
    </div>
</crowd-form>

属性

此元素不支持任何特殊属性。

元素层次结构

此元素具有以下父元素和子元素。

输出

输出表示其中 crowd-radio-button 元素的对象数组。

例 元素输出示例
[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。