HTML 之 CSS form 表单和 table 表格

最新推荐文章于 2024-05-30 19:41:18 发布
最新推荐文章于 2024-05-30 19:41:18 发布
阅读量3.3k 收藏 5
点赞数
文章标签： html css 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huzongnan/article/details/79560497
版权

form 表单

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>form 表单</title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <!-- action: 表单要提交的服务器接口 -->
        <!-- method: 表单提交的方式,默认是 GET,一般用 POST -->
        <form action="" method="">
            <!-- 输入框 -->
            <!-- placeholder 占位符,给用户提示 -->
            <!-- value 最终要发送给服务器的值 -->
            <!-- name 给服务器值得时候标识这个值是什么值 -->
            <input type="text" placeholder="请输入用户名" 
            name="userName" value="baidu" />
            <br/>
            <input type="email" placeholder="请输入邮箱" 
            name="email"/>
            <br/>
            <label for="height">身高</label>
            <input id="height" type="text" placeholder="请输入身高" 
            name="height"/>
            <br/>
            <input type="password" placeholder="请输入密码" />
            <br/>
            <!-- 单选 -->
            <input type="radio" name="gender" value="男" />
            <input type="radio" name="gender" value="女" />
            <input type="radio" name="gender" value="保密" />
            <br/>
            <!-- 多选 -->
            <input type="checkbox" name="hobby" value="篮球" />
            <input type="checkbox" name="hobby" value="足球" />
            <input type="checkbox" name="hobby" value="网球" />
            <br/>
            <!-- 上传文件 -->
            <!-- multiple 上传多个文件 -->
            <input type="file" multiple />
            <br/>
            <!-- 按钮 -->
            <input type="button" value="我是一个按钮" />
            <br/>
            <!-- 隐藏属性 -->
            <!-- 收集一些不需要用户填写的信息,可以使用 hidden 
            类型 input -->
            <!-- 如注册设备类型是 Mac -->
            <input type="hidden" name="type" value="Mac" />
            <br/>
            <!-- 提交信息的按钮 -->
            <input type="submit" value="注册" />
            <br/>
            <!-- 清空表单信息 -->
            <input type="reset" value="清空" />
            <br/>

            <textarea></textarea>
            <!-- 下拉框 -->
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </form>
        <!-- 如果重置/提交按钮在 form 外,点击按钮是无效的,
        可以通过 form 属性管理到 form 表单的 ID 来绑定到一起 -->
        <!-- 换行 -->
        <div>测试<br/>测试</div>
    </body>
</html>

table 表格

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <style type="text/css">
            table{
                /* collapse: 合并边框 */
                /* separate: 不合并 */
                border-collapse: separate;
                /* hide: 不合并边框的时候,让空的单元格隐藏 */
                empty-cells: hide;
                text-align: center;
                /* vertical-align 该表表格垂直居中方式*/
                /* top middle bottom */
                /* inherit: 继承父级 */
                vertical-align: inherit;
            }
        </style>
    </head>
    <body>
        <!-- border: 边框,和 css 的 border 不一样 -->
        <!-- cellspacing: 单元格之间的间距 -->
        <!-- cellpadding: 单元格的内边距 -->
        <table border="1" width="200" height="100" 
        cellspacing="1" cellpadding="10">
            <!-- <caption></caption> -->
            <!-- <thead></thead> -->
            <!-- <tbody> -->
                <tr>
                    <!-- th 默认加粗居中 -->
                    <!-- th 设置宽度时,按比例分配 -->
                    <th width="450">1</th>
                    <th width="650">2</th>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
            <!-- </tbody> -->
            <!-- <tfoot></tfoot> -->
        </table>

        <table border="1" width="280" height="280">
            <tr>
                <td rowspan="2">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td colspan="2">2</td>
                <!-- <td>3</td> -->
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td rowspan="2" colspan="2">3</td>
                <!-- <td>4</td> -->
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <!-- <td>3</td> -->
                <!-- <td>4</td> -->
            </tr>
        </table>
    </body>
</html>

这里写图片描述
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>3个模块</title>
        <style type="text/css"></style>
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
        <div class="box">
            <!-- 标题 -->
            <div class="title">
                <!-- 搜店 -->
                <div id="Skanning">
                    <div class="Skanning">搜店</div>
                </div>
                <!-- 地址 -->
                <div id="site">
                    <div class="site">地址</div>
                </div>
                <!-- 优惠券 -->
                <div id="Coupon">
                    <div class="Coupon">优惠券</div>
                </div>
                <!-- 全文 -->
                <div id="full">
                    <div class="full">全文</div>
                </div>
                <!-- 视频 -->
                <div id="video">
                    <div class="video">视频</div>
                </div>
            </div>
            <!-- 索引框 -->
            <div class="indexbox">
                <img src="images/标签.png" alt="标签">
                <form action="">
                    <input type="text" placeholder="例如:荷棠鱼
                    坊烤鱼 或 樱花日本料理">
                    <input type="image" src="images/搜索.png" 
                    alt="搜索" class="serch">
                </form>
                <div>
                    金钱豹、大江南湘水之珠、德瑀楼
                    <br>
                    荷棠鱼坊烤鱼、SOHO尚都、湘味楼...
                </div>
            </div>
        </div>
    </body>
</html>

.box{
    margin: 20px auto;
    width: 960px;
    height: 115px;
    border: 1px #dbdbdb solid;
    border-radius: 10px;
}
.title{
    margin: 0 225px;
    width: 415px;
    margin-top: -10px;
}
#Skanning div, #site div,#Coupon div,#full div,#video div{
    width: 80px;
    height: 20px;
    border: 1px #f3d0c0 solid;
    float: left;
    background: #fdfdfd;
    border-radius: 5px 5px 0 0;
    margin-right: 1px;
    text-align: center;
    font-size: 14px;
    padding-top: 5px;
}
.Skanning1, .site1, .Coupon1, .full1, .video1{
    background: #d61519;
    height: 21px;
    color: write;
    display: none;
}
#Skanning:hover .Skanning, #site:hover .site, #Coupon:hover .Coupon, #full:hover .full, #video:hover .video{
    background: #d61519;
    color: white;
    height: 21px;
    margin-top: -1px;
    border: 1px #d61519 solid;
}
.indexbox{
    clear: both;
    border-radius: 10px;
    height: 70px;
    background: #d61519;
    margin-top: -20px;
}
.indexbox img{
    margin: -18px 0 0 30px;
    float: left;
}
input{
    text-indent: 1em;
    margin: 20px 0 0 38px;
    width: 408px;
    height: 20px;
    border-radius: 8px;
    color: #d61519;
}
input:placeholder {
    color: #000; 
    opacity:1; 
}
.indexbox .serch{
    float: left;
    width: 61px;
    height: 23px;
    margin: -25px 0 0 460px;
}
.indexbox div{
    width: 210px;
    color: white;
    float: right;
    font-size: 12px;
    margin-top: -30px;
    margin-right: 25px;
}

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <style type="text/css">
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="2">日期</td>
            <td colspan="2">天气现象</td>
            <td>气温</td>
            <td>风向</td>
            <td>风力</td>
        </tr>
        <tr>
            <td rowspan="2">22日星期五</td>
            <td>白天</td>
            <td>?</td>
            <td>晴间多云</td>
            <td>高温7℃</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
            <td>夜间</td>
            <td>?</td>
            <td>晴</td>
            <td>低温-4℃</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
            <td rowspan="2">23日星期六</td>
            <td>白天</td>
            <td>?</td>
            <td>晴</td>
            <td>高温9℃</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
            <td>夜间</td>
            <td>?</td>
            <td>阴</td>
            <td>低温-2℃</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
    </table>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作目标</title>
    <style type="text/css">
        table{
            text-align: center;
        }
        div{
            background: black;
        }
        .xiexian{
            background: url(xiexian.png);
            background-size: 100% 100%;  
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2" width="90" class="xiexian">项目&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp时间</td>
            <td colspan="8">效益目标</td>
            <td colspan="2">质量目标</td>
            <td>服务目标</td>
        </tr>
        <tr>
            <td width="90">总收入</td>
            <td width="90">个金收入</td>
            <td width="90">公司收入</td>
            <td width="90">信贷收入</td>
            <td width="90">利润</td>
            <td width="90">成本收入比</td>
            <td width="80">劳动生产率</td>
            <td width="90">人均贡献率</td>
            <td width="90">逾期金额</td>
            <td width="60">发案率</td>
            <td width="50">投诉率</td>
        </tr>
        <tr>
            <td height="50">全年计划</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="4">人均劳动生产率达到30万元</td>
            <td rowspan="4">人均贡献率达到 万元</td>
            <td></td>
            <td rowspan="4">严控各类案件,确保零发案率</td>
            <td rowspan="4">95580自营网点客户有理由投诉为零</td>
        </tr>
        <tr>
            <td height="50">截止--月份实际完成</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td height="50">时间进度%</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td height="50">超欠进度(绝对值)</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

http://blog.csdn.net/huzongnan/article/list

一個頭像用四年
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网站开发之HTML基础表格Table和表单Form（三）1
08-03
在网站开发中，HTML表格（Table）和表单（Form）是构建网页内容和交互的重要元素。本篇主要介绍HTML表格的基础知识，包括如何创建表格、合并单元格以及表格的对齐方式。同时，也会简要提及HTML表单的基础概念。 ...
实验三HTML表格与HTML表单优质资料.doc
12-02
本资源为实验三 HTML 表格与 HTML 表单优质资料，涵盖了 HTML 表格和 HTML 表单的相关知识点。通过本资源，读者可以掌握网页中插入表格数据的标记的用法、不规则表格的创建方法、表格外观控制属性的应用、HTML 表单...
关于HTML的form表单与table表格
2301_76802665的博客
04-02 1339
HTML它的全称为 HyperText Mark-up LanguageHTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页。
HTML ＜form＞＜/form＞和＜table＞＜/table＞组合使用
qq_27232945的博客
11-02 252
<form action="http://www.baidu.com"method="get"> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td> 用户名称： </td> <td> .
HTML表格基础
最新发布
dahongmao的博客
05-30 779
日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行整理，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页内容进行规划。标签用于定义表头单元格，其文本默认加粗居中显示，而标签定义的为普通单元格，其文本为普通文本且水平左对齐显示。表格的宽度和高度是自适应的，依靠表格内的内容来支撑，要想更改表格的尺寸，就需要对其应用宽度属性width和高度属性height。bgcolor 设置表格的背景颜色 颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)
HTML（五）
LeeBlog
06-03 240
5.网站注册页面: 5.1需求分析: 编写一个HTML注册页面, 显示效果如图所示 5.2技术分析: 表单标签 表单标签 action : 直接提交的地址 method : get 方式 默认提...
css之表单、表格
noveto的博客
11-17 314
【代码】css之表单、表格。
FormTable_html_Table_
09-28
本教程将深入探讨HTML中的表格（Table）元素，以及如何使用表格进行排版，同时也会涉及HTML表单（Form）的创建和使用，以及重要的CSS盒子模型。 1. HTML表格（Table）： - `<table>`：创建一个基本的表格，它是...
Layui事件监听的实现(表单和数据表格)
10-16
Layui是一款轻量级的前端框架，它提供了丰富的组件和便利的API，其中事件监听是其核心功能之一，特别在处理表单和数据表格时显得尤为重要。本文将深入讲解Layui中事件监听的实现，主要关注表单和数据表格。 **一、...
美观又功能齐全的HTML form表单
03-21
HTML表单是网页设计中不可或缺...总之，创建美观且功能齐全的HTML表单需要结合HTML、CSS和JavaScript的知识。通过合理的设计和实现，我们可以提供一个既直观又易于使用的表单，提升用户在网站或应用程序上的交互体验。
网站开发之HTML基础表格Table和表单Form（三）
热门推荐
杨秀璋的专栏
10-03 1万+
这篇文章主要介绍HTML两个比较重要的基础知识： - 表格Table及简单的网页布局 - 表单Form及Input控件 - 简单介绍HTML5新增Input控件 真心希望文章对你有所帮助，尤其是初学HTML网页知识的同学。如果文章中存在不足之处，还请海涵~
form与table的混合用法
BeautifulApple的博客
08-24 8359
通常是一个form里嵌套table 比如： &lt;form action='xx.php'&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;用户名：&lt;/td&gt; &lt;td&gt; &lt;input type='text' /&gt; &lt;/td&gt; &lt;tr&gt; &lt;/table&g
form表单提交的两种方式
grylf的博客
08-18 3238
form表单的两种方式：button(设置点击事件)和onsubmit； 1.方法一使用button提交的方式：                                姓名                                                                                          
HTML-表单table
奔跑的皮卡丘
12-14 1309
tableHMTL有专门负责表格的元素，table。创建一个表格要使用四个元素：<table>,<tr>,<th>,<td>。格式如下：<table> <caption>The table</caption> /*表单标题，默认显示上方*/ <tr> ／*行*／ <th>City</th> ／*表头*／ <th>Date</th> <t
CSS--表单
qq_43138577的博客
09-05 350
form：定义一个表单区域，可以获取用户输入的数据，所有的表单元素放在form标签里面 <form action="提交的地址" method="提交方式默认为get">表单元素</form> input：输入框，不同类型会让该元素有不同的含义 select：下拉列表 option：下拉列表的选项 简单的下拉列表： select> <option value ="javascript">Javascript</option> &..
js的form表单的table操作
GDYG5的博客
07-16 1078
table操作： 1、删除行 行对象.rowIndex//返回行对象的角标 表格对象.deleteRow(要删除的行对象的角标); 2、添加行 表格对象.insertRow(添加行的角标); 行对象.insertCell(添加列的角标); 3、复制行 先添加行 把要复制的行信息添加到所添加的行中 ...
form和table的区别
weixin_55391257的博客
07-08 2557
html中form表示一个表单，用来把一系列的控件包围起来，然后再统一发送这些数据到目标。比如最常见的注册，你说需要填写的资料，都是被封装在form里的，填写完毕后，提交form内的内容，如果不在form内则不会提交。 而table则是用来布局的，当你填写资料的时候，你有没有发现页面所提供的文本框,文字,按钮之类的都摆放的非常整齐?这就是table的作用，一行一行的以表格的形式展示内容，table仅仅只是用来布局用的,form则是用来封装数据的。 二者在概念上是不同的,通常发挥作用的是form，但是fo
web前端笔记.docx
11-18
"这是一份关于web前端开发的学习笔记，涵盖了从web基础概念到HTML的深入讲解，包括HTML表格和框架的使用以及表单的构成。笔记适合初学者系统学习web前端知识。" 在web前端开发中，首先要理解的是web的概念。Web，即...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值