什么是 radio form 属性?
radio form 属性是一种表单元素,它允许用户从一组互斥的选项中选择一个选项。每个 radio form 元素都有一个相同的名称,但是不同的值。当用户选择其中一个选项时,其他选项将自动取消选择。
如何创建 radio form 元素?
要创建一个 radio form 元素,我们需要使用 <input>
标签,并将其类型设置为 "radio"。同时,我们需要为每个 radio form 元素设置相同的名称,以确保它们是一组。
示例代码如下:
<form> <input type="radio" name="gender" value="male"> Male <br> <input type="radio" name="gender" value="female"> Female <br> <input type="radio" name="gender" value="other"> Other </form>
在上面的示例中,我们创建了一个包含三个 radio form 元素的表单,它们的名称都是 "gender",但是值分别为 "male"、"female" 和 "other"。
如何设置 radio form 元素的默认选项?
要设置 radio form 元素的默认选项,我们只需要在其中一个 radio form 元素中添加 "checked" 属性即可。这样,页面加载时,该选项将会被默认选中。
示例代码如下:
<form> <input type="radio" name="gender" value="male" checked> Male <br> <input type="radio" name="gender" value="female"> Female <br> <input type="radio" name="gender" value="other"> Other </form>
在上面的示例中,"Male" 选项将会被默认选中。
如何获取用户选择的 radio form 值?
当用户提交表单时,我们可以使用 JavaScript 来获取用户选择的 radio form 值。我们可以通过 document.querySelector
方法来选择指定的 radio form 元素,并获取其值。
示例代码如下:
-- -------------------- ---- ------- ----- ------------ ------ ------------ ------------- ------------- ---- ---- ------ ------------ ------------- --------------- ------ ---- ------ ------------ ------------- -------------- ----- ---- ------- ----------------------------- ------- -------- ------------------------------------------------------------ --------------- - ----------------------- --- -------------- - ------------------------------------------------------------- --------------- ------- - - ---------------- --- ---------
在上面的示例中,当用户点击提交按钮时,将会弹出显示用户选择的性别。
总结
通过本文的学习,我们了解了 radio form 属性的基本用法,包括创建、设置默认选项和获取用户选择的值。希望本文对你有所帮助,谢谢阅读!