一文清晰了解表格表单

news2025/4/20 14:53:22

 一、表格

要想实现下述内容: 

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>ID</th>
            <th>Logo</th>
            <th>name</th>
            <th>names</th>
        </tr>
        <tr>
            <td> <img src="http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280" width="100px"></td>
            <td>这是普通</td>
            <td>的表格内容</td>
            <td style="text-align: center">居中</td>
        </tr>
    </table>
</body>

</html>

二、表单

要想实现下述表单: 

 

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- form表单标签:
        action:表单提交的url,默认当前页面
        method:提交方式——get在url后拼接数据——post在消息体中传递,无大小限制 -->
         <!-- name属性是必须,否则无法提交 -->
    <form action="" method="post">
        用户名:<input type="text" name="username"><br><br>
        学号:<input type="text" name="age"><br><br>
        密码:<input type="password" name="password"><br><br>
        性别:<label><input type="radio" name="gender" value="1">男</label>
              <label><input type="radio" name="gender" value="2">女</label><br><br>
        爱好:<label> <input type="checkbox" name="habby" value="java">java</label>
            <label> <input type="checkbox" name="habby" value="C++">C++</label>
            <label> <input type="checkbox" name="habby" value="python">python</label><br><br>
        生日:<input type="date" name="bir"><br><br>
        时间:<input type="time" name="time"><br><br>
        日期时间:<input type="datetime-local" name="datatime"><br><br>
        邮箱:<input type="email" name="email"><br><br>
        年龄:<input type="number" name="age"><br><br>
        学历:<select name="degree">
                <option value="">--------请选择--------</option>
                <option value="1">大专</option>
                <option value="2">本科</option>
                <option value="3">硕士</option>
                <option value="4">博士</option>
            </select><br><br>
    描述:<textarea name="description" cols="30" rows="10"></textarea> <br><br>
            <input type="hidden" name="id" value="1">

        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交"><br>
    </form>
</body>
</html>

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

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

相关文章

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第59-agent自动获取喵星人资讯并保存至云文件夹

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第59-agent自动获取喵星人资讯并保存至云文件夹 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由Java…

springboot仪器校准系统-计算机毕业设计源码51504

摘 要 随着科技的不断发展。测量设备的准确性和可靠性对于各行各业都至关重要。仪器校准系统作为确保测量设备性能的重要手段&#xff0c;已成为工业生产、科学研究、质量控制等领域不可或缺的一部分。本文对仪器校准系统进行了概述&#xff0c;探讨了校准方法、流程、特点、应…

等保2.0丨5分钟速览:小白都能理解的等保2.0简介

等保2.0的概念 等保2.0全称网络安全等级保护2.0制度&#xff0c;是我国网络安全领域的基本国策、基本制度。以1.0的规范为基础&#xff0c;等级保护标准以积极的防御为重点&#xff0c;由被动的防御发展为安全可信、动态感知和全过程的事前、事中和事后的全过程的全方位的审核…

解决MCM功率电源模块EMC的关键

对MCM功率电源而言&#xff0c;由于其工作在几百kHz的高频开关状态&#xff0c;故易成为干扰源。电磁兼容性EMC&#xff08;Electro Magnetic Compatibility&#xff09;&#xff0c;是指设备或系统在其电磁环境中符合要求运行并不对其环境中的任何设备产生无法忍受的电磁干扰的…

STM32 - DOG看门狗笔记

WDG&#xff08;Watchdog&#xff09;看门狗 作用&#xff1a; 看门狗可以监控程序的运行状态&#xff0c;当程序因为设计漏洞、硬件故障、电磁干扰等原因&#xff0c;出现卡死或跑飞现象时&#xff0c;看门狗能及时复位程序&#xff0c;避免程序陷入长时间的罢工状态&#x…

蓝队必备技能--yara-让自己编写AVVT

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…

STM32G4 DMA的使用(寄存器开发)

下面以STM32G474为例&#xff0c;使用DMA来存储USART1的接收数据。 1. 查看硬件支持 首先查看要使用的DMA支持的通道数&#xff0c;在手册中有如下说明。 根据上图可以看到&#xff0c;对于不同的设备类型有不同的DMA通道数量。设备类型分类如下图所示。 我使用的是STM32G474…

springboot乡镇医院管理系统-计算机毕业设计源码51697

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2研究现状 1.3论文结构与章节安排 2 SpringBoot乡镇医院管理系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3…

spark基于Spark的对招聘信息的分析与设计-计算机毕业设计源码50716

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2 系统分析 2.1 可行性分析 2.2.1 数据新增流程 2.2.2 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 系统总体设计 3.1 系统架构设…

大模型之战进入新赛季,开始卷应用

最近一段时间&#xff0c;国产大模型Kimi彻底火了&#xff0c;而这波爆火&#xff0c;某种意义上也展示了一个问题&#xff0c;即大模型的落地场景可能比技术比拼&#xff0c;更重要。 国产大模型Kimi突然爆火&#xff0c;与Kimi相关的产业链甚至被冠上“Kimi概念股”之名&…

MES系统助力塑料制品行业数字化转型

注塑MES系统助力工厂生产力提升具体体现在&#xff1a;覆盖生产全流程&#xff1b;数据自动收集、科学规划排产&#xff1b;优化配送模型、平衡物流运转&#xff1b;严格把控品质、异常自动分析&#xff1b;实时监控设备&#xff0c;保证正常运转&#xff1b;产品快速追溯&…

uniapp 九宫格抽奖

<template><view class"container"><view class"navleft" click"navback"><image src"/static/cj/left.png" mode""></image></view><view class"navtitle">抽奖</…

鸿蒙应用开发之Counter容器

前面学习了纵向容器,现在来学习一个计数器的容器,就是说这个容器显示增加或减少,但数值会显示一个文本组件内,如下图所示: 上面组件中间显示5的组件是一个文本组件,边上提供了增减的按钮。 它有两个事件组件,用来响应边上两个按钮: 要在文本组件里显示出来,需要定义一…

批量提取Word文档中表格内容

1 背景 有一个word文件&#xff0c;其中包含多个格式一致的表格&#xff08;如下图&#xff09;&#xff0c;需要将其内容进行提取&#xff0c;填写到excel中 2 实现代码 ## 导入工具包 from docx import Document import pandas as pd## 读取 Word 文件 document Document(…

如何有效去除论文中的AI痕迹?AI工具让降AI率变得简单

在学术写作的征途上&#xff0c;每个字都需独一无二。但AI写作的普及带来了AI痕迹的难题&#xff0c;增加了论文被标记的风险。笔灵AI工具的问世&#xff0c;为这一问题提供了完美的解决方案&#xff0c;让原创性不再是奢望。 传送门&#xff1a;https://ibiling.cn/paper-pas…

电脑硬盘分区及合并指南

电脑硬盘分区是指将一个硬盘划分成多个独立的区域&#xff0c;每个区域可以被操作系统单独管理和使用&#xff0c;我们可以根据需要将数据分类存储&#xff0c;例如将系统文件、个人文件和多媒体内容分别存放在不同的分区中。合理的分区不仅可以提升系统性能&#xff0c;还能提…

AI大模型技术的四大核心架构演进之路

随着人工智能技术的飞速发展&#xff0c;大模型技术已经成为AI领域的重要分支。 本文将深入探讨四种关键的大模型技术架构&#xff1a;纯粹Prompt提示词法、Agent Function Calling机制、RAG&#xff08;检索增强生成&#xff09;以及Fine-tuning微调技术&#xff0c;揭示它们…

git-工作场景

1. 远程分支为准 强制切换到远程分支并忽略本地未提交的修改 git fetch origin # 获取最新的远程分支信息 git reset --hard origin/feature_server_env_debug_20240604 # 强制切换到远程分支&#xff0c;并忽略本地修改 2. 切换分支 1. **查看所有分支&#xff1a;**…

如何避免因AI代写导致的学位撤销风险?降AI率是关键

现在的论文审查都比较严格&#xff0c;随着AI的发展&#xff0c;很多学生都会选择用AI工具进行论文的写作&#xff0c;所以现在的论文审查&#xff0c;除了查重率&#xff0c;还有一个AIGC率也是需要关注的&#xff0c;因为在最新的学位法中已经明确规定“已经获得学位者&#…

springboot零食盒子-计算机毕业设计源码50658

目 录 1 绪论 1.1 研究背景 1.2研究意义 1.3论文结构与章节安排 2 微信小程序的零食盒子系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 微信…