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

相关文章
|
3天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
62 0
|
3天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
13 0
|
4天前
|
前端开发
web前端作业3
web前端作业3
9 1
|
4天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
7 1
|
4天前
|
前端开发
web前端的作业1
web前端的作业1
7 1
|
4天前
|
前端开发 JavaScript 搜索推荐
WEB前端第一天
WEB前端第一天
10 1
|
4天前
|
存储 人工智能 前端开发
从前端到后端,探索Web开发的奥秘
Web开发是当今最热门的技术领域之一,涉及前端、后端、数据库等多个方面。本文将介绍Web开发的基本架构和技术要点,并深入探讨前后端交互、安全性等问题,帮助读者更好地理解Web开发的奥秘。
|
4天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
7天前
|
数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
|
8天前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制