HTML - 单选按钮

单选按钮常用于允许用户选择所列出的选项之一。为了能够做到表单的这种类型,我们将首先需要给域一个名称。

html<p>Choose citizenship </p>
<p>
	
	English: <input type="radio" name="citizenship" /><br />
	Rumanian: <input type="radio" name="citizenship" /><br />
	Spanish: <input type="radio" name="citizenship" />
</p>

Demo

Choose citizenship

English:
Rumanian:
Spanish:

指定表单一部分领域的名称,将让浏览器知道如何做到一个以上的单选按钮组之间的差别,因此允许选择对每个组和表单之一个答案变种。

高级的例子:

html<p>选择国籍</p>
<p>
	English: <input type="radio" name="citizenship" /><br />
	Romanian: <input type="radio" name="citizenship" /><br />
	Spanish: <input type="radio" name="citizenship" />
</p>

<p>Choose sex</p>
<p>
	Man: <input type="radio" name="性" /><br />
	Woman: <input type="radio" name="性" />
</p>

Demo

选择国籍

English:
Romanian:
Spanish:

Choose sex

Man:
Woman:

HTML - 单选按钮选择于 '默认'

相同的复选框,单选按钮可被选择为方便用户的工作。

html<p>选择国籍</p>
<p>
	English: <input type="radio" name="citizenship" checked="yes" /><br />
W	Romanian: <input type="radio" name="citizenship" /><br />
	Spanish: <input type="radio" name="citizenship" />
</p>

Demo

选择国籍

English:
W Romanian:
Spanish:

任何选项可以被选择,并不一定是第一个。 此外,只有当所需要的信息不是非常重要时,温和地,使用这个(选择某些按钮的)方法是很好的。这是用户出于舒适性或注意力不集中时好用的,在这种情况下要选择已经选定为他没有正确的一个选项。


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将给予删除

本教程数据来源「 http://tutorialehtml.com/zh/html-tutorial-complete-html-guide/ 」