前端html小技巧（form篇）：复选框、单选按钮的使用

最新推荐文章于 2024-03-08 09:11:52 发布
最新推荐文章于 2024-03-08 09:11:52 发布
阅读量4.3k 收藏 3
点赞数
文章标签： 前端 html
原文链接：https://blog.51cto.com/u_15111999/4893787
版权

今天分享下”前端html小技巧（form篇）：复选框、单选按钮的使用“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

复制代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>登录界面</title>

</head>

<body>

<h1>

<strong>登录界面</strong>

</h1>

<form name="f1" id="f1">

<table border="0" width="457" height="280" cellspacing="1" cellpadding="1">

<tbody><tr>

<td width="44">Login:</td>

<td width="406"><input type="text" name="login" id="login" size=""></input></td>

</tr>

<tr><td colspan="3" align="left">专业:



<input type="radio" name="type" value="computer" checked="">计算机应用</input>

<input type="radio" name="type" value="software">软件工程</input>

<p> http://www.qlyl1688.com </p>

<input type="radio" name="type" value="auto">自动化</input> </td>

</tr>

<tr><td colspan="4" align="left">课程:



<input type="checkbox" value="">计算机网络</input>

<input type="checkbox" value="">数据库原理</input>

<input type="checkbox" value="">WEB程序设计</input>

<input type="checkbox" value="">Java编程</input></td>

</tr>

</tbody></table>

</form>

</body>

</html>

实际效果：

登录界面

在这里插入图片描述

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML form应用包括复选框、单选按钮的使用
12-13
包括复选框，单选按钮的使用 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>登录界面</title> </head> <bo
jQuery自定义单选按钮复选框样式特效.zip
07-11
<form> <p> 单选框 <lable> <i class='input_style radio_bg'><input type="radio" name="hot" value="1"></i> a1 </lable> <lable> <i class='input_style radio_bg'><input type="radio" name="hot" value="2"></i> a2 </lable> <lable> <i class='input_style radio_bg'><input type="radio" name="hot" value="3"></i> a3 </lable> <lable> <i class='input_style radio_bg'><input type="radio" name="hot" value="4"></i> a4 </lable> <lable> <i class='input_style radio_bg'><input type="radio" name="hot" value="5"></i> a5 </lable> 这是一款通过jQuery特效来改变单选按钮 复选框样式，将它们进行美化处理的网页特效，适合新手，代码量非常少。
html的单选，多选和复选框及差异
最新发布
dhshsness的博客
03-08 245
checkbox是复选框，但是也可以用于多选绑定，由下面的代码可以看出，多选绑定，和复选是有区别的，checkbox用于多选上，是可以进行绑定的，如果id与下面lable输出的不同，是没有办法运行的。目前咱们在网上遇到过许多，关于html写出来的网页，其中就有我们很常见的性别选择，以及兴趣爱好的填写。radio是单选按钮，但是暂时在选取了之后，是没有办法取消的。后期我会给大家更新能取消的单选按钮。从上到下依次就是单选，多选，和复选了。首次更新，不好勿喷......
前端 两个复选框当只少选中一个_前端开发者们值得了解的 11 项前端技巧
weixin_39712821的博客
11-30 206
不容错过的 11 项 HTML/JS/CSS 技巧。通过以下 HTML/CSS/JavaScript 相关技巧，希望能帮助大家填补一点点关于前端开发方面的知识空白。1、Datalist 元素这项 HTML 元素的使用频率极低，今天我们就要为它正名！< datalist>标签用于为< input>元素提供一项“自动补全”功能。在键入过程中，您会看到如下图所示的预定义下拉菜单及...
【前端随记01】纯css自定义checkbox复选框样式
Sabrina_cc的博客
08-17 9042
人生何其短，要笑得分外甜 公司的H5项目又让我重新捡回来HTML5和原生JS和Jquery,今日遇到了checkbox的样式问题，做一个小小记录。 直接使用HTML5中的input复选框checkbox的样式是这样滴（左）但是嘞，UI设计稿是这样滴（右）： <input class="sure" type="checkbox" name="" value=""> 因此，我们需要动脑筋修改checkbox的样式了。 1.首先，需要添加一段CSS隐藏所有的Checkbox复...
复选框的使用-HTML入门基础（023）
虾米大王的学习历程
11-28 2434
我们接着分享关于input标签的内容，今天说的是复选框，单选按钮只能从列表中选择一项，其他互斥，而复选框可以从选项中选择一项或多项，是并行的概念。 语法： <input type="checkbox" value="复选框值" checked="checked"> checked属性表示此选项默认情况是勾选的，因为复选框是没有分组互斥的概念的，所以name属性也没有设置成同名的这种操作。 示例代码： <html> <he...
Html-复选框
a451319296的博客
12-14 7027
Html-复选框
复选框 前端代码
weixin_39417324的博客
10-12 245
【代码】复选框 前端代码。
前端-HTML-基础标签
zk1147756506的博客
02-07 1129
一.网站 网站是网页的集合 网页通常是HTML格式的文件，包括图像，视频，文字，语音.....元素组成，用html标签描述出来在浏览器上显示给用户的 二.HTML HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言 超文本的含义 1.指可以放置多媒体的内容（超出了文本的限制） 2.指可以从一个文件跳往另一个文件（超级链接文本） 它不是一种编程语言，而是一种标记语言（markup language） 标记语言是一套标记标签（m
前端 单选框，复选框
m0_68194523的博客
03-10 797
简单了解单选框和复选框，单项选择和多项选择
跟着网络来自学，#学习笔记#前端第一天：CSS单选按钮
weixin_42476939的博客
02-22 559
适合前端初学者，css的选择器使用学习和练习
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
12-31
本文主要介绍PyQt5界面最基本使用的单选按钮、复选框、下拉框三种控件的使用方法进行介绍。 1、RadioButton单选按钮/CheckBox复选框。需要知道如何判断单选按钮是否被选中。 2、ComboBox下拉框。需要知道如何对...
使用AngularJS处理单选框和复选框的简单方法
12-09
这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。 创建Angular表单 在这篇文章里，我们需要两个文件:index.html和app.js。app.js用来保存所有的Angular代码（它不大），而index...
前端中复选框三个状态
执笔绘江山的博客
05-23 438
所以实际使用过程中不仅仅有选中和未选两种状态，还有不确定态需要我们注意，在实际运用中也会使用到。
如何进行复选框的应用—前端小课堂
yunduanaoligei的博客
11-25 482
今天分享下”如何进行复选框的应用—前端小课堂“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过的两个小demo，都是关于复选框的，希望会给大家带来帮助。 第一个是关于复选框全选反选的操作，当然我在里面还加了一个小功能，就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态；反之亦然。
前端入门学习笔记表单进阶------单选框和复选框
m0_61656944的博客
01-18 653
<body> <div> 请选择你喜欢的爱好： </div> <div> <!-- 单选框 --> <input type="radio" name="man" id="haha" checked> <label for="haha">男</label> <input type="radio" name=.
web前端 --- 表单标签
weixin_62443409的博客
04-17 8738
标签用于定义表单域，以实现用户信息的收集和传递，将范围内的表单元素提交给服务器。
前端复选框处理（全选、全部选、反选、拼成字符串）
书之岁华
12-17 3147
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;无标题文档&amp;lt;/title&a
前端修改单选框和多选框的样式（美化）
weixin_51609337的博客
06-27 1956
【代码】前端修改单选框和多选框的样式（美化）
单选按钮、复选框使用时要注意什么
06-07
使用单选按钮和复选框时需要注意以下几点： 1. 为每个单选按钮和复选框指定唯一的`name`属性，以便在提交表单时可以正确地识别用户的选择。 2. 对于单选按钮，必须同时指定每个按钮的`value`属性和`checked`属性，以便指定默认选中的按钮和每个按钮所对应的值。 3. 对于复选框，可以使用`checked`属性指定默认选中的选项。 4. 使用`<label>`标签为每个单选按钮和复选框提供描述文本，以便用户明确选项含义。 5. 对于复选框，可以在`<label>`标签内嵌套`<input>`标签来实现点击 label 标签也可以选中对应的复选框，需要设置`for`属性和`id`属性保持一致。 例如，下面是一个单选按钮和复选框的示例： ```html <form> <p>请选择你喜欢的颜色：</p> <input type="radio" id="red" name="color" value="red" checked /> <label for="red">红色</label> <input type="radio" id="green" name="color" value="green" /> <label for="green">绿色</label> <input type="radio" id="blue" name="color" value="blue" /> <label for="blue">蓝色</label> <p>请选择你喜欢的水果：</p> <input type="checkbox" id="apple" name="fruit" value="apple" checked /> <label for="apple">苹果</label> <input type="checkbox" id="orange" name="fruit" value="orange" /> <label for="orange">橙子</label> <input type="checkbox" id="banana" name="fruit" value="banana" /> <label for="banana">香蕉</label> </form> ``` 在这个示例中，我们使用了单选按钮和复选框来让用户选择颜色和水果。其中，每个单选按钮和复选框都有一个唯一的`name`属性，以便在提交表单时可以正确地识别用户的选择。对于单选按钮，我们还指定了每个按钮的`value`属性和`checked`属性，以便指定默认选中的按钮和每个按钮所对应的值。同时，我们还使用了`<label>`标签为每个单选按钮和复选框提供描述文本，让用户明确选项含义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值