web前端---------网页中的选项

简介: web前端---------网页中的选项

我今天学习一些选项类型的表单控件,包括单选按钮、复选框和下拉菜单。

1.单选按钮

在网页中,单选按钮用于从一组选项中只选择一个来提交表单。这意味着当一组单选按钮中有一个选项被选中时,所有其它的单选按钮都将自动处于未被选中的状态。

###1.1通过等号,将<input>标签的type属性设置为radio,表示单选按钮。

          需要特别注意的是,同一组单选按钮的name属性的值必须相同,这样才能生成一组互斥的             选项、实现单选效果。否则的话,两个按钮都可以被选中,这就失去了单选按钮的意义。

###1.2通过<input>标签的id属性,为每个单选按钮分配一个唯一的标识符。设置id属性一般有以               下两种用途:1、配合<label>标签使用,为单选按钮添加文本描述;

                                2、用作单选按钮元素的CSS选择器,为单选按钮添加样式。

###1.3可以直接在input标签的前后输入文字作为文本描述(例如下面的案例1);还有一种方法,那             就是在<input>元素前后使用 <label></label> 标签对,在其中写入文本描述(例如下面的案             例2)。

###1.4我们目前创建的单选按钮,只能通过点击空心小圆圈才能进行选择。

          如果想实现在点击文本内容时就能对相应的单选按钮进行选择,则需要指定文本描述的关联元素。

          要进行绑定,需要保证<label>的for属性值和对应的<input>的id属性值一样。

2.复选框

<input>标签的type属性设置为checkbox,表示复选框。

这里只是type属性发生改变,其余的基本不变;

创建单选按钮和复选框时,除了<input>元素的name属性和id属性外,还有一个通用属性value,用于设置控件的值。

单选按钮和复选框的name属性值和value属性值都不会显示在页面上

在提交数据时,它们俩会以名字/值对的形式,随表单一起被提交至服务器。

value的值是向服务器提交的值,而显示在页面上的值则是<label></label>标签对中的文本描述。

3.下拉菜单

在HTML中,下拉菜单由<select><option>这两个标签配合使用来表示的。

<select></select>标签对用来创建一个下拉菜单元素。

同所有其它表单元素一样,<select>元素也有name属性,且不会显示在页面上,但会与表单数据一起提交至服务器。同样,<select>元素也有id属性,这里也是为了配合<label>标签的使用而设置。

下拉菜单里的每个选项都由<select>中的一个 <option> 元素定义。

与单选按钮和复选框相同,除了直接在<select>元素前后写入文本描述外,还可以使用 <label></label>标签对。

<label></label>标签对中,我们通过for属性,将<label>元素与<select>元素关联在一起,提高了控件的可及性。

相关文章
|
8天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
7天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
8天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
8天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
12天前
|
SQL 安全 搜索推荐
Web安全-伪静态网页
Web安全-伪静态网页
17 3
|
17天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
23天前
|
前端开发
|
23天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
23天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
8天前
|
缓存 边缘计算 前端开发
关于前端性能优化问题,认识网页加载过程和防抖节流
该文章详细探讨了前端性能优化的方法,包括理解网页加载过程、实施防抖和节流技术来提升用户体验和性能。
下一篇
无影云桌面