表单,表格小练习

news2024/11/29 4:43:08

表格练习:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="400" height="500">
        <caption><strong>优秀学生信息表格</strong></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
             </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年二班</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>评语</td>
                <td colspan="3">你们都很优秀</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 运行结果:

表单练习: 

实现一个某婚恋页面:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在,抓紧谈恋爱</h1>
    <hr>
    <form action="">
    昵称:<input type="text" placeholder="请输入昵称">
    <br>
    <br>
        性别:<label><input type="radio" name="sex" checked>男</label>
         <label><input type="radio" name="sex">女</label>
    <br>
    <br>
    所在城市: <select>
                  <option>上海</option>
              </select>
    <br>
    <br>      
    婚姻状况:<label><input type="radio" name="s">已婚</label>
             <label><input type="radio" name="s">未婚</label>
             <label><input type="radio" name="s">保密</label>
    <br>
    <br> 
    喜欢的类型:<label><input type="checkbox" checked>可爱</label> 
    <label><input type="checkbox" checked>性感</label>
    <label><input type="checkbox">御姐</label>
    <label><input type="checkbox">萝莉</label>
    <label><input type="checkbox">小鲜肉</label>
    <label><input type="checkbox">大叔</label>
    <br>
    <br> 
    个人介绍:
    <br>
    <br> 
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br>
    <br> 
    <h3>我承诺</h3>   
    <ul>
        <li>年满18岁,单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
    </ul>
        <label><input type="checkbox">我同意以上条款</label>
        <br>
        <br>
        <button type="submit">免费注册</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>

运行结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1586728.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

创新指南|战略衡量的增长组织:用人工智能增强关键绩效指标(KPI)

传统的关键绩效指标 (KPI)越来越无法提供领导者取得成功所需的信息和见解。他们在跟踪进展、协调人员和流程、确定资源优先级以及推进问责制方面存在不足。本文是 2024 年第一份麻省理工学院 SMR - BCG 人工智能和商业战略全球高管学习和研究项目的调查结果——人工智能和业务战…

成为 Jira 大师:效率达人的必备秘诀

&#x1f525; 效率达人喜欢使用 Jira 的快捷键和命令面板&#xff0c;因为他们能够在不移动鼠标的情况下&#xff0c;快速执行各种命令和导航操作&#xff0c;从而更有效地完成 Jira 中的常见任务。 &#x1f3d6;️ 通过熟练掌握这些快捷键和命令&#xff0c;效率达人能够更…

Python+Selenium+Unittest 之Unittest5(常用装饰器-跳过用例执行)

目录 1、unittest.skip()&#xff08;跳过该装饰器下的用例&#xff09; 2、unittest.skipIf()&#xff08;跳过该装饰器下判断条件为True的用例&#xff09; 3、unittest.skipUnless()&#xff08;跳过该装饰器下判断条件为False的用例&#xff09; 4、unittest.expectedF…

qt进阶2:windows下可执行程序崩溃生成dmp,定位崩溃问题。

系列文章目录 文章目录 系列文章目录前言一、dmp文件生成二、使用步骤1.代码案例2.运行截图 前言 qt编译的可执行程序在windows下崩溃可生成dmp文件&#xff0c;用于调试定位崩溃原因。 一、dmp文件生成 略 二、使用步骤 1.代码案例 代码如下&#xff08;示例&#xff09;&…

PCB封装库的创建及引入

法1 1.创建lib 2.放置 找到你想要画的封装的器件的数据手册了解相关信息。 直插式选Multi-layer 贴片选Top-layer 焊盘尺寸 焊盘空尺寸 法2 嘉立创eda直接copy 再嘉立创中找到你想要的pcb&#xff0c;导出为ad 然后再ad中找到我们导出的文件 复制他 然后再库中粘贴 pcb库…

十进制,二进制,八进制,十六进制之间转换

一. 十进制转二进制 二. 二进制转十进制 三. 十进制转八进制 四. 八进制转十进制 五. 十进制转十六进制

Java代码基础算法练习-统计学生成绩-2024.04.11

任务描述&#xff1a; 编写程序&#xff0c;输入n个(0<n<50)学生的成绩(输入-1结束)&#xff0c;要求统计并输出优秀(大任务描述:于85)、及格(60~84)和不及格(小于60)的学生人数。(成绩取值范围0~100) 任务要求&#xff1a; 代码示例&#xff1a; /*** 这个程序用于统计…

编程技巧(五) mysql中查询将行转为列逗号隔开拼接

让清单成为一种习惯 互联网时代的变革,不再是简单的开发部署上线,持续,正确,安全地把事情做好尤其重要;把事情做好的前提是做一个可量化可执行的清单,让工程师就可以操作的清单而不是专家才能操作: 设定检查点 根据节点执行检查程序操作确认或边读边做 二者选其一不要太…

近屿OJAC带你解读:什么是大模型幻觉?

概念介绍 大模型幻觉指的是大型语言模型&#xff08;LLM&#xff09;在生成内容时出现的与现实世界事实或用户输入不一致的现象&#xff0c;这种现象可以被视为模型的“胡说八道”。具体来说&#xff0c;大模型的幻觉可以分为事实性幻觉和忠实性幻觉。 事实性幻觉&#xff0c…

[StartingPoint][Tier2]Vaccine

Task 1 Besides SSH and HTTP, what other service is hosted on this box? (除了SSH和HTTP&#xff0c;这个盒子上还托管了什么其他服务) # nmap -sS -T4 10.129.230.43 --min-rate 1000 ftp Task 2 This service can be configured to allow login with any password fo…

Pycharm远程连接服务器配置详解

背景&#xff1a; 相信很多人都遇到了这种情况&#xff0c;日常的开发和程序的验证都需要在linux环境下验证&#xff0c;而我们都是使用本地windows来进行开发或者脚本的编写&#xff0c;然后再push到远程仓库&#xff0c;再到linux环境下pull下来代码验证&#xff0c;这样每次…

【2024】使用Rancher管理k8s集群和创建k8s集群

Rancher管理k8s集群及创建k8s集群。 Rancher版本为:2.8.2目录 rancher管理k8s集群rancher创建k8s集群rancher管理k8s集群 使用rancher管理已经存在的k8s集群。 本部分内容需要自行准备好k8s集群及rancher平台,部署请看本人其他文章 。 登录到rancher平台后,点击集群管理,…

FreeRTOS学习 -- 移植

一、添加FreeRTOS源码 在基础工程中新建一个名为FreeRTOS的文件夹&#xff0c;创建FreeRTOS文件夹以后将FreeRTOS的源码添加到这个文件夹中。 portable 文件夹&#xff0c;只需要保留keil、MemMang 和 RVDS这三个文件夹&#xff0c;其他的都可以删除掉。 移植FreeRTOSConfig…

蓝桥杯-【二分】肖恩的苹果林

思路:有点类似于找最大值的最小化。 代码及解析 常规的模板引用40% #include <bits/stdc.h> using namespace std; #define ll long long const ll N1e53; ll a[N]; ll m,n; ll chack(ll mid) {int res1,last0;for(int i1;i<n;i){ if(a[i]-a[last]>mid){res;las…

微信小程序uniapp+vue电力巡线任务故障报修管理系统2q91t

uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 前端开发:vue 语言&#xff1a;javapythonnodejsphp均支持 运行软件:idea/eclipse/vscode/pycharm/wamp均支持 框架支持:Ssm/django/flask/t…

亚马逊云的账单申诉

亚马逊云科技申诉通常涉及几个步骤&#xff0c;目的是解决账单错误或申请费用调整。以下是一个基本的指南&#xff0c;可以帮助你开始处理账单问题&#xff1a; 1. 审核账单 在开始申诉之前&#xff0c;首先登录到亚马逊云科技管理控制台。 导航到“账单仪表板”以查看当前的…

如何在Python中进行指数和对数曲线拟合?

在本文中&#xff0c;我们将学习如何在Python中进行指数和对数曲线拟合。首先我们要问的问题是什么是曲线拟合&#xff1f; 曲线拟合是构造曲线或数学函数的过程&#xff0c;其具有对一系列数据点的最佳拟合&#xff0c;可能受到约束。 对数曲线拟合&#xff1a;对数曲线是对…

HarmonyOS开发实例:【数字管家app】

一&#xff0e;概述 本应用是基于RK3399开发板&#xff0c;使用OpenHarmony3.1-Release开发的应用。通过OpenHarmony的分布式技术&#xff0c;使多人能够一起画画。 1.应用运行效果图&#xff1a; 2.分布式画板使用示意图 如上图所示&#xff0c;用户1、用户2在各自本地端进行…

【可视化大屏开发】17. 加餐-ECharts定制省份地图

各身份地图数据下载小工具 DataV.GeoAtlas地理小工具系列 登录DataV 后&#xff0c;直接通过选择点击获取需要的省份地区数据 > 其实单击即可完成选择 检查下载的数据格式是否正常 自定义字体 更新地图部分代码 index.less部分 //声明字体 font-face{ font-family: …

ios包上架系列 三、JumpServer 堡垒机使用

1、钉钉申请搜索&#xff08;jumpserver权限申请&#xff09; 服务器信息可以询问产品经理&#xff0c;如有疑问最好当面和运维同事学习 XXX 2、使用钉钉扫码登录 https://jump.xxx.com/ui/#/workbench/assets 3、手机APP Authenticator&#xff0c;打开即可获取验证码 4、…