单选| 学习笔记

简介: 快速学习单选。

开发者学堂课程【零基础学前端 HTML+CSS 单选】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5119


单选

 

内容介绍:

一、单选框

二、示例

 

一、单选框

单选框一次只能一个选项。

用 <input> 标签描述。单选框使用时至少需要2个以上的 input 标签,并且它们 name 属性相同,其中每一个 input 构成一个选项。

 

二、示例

在上节 from.html 中继续输入

<tr>

<td>

<input name= “d1” type= “radio”>

</td>

</tr>

假如 <input> 前写兴趣选择:篮球

兴趣选择:篮球<input name= “d1” type= “radio”> 

运行结果如图:

image.png可以选择,但是我们需要知道单选框复选框都不是用户直接输入的,都是直接进行选择的,那么选择完后我们把什么东西提交出去呢?

这种写在页面上的文字是提交不出去的,它是不具有上传的特性的,要想提交出去,必须还有一个 value 属性

总结:

单选框:<input> 标签,type= “radio” value =值,所以用户提交出去的是 value 里的值,而不是在页面上写的文字

比如说选择篮球,我们用数值0来表示

兴趣选择:篮球<input name= “d1” type= “radio” value= “0”>

那么在页面上提交出去的是数值0,而并不是把篮球这两个字提交出去

另外文本框也可以有这种属性,比如

<input name= “user_name” type= “text” value= “默认”>

默认两个字就是文本框的默认值

image.png接下来继续写入兴趣选择,一定要注意值肯定不一样,要根据实际情况定,名称一定要一样,比如下列都为 d1

兴趣选择:

篮球<input name= “d1” type= “radio” value= “0”>

足球<input name= “d1” type= “radio” value= “1”>

网球<input name= “d1” type= “radio” value= “2”>

运行如图,三选一

image.png

但如果 name 名称不为同一个,将网球<input name= “d1” type= “radio” value= “2”>改为网球<input name= “d2” type= “radio” value= “2”>则会变成两个单独的单选框,足球篮球二选一,网球单独可选

image.png 

相关文章
|
7月前
|
前端开发 JavaScript 开发者
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
在前端开发中,为解决ElementUI缺少处理树状数据选择的Select组件问题,封装了一个Vue子组件`SelectTree`。组件支持单选和多选,具备搜索功能和懒加载特性。单选示例展示了如何展示树状部门数据,而多选则增加了已选内容的取消功能。此外,还新增了根据等级限制选择的功能。文章提供了详细的代码实现和效果截图,对需要此类组件的开发者具有参考价值。
230 1
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
|
7月前
单选全选框如何实现
单选全选框如何实现
45 1
|
7月前
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《QT从基础到进阶·二十四》按钮组QButtonGroup,单选框QRadioButton和多选框QCheckBox
《QT从基础到进阶·二十四》按钮组QButtonGroup,单选框QRadioButton和多选框QCheckBox
382 0
零基础VB教程039期:如何使用单选按钮optionbutton以及多选框checkbox
零基础VB教程039期:如何使用单选按钮optionbutton以及多选框checkbox
449 0
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选