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>元素关联在一起,提高了控件的可及性。

相关文章
|
1天前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
|
2天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
8 1
|
8天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
22 6
|
2天前
|
XML 前端开发 JavaScript
前端概论 web
前端概论 web
9 0
|
4天前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
6天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
7天前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
8天前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
4天前
|
分布式计算 并行计算 安全
在Python Web开发中,Python的全局解释器锁(Global Interpreter Lock,简称GIL)是一个核心概念,它直接影响了Python程序在多线程环境下的执行效率和性能表现
【6月更文挑战第30天】Python的GIL是CPython中的全局锁,限制了多线程并行执行,尤其是在多核CPU上。GIL确保同一时间仅有一个线程执行Python字节码,导致CPU密集型任务时多线程无法充分利用多核,反而可能因上下文切换降低性能。然而,I/O密集型任务仍能受益于线程交替执行。为利用多核,开发者常选择多进程、异步IO或使用不受GIL限制的Python实现。在Web开发中,理解GIL对于优化并发性能至关重要。
22 0
|
4天前
|
安全 编译器 API
探索PHP 8的新特性及其对现代Web开发的影响
随着PHP 8的正式发布,这一版本带来了多项重大改进和新特性,旨在提升性能、增加语言的灵活性并简化开发流程。本文将详细探讨PHP 8中的关键更新,包括JIT编译器、联合类型、命名参数、匹配表达式等,并分析这些新特性如何影响现代Web开发的实践。通过引用最新的性能数据和开发者反馈,我们将深入理解PHP 8带来的变革,以及它对现有项目和未来趋势的潜在影响。