一文清晰了解表格表单

 一、表格

要想实现下述内容: 

代码如下:

<!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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无线LED显示屏:信息传播新潮流

随着信息技术的飞速发展&#xff0c;无线LED显示屏以其独特的优势在信息传播领域崭露头角。本文将详细介绍无线LED显示屏的特点及其在现代信息传播中的作用。 组网规模的无限可能 无线LED显示屏通过GSM、GPRS、CDMA、3G等无线网络实现信息的远程、实时发布&#xff0c;采用TCP/…

cadence23中 PCB Editer导入元器件

cadence的文件架构&#xff1a; 1 .dra文件是元器件封装的可编辑文件 2 .psm是cadence元器件封装的cadence的识别文件&#xff0c;cadence只识别.psm,不识别.dra 3..dra是元器件的封装文件&#xff0c;由.pad焊盘文件和丝印组成 .dra .psm文件放在一个文件夹中&#xff0c;…

31. 1049. 最后一块石头的重量 II, 494.目标和,474.一和零

class Solution { public:int lastStoneWeightII(vector<int>& stones) {int sum 0;for(int stone : stones) sum stone;int bagSize sum /2;vector<int> dp(bagSize 1, 0);for(int i 0; i < stones.size(); i){ //遍历物品for(int j bagSize; j >…

迅为RK3588S开发板广泛用于边缘技术,人工智能,智能家居,智慧零售,智能网关等

性能强 iTOP-3588S开发板采用瑞芯微RK3588S处理器&#xff0c;是全新一代AloT高端应用芯片&#xff0c;搭载八核64位CPU&#xff0c;四核Cortex-A76和四核Cortex-A55架构主频高达2.4GHZ&#xff0c;8GB内存&#xff0c;32GBEMMC。 四核心架构GPU内置GPU可以完全兼容0penGLES1.1…

动漫3d模型设计需要注意什么?---模大狮模型网

设计动漫3D模型时&#xff0c;有几个方面需要注意&#xff1a; 保持角色风格一致性&#xff1a; 动漫通常有独特的风格和美学&#xff0c;设计时要确保模型与所代表的角色或作品的整体风格相符。注意保持线条和比例的一致性&#xff0c;使模型能够忠实地呈现原作的特点。 注重…

c++初阶学习----入门(下)

承接上篇&#xff0c;我们在上一篇博客中提及过&#xff0c;我们c入门还有一些。这一篇博客会着重写重载和引用。当然还会有一些其他的知识点。但是大家主要是需要了解这两个重点。好&#xff0c;那么我们马上来讲讲今天的主题。 引用 引用的含义 好我们还是先看含义引⽤不是…

【GreenHills】GHS-Servecode的查看和说明

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 在Green Hills客户申请license试用以及正式文件的Servecode编号会有不同&#xff0c;该文档对此进行说明并如何主动查看Servecode&#xff0c;并且说明Servecode的类别&#xff0c;通过Servecode了解客户授权情况。 …

【鸿蒙学习笔记】使用axios进行HTTP数据请求

官方文档&#xff1a;网络管理开发概述 目录标题 访问淘宝公开接口&#xff08;测试数据&#xff09;第1步&#xff1a;module.json5 配置网络授权第2步&#xff1a;下载axios第3步&#xff1a;源码第4步&#xff1a;启动模拟器第5步&#xff1a;启动entry第6步&#xff1a;操…

ChIP项目文章CMI(IF=24.1)|IRF1激活可促进辐射诱导的细胞死亡和炎症反应

2024年6月7日&#xff0c;四川大学张舒羽教授团队在Cellular & Molecular Immunology&#xff08;IF24.1&#xff09;期刊上发表了题为“Chaperone-and PTM-mediated activation of IRF1 tames radiation-induced cell death and inflammation response”的文章&#xff0c…

专注于国产FPGA芯片研发的异格技术Pre-A+轮融资,博将控股再次投资

近日&#xff0c;苏州异格技术有限公司&#xff08;以下简称“异格技术”&#xff09;宣布成功完成数亿元的Pre-A轮融资&#xff0c;由博将控股在参与Pre-A轮投资后&#xff0c;持续投资。这标志着继2022年获得经纬中国、红点中国、红杉中国等机构数亿元天使轮融资后&#xff0…

FastAPI 学习之路(三十四)数据库多表操作

之前我们分享的是基于单个表的数据库表的操作&#xff0c;我们在设计数据库的时候也设计了跨表&#xff0c;我们可以看下数据库的设计 class User(Base):__tablename__ "users"id Column(Integer, primary_keyTrue, indexTrue)email Column(String(10), uniqueTr…

java线程锁synchronized的几种情况

一、对象方法锁 1、成员方法加锁 同一个对象成员方法有3个synchronized修饰的方法&#xff0c;通过睡眠模拟业务操作 public class CaseOne {public synchronized void m1(){try { TimeUnit.SECONDS.sleep(3); } catch (InterruptedException e) { e.printStackTrace()…

【机器学习】朴素贝叶斯算法详解与实战扩展

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 引言 朴素贝叶斯算法是一种基于概率统计的分类方法&#xff0c;它利用贝叶斯定理和特征条件独立假设来预测样本的类别。尽管其假设特征之间相互独立在现实中往往不成立&#xff0c;但朴素贝叶斯分类器因其计算…

vscode单独设置项目的字符集

vscode有个默认的字符集&#xff0c;直接修改这里的话将会修改整个vscode工具的字符集。如果不同的项目使用不同的字符集&#xff0c;就不能修改这个默认的设置了。而是需要针对每个项目进行修改。 修改方法&#xff1a; 使用shiftctrlp进入settings的菜单页面&#xff0c;点击…

Leetcode—236. 二叉树的最近公共祖先【中等】

2024每日刷题&#xff08;142&#xff09; Leetcode—236. 二叉树的最近公共祖先 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL…

怎么把便签主面板置顶 便签主面板置顶方法

作为一名经常需要处理大量信息和任务的作家&#xff0c;我发现便签记事真的是我的救星。无论是临时灵感、会议要点还是待办事项&#xff0c;便签都能帮我快速记录&#xff0c;让我不再遗漏任何重要信息。而且&#xff0c;便签的应用场景也非常广泛&#xff0c;无论是在电脑前写…

王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序

本内容是基于王道计算机数据结构的插入排序、冒泡排序、希尔排序、快速排序、简单选择排序整理。 文章目录 插入排序算法性能代码 冒泡排序算法性能代码 希尔排序算法性能代码 快速排序算法性能代码 简单选择排序算法性能代码 插入排序 算法 算法思想&#xff1a;每次将一个…

LLM代理应用实战:构建Plotly数据可视化代理

如果你尝试过像ChatGPT这样的LLM&#xff0c;就会知道它们几乎可以为任何语言或包生成代码。但是仅仅依靠LLM是有局限的。对于数据可视化的问题我们需要提供一下的内容 描述数据:模型本身并不知道数据集的细节&#xff0c;比如列名和行细节。手动提供这些信息可能很麻烦&#…

zigbee笔记:七、zigbee系统电源管理与睡眠唤醒

zigbee的低功耗、近距离无线传输的特点使得其在一众近距离无线传输方案中备受青睐。而zigbee低功耗优势是通过根据不同工况选择运行在不同的运行模式&#xff08;供电模式&#xff09;实现的&#xff0c;因此&#xff0c;掌握zigbee的系统电源管理与睡眠唤醒的相关知识&#xf…

发挥储能系统领域优势,海博思创坚定不移推动能源消费革命

随着新发展理念的深入贯彻&#xff0c;我国正全面落实“双碳”目标任务&#xff0c;通过积极转变能源消费方式&#xff0c;大幅提升能源利用效率&#xff0c;实现了以年均约3.3%的能源消费增长支撑了年均超过6%的国民经济增长。这一成就的背后&#xff0c;是我国能源结构的持续…