【每日前端】HTML网页表格和表单的实现

最新推荐文章于 2024-10-20 15:49:24 发布
最新推荐文章于 2024-10-20 15:49:24 发布
阅读量308 收藏 2
点赞数
分类专栏： 每日前端 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41891566/article/details/111822159
版权
本文介绍了如何使用HTML5创建表格和表单。包括表格的基本结构、表单元素如文本输入、单选按钮、复选框、下拉菜单、提交与重置按钮的用法，并提供了一个综合练习案例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

表格

表单

综合练习：

<!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 align="center" style="color: skyblue">欢迎来到淘宝网</h1>
    <table border="1" width="600" height="300" align="center" bordercolor="green" cellspacing="1" cellpadding="1">
        <form action="" method="post">
            <tr align="center">
                    <td>真实姓名</td>
                    <td><input type="text" name="text"></td>
                
            </tr>
            <tr align="center">
                    <td>用户性别</td>
                    <td>
                        <input type="radio" name="sex" value="1">男
                        <input type="radio" name="sex" value="0">女
                    </td>
            </tr>
            <tr align="center">
                    <td>密码</td>
                    <td>
                        <input type="password" name="password">
                    </td>
            </tr>
            <tr align="center">
                    <td>密码保护问题</td>
                    <td>
                        <select>
                            <option>身份证号码</option>
                            <option>母亲姓名</option>
                            <option>父亲姓名</option>
                            <option>家庭住址</option>
                        </select>
                    </td>
            </tr>
            <tr align="center">
                    <td>请选择关注的商品类型</td>
                    <td>
                        <input type="checkbox" name="checkbox" value="1">数码产品
                        <input type="checkbox" name="checkbox" value="2">运动产品
                        <input type="checkbox" name="checkbox" value="3">音像用品
                        <input type="checkbox" name="checkbox" value="4">家具用品
                    </td>
            </tr>
            <tr align="center">
                    <td colspan="2">
                        <input type="submit" name="submit">
                        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                        <input type="reset" name="reset">
                    </td>
            </tr>
            <tr align="center">
                    <td>淘宝网协议</td>
                    <td>
                        <textarea name="textarea" >
                            欢迎阅读淘宝网服务条款协议...
                        </textarea>
                    </td>
            </tr>
        </form>
    </table>
</body>
</html>

结果：

前端开发：基于移动端的JS原生Table的使用
全沾软贱开发攻城狮
10-12 1万+
前言 在基于移动端的前端开发过程中，会使用类似PC端的列表展示，即table表格的使用，但是基于移动端的前端框架Vant是没有提供对应的组件库，这就需要使用JS原生的Table，需要在基于移动端的前端开发的时候结合原生的表格使用，那么本篇博文就来分享一下关于在前端开发的时候基于移动端的JS原生Table的运用。 操作步骤 在界面中创建table的具体方法很简单，只需要设置好标签、数据源、样式三部分之后就可以了，使用起来也是非常简单和方便，这样就解决了基于移动端想要实现类似PC端的table效果
前端页面表格解析
yunduanaoligei的博客
09-15 223
这篇文章关键介绍了前端页面表格解析,包含表格的功效合理布局及格式难题，文中根据案例编码给大伙儿介绍的特别详尽，对我们的学习培训或工作中具备一定的参考借鉴使用价值，有需要的小伙伴们跟我开冲 作用：数据的展示，表格应用场景. 表格 行 单元格 前端页面表格解析_html 格式： <table> 　　<caption>...</caption><!-表格标题，居中显示--> 　　<tr> 　　　　<th>...</th&gt
CSS控制表格样式
m0_58813405的博客
12-12 1244
css
web前端-html：简单创建表格表单相结合的网页
最新发布
weixin_73729058的博客
10-20 652
input type="submit" value="提交">定义了一个按钮，点击后将表单数据提交到在标签的action属性中指定的URL。:提高表单课访问性，当用户点击标签时，对应的表单控件会获得焦点---for：指定该标签所关联的表单控件的id。action属性用来指定表单数据提交到的服务器端脚本的URL，在实际开发的时候action应该设置具体的URL。标签的id属性值应该是唯一的，并且与标签的for属性相匹配。
【HTML】如何使用html制作一个简易的表格？
热门推荐
萌萌白白的博客
02-16 1万+
如何使用html制作一个简易的表格
前端初学者----网页中的表格
liyong201314的博客
10-16 2464
在为大家讲解新的知识之前内，先为大家补充一下上一篇文章中标签内容的视频讲解，由于小丸子的失误导致视频优酷没有上传成功只能为大家提供网盘地址，为初学小白们提供下载地址，讲解的不好还请您见谅担待；链接永久有效哦???? 这是网盘地址：提取码是：tq94 ❀❀❀不要走开，接下来是正文内容：❀❀❀ 今天主要为大家带来的是网页中的表格内容，表格顾名思义，就类似于我们电脑中常见的excel表格；他的主要作用是：在网页中用来展示数据；将对应的数据展示在我们的页面中；对于网页有些了解的同学就说了：“小丸子，我们现在都不怎么
基于PHP和HTML的每日一题题库系统实现
在本项目中，我们看到了一个简单的Web应用的构成，它利用HTML和PHP语言实现了每日一题功能。用户可以在这个应用中随机接收一道单选或多选题进行回答，并且在回答之后能够查看正确答案。同时，管理人员可以通过一个...
前端开发实践：每日进步的关键HTML练习
HTML可以嵌入文本内容、图片、链接、视频、表单和各种其他媒体资源。 - **文档类型声明**：HTML文档的最顶部通常会有一个文档类型声明，用来告诉浏览器这个文档的HTML版本。例如，`<!DOCTYPE html>`是HTML5的标准...
制作一个简单HTML静态网页（HTML+CSS）
wx___BJ050106的博客
08-06 495
🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。🏅......
每日前端面试题、技巧等知识点，记录自己的成长过程.zip
03-16
1. **HTML**：HTML（HyperText Markup Language）是构建网页的基础，面试中可能会涉及到语义化标签的应用、表单控件的使用、布局技巧如表格、div和span的使用，以及新版本HTML5的新特性，如离线存储、拖放功能、画布...
网站前端网页源码模板 (880).zip
09-24
网站前端网页源码模板(880).zip包含了一系列用于构建网站前端的HTML文件和一个图像文件。这些文件是创建动态、交互式网页的基础，它们提供了网页的基本结构和设计元素。下面将详细介绍这些文件和它们在网站开发中的...
HTML网页设计：二、表单、表格
少可爱
07-23 2512
表单的作用：用于搜集用户信息。 <form method=“get或者post” action=“向何处发送表单数据”> 1、属性 ：type 定义输入框的类型 文本框 type="text“ 密码框 type=“password“ 提交框 type=“ submit“ 和 <button>提交按钮</button> 一样 按钮框 type=“button“ 单纯的按钮 重置框 type=“reset”清空的效果 2、 属性 ...
如何使用HTML创建表格和表单
理想主义的花最终会盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
03-04 3723
如何使用HTML创建表格和表单表格定义表格表单表单的创建 表格 定义表格 表格是用<table>元素来定义的如： <table border=n align="alignment" bgcolor="clr">....</table> 属性border用于定义表格边框的宽度，n可以是从0开始的整数，设置border=0和忽略border属性，浏览器不会显示边框。 属性align用于设置表格个的对齐方式，alignment可以是left、center、或right。
要求显示如下列表 写出html代码,【8】数据浏览表格的快速输出
weixin_34135138的博客
06-15 328
阅读目录在页面数据和控件的自动交换机制中，我们通过PageX实现了一种快速的控件和数据交换机制，能够方便快捷地完成数据库中的数据记录的管理。一般情况下，在进入这个编辑页面之前，还应该有另外一个页面，可以一次展示多条数据记录的信息。在这个数据的列表界面中，可以进行各种操作，如删除、跳转、编辑等。这个数据列表页面不仅可以按照数据库的分类展示数据，也可以根据需要进行展示，如按指定字段排序、根据查询结果展...
[html] 如果让你实现一个网页版的办公表格（类似excel），你觉得是否可行？如果可行应该怎么做？
歌谣的博客
03-10 440
[html] 如果让你实现一个网页版的办公表格（类似excel），你觉得是否可行？如果可行应该怎么做？ 尝试过写，底层还是用table,td,tr. 难点在于范围性选择单元格，横纵单元格合并互相不影响，底子不行，写的很失败。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
基于bootstrap，vue，jquery的前端列表、表格＜tr＞＜td＞展示
Who_Talk_To的博客
08-25 1053
前几天帮朋友开发一个基于javaweb的图书管理系统，由于没有很好用的列表、表格，因此自己动手写了一个满足自己使用，基于bootstrap，vue，jquery的前端列表展示，bootstrap可以多终端自适应，vue是基于数据端刷新js，jquery在主要运用Ajax，jquery在此功能中未使用。...
移动端简易表格，我不允许你还不会
qq_45989814的博客
11-29 1440
移动端表格，表格展示数据
怎么在HTML中插入表单
weixin_72702318的博客
03-12 2821
value是值，会被上传，但是用户填写的字符也是值，有的时候用户会更改这个值，你写上也是多此一举对吧，但是当用户选择了记住账号密码了，这个value就要有了。的，假如我们提交了一个数据，但是没有给它命名，服务器怎么能知道这是什么东西呢对吧，相对的，如果没有value，用户提交了，服务器也不会知道你提交的是什么，有些心细的同学已经发现了，我们做的是一个注册的页面，肯定是要上传文件的，那应该怎么上传呢，有的时候发现自己输错了好多东西，要重置页面怎么办呢。好啦，今天就到这里，同学们记得开心，记得按时复习。
HTML表格与表单
Gao_xu_sheng的博客
12-31 1450
网页常见表格w3school 在线教程存在即是合理的,表格在现在还是较为常用的一种标签，可以用来布局，但常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。标签名定义说明表格标签就是一个四方的盒子<tr></tr>表格行标签行标签要再table标签内部才有意义<td></td>单元格标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值