Html表单

于 2022-12-07 17:11:19 发布
阅读量277 收藏 1
点赞数 1
分类专栏： HTML 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59861678/article/details/128223585
版权

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <link rel="stylesheet" href="./01.css">
</head>



<body>
    <table>
        <thead>
            <tr>
                <td colspan="8">
                    <h2>西红柿首付</h2>
                </td>
            </tr>
            <tr>
                <td colspan="8">地址：北京东路180号</td>
            </tr>
            <tr>
                <td colspan="8">TEL：12345689 Fax:78946</td>
            </tr>
            <tr>
                <td colspan="8">
                    <h3>送货单</h3>
                </td>
            </tr>
            <tr class="Lfte_tr01">
                <!-- colspan="2"单元格横向合并-->
                <td colspan="3">客户名称：</td>
                <td colspan="3">客户电话：</td>
                <td>制单人员：</td>
            </tr>
            <tr class="Lfte_tr01">
                <td colspan="3">客户地址：</td>
                <td colspan="3">联系人：</td>
                <td>送货日期：</td>
                <td>2022/12/1</td>
            </tr>
        </thead>



        <tbody>

            <tr>
                <th>序号</th>
                <th>产品名称</th>
                <th>规格</th>
                <th>单位</th>
                <th>数量</th>
                <th>单位</th>
                <th>金额</th>
                <th>备注</th>
                <!--rowspan单元格竖向排序-->
                <td class="Tip01" rowspan="9">
                    <span>白联吧的</span>
                </td>
                <td class="Tip01" rowspan="9">
                    <span>黄联几章</span>
                    <span>会给你的</span>
                    <span>金凤凰个</span>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>7</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="5">金额合计（大写）：</td>
                <td colspan="3">小写金额:</td>
            </tr>
        </tbody>



        <tfoot>
            <tr>
                <td colspan="8">以上货品请核对数量，如有质量问题，请在收货后通知本公司，预期恕不负责</td>
            </tr>
            <tr>
                <td colspan="5">送单位及经手人（盖章）</td>
                <td colspan="3">收货单位及经手人（盖章）</td>
            </tr>
        </tfoot>



    </table>
</body>

</html>

*{
    margin: 0;
    padding: 0;
}
.Lfte_tr01 td{
    text-align: left;
}
table{
    /* 边框合并 */
    border-collapse: collapse;
    margin: 0px auto;
    width: 800px;
    height: 30px;

    margin-top: 30px;
}
table tr th,table tr td{
    border: 1px solid black;
    text-align: center;
    height: 25px;
}

thead tr td,tfoot tr td,.Tip01{
    /* 边框设置为0 */
    border: none;                         
}
.Tip01{
    /* 字体颜色的深浅（加粗） */
    font-weight: 1;   
    width: 25px;
    font-size: 13px;
}
.Tip01 span{
    display: inline-block;
    padding-bottom: 20px;
}

丽绮
关注
专栏目录
HTML表单
前端小白的成长之路
05-29 2041
基本标签 HTML 表单用于搜集不同类型的用户输入 总结： 定义标签<form> 输入标签<input>，类型有：text;radio;submit 举例： 1.text： <input type="text" name="firstname">name只是为该文本框起了个名字 2.radio <input type="radio" name="sex" value="male" checked>Male valued为赋值
顺丰快递单html
11-17
顺丰快递单html div css 顺丰打印模版demo
html快递单排版，支持右键保存图片
Stavin Li的博客
11-20 642
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="print-container" style=...
快递单模板html.rar
09-30
快递单模板，使用html+css+js实现，前端模板，数据可从后台获取并自己实现打印
用html制作发货单,使用excel制作发货单和送货单模板教程
weixin_28942523的博客
06-26 2266
使用excel制作发货单和送货单模板教程 (11页) 本资源提供全文预览，点击全文预览即可全文预览,如果喜欢文档就下载吧，查找使用更方便哦！19.90 积分Excel 制作发货单制作发货单,送货单模板的教程送货单模板的教程第一步第一步:请先使用请先使用 Excel 制作完成你的模板制作完成你的模板(如下图如下图)在表格模板设计的时候,有几个要注意的地方注意的地方,你要填写值的地方必需是一个独立的...
顺丰快递单模板html.zip
06-21
顺丰快递单模板html+css.zip 快递单模板，使用html+css+js实现，前端模板，数据可从后台获取并自己实现打印
html在线快递单号打印,HTML 快递打印模板
weixin_39704314的博客
06-03 242
无标题文档functionshow(){window.print();}*{margin:0px;padding:0px;}#zhu{border:1px solid #CCCCCC;margin:auto;width:400px;height:750px;}#sheji{border:1px #FF0000;margin:60px auto;width:370px;height:650px;}...
表单智能填充，数据复制到文本域，智能填充到表单，html表单提交
05-27
html，表单自动填充，避免重复性工作，一个一个填写，复制粘贴到文本域，自动识别对应表单属性，复制之后自动识别，点击提交就行了。超级简单，有什么不懂的可以直接私信问我。
camundaCurl:使用curl使用html表单部署流程模型
03-22
camundaCurl 使用curl使用html表单部署流程模型 Camunda Modeler（截至2021年3月）无法部署用于UserTasks的自定义html表单。 局限性 手动编辑包含curl命令的bash文件 假设bpmn和html文件位于当前目录中。
编写快递录入单的html代码,035 工作单快速录入 - bos(示例代码)
weixin_39776991的博客
06-18 552
一、前台代码理解及修改1.新增行也可完成提交原来编辑的行功能(如果有在编辑的行)//全局变量var editIndex;function doAdd() {if (editIndex != undefined) {//表示有一行正在编辑，先结束编辑的行(会触发onAfterEdit)$("#grid").datagrid(‘endEdit‘, editIndex);}//没有行在编辑状态才能进行新...
html收据模板
10-31
html收据模板
DIV+CSS绘制JD电子面单初稿
lanqibaoer的专栏
03-26 903
<style> .content{ width:96mm; /* height:109mm; */ border:0px solid blue; margin-left: 2mm; margin-bottom: 2mm; margin-top: 2mm; } .bar...
制作html快递单,京东输入快递单号.html
weixin_39633252的博客
06-17 910
Document.search {position: relative;width: 178px;margin: 100px;}.con {display: none;position: absolute;top: -40px;width: 175px;border: 1px solid rgba(0, 0, 0, 0.2);box-shadow: 0 2px 4px rgba(0, 0, 0, ...
html css js实现快递单打印_使用html+css+js实现弹球游戏
weixin_39655689的博客
11-25 239
php中文网最新课程每日17点准时技术干货分享使用html+css+js实现弹球游戏代码如下，复制即可使用：<head> <style type="text/css"> .panel{ position: relative; z-index: 0; top:0px; ...
html在线快递单号打印,HTML 快递打印模板(示例代码)
weixin_39728909的博客
06-03 976
无标题文档functionshow(){window.print();}*{margin:0px;padding:0px;}#zhu{border:1px solid #CCCCCC;margin:auto;width:400px;height:750px;}#sheji{border:1px #FF0000;margin:60px auto;width:370px;height:650px;}...
圆通快递模板html_快递鸟物流电子面单批量打印以及模板设置
weixin_39568781的博客
12-17 2992
快递鸟作为国内目前最大的第三方物流接口服务商，电子面单可一次性对接30多家主流快递快运公司接口，调用接口时快递鸟会向物流公司请求单号，并实时返回，可直接打印电子面单发货。快递鸟支持EMS(EMS)、顺丰速运(SF)、邮政国内标快(YZBK)、邮政快递包裹(YZPY)、宅急送(ZJS)、联昊通速递(LHT)、全一快递(UAPEX)、申通快递(STO)、德邦快递(DBL)、京东快递(JD)、...
JS实现快递单打印功能
liwei26的博客
06-20 7913
JS实现快递单打印功能 最近做项目需要打印快递单，在网上搜索了一下发现直接给出代码的比较少。 首先说一下js网页打印的几种方法： 1.window.print() 会弹出打印对话框 2.使用html 标签引入Webbrowser控件 这种方式是其只兼容IE10以下的浏览器，其他浏览器不可使用 3.document.execCommand(”print”) 类似window.prin...
快递单打印html模版,HTML 快递打印模板
weixin_42484858的博客
06-27 805
无标题文档functionshow(){window.print();}*{margin:0px;padding:0px;}#zhu{border:1px solid #CCCCCC;margin:auto;width:400px;height:750px;}#sheji{border:1px #FF0000;margin:60px auto;width:370px;height:650px;}...
html表单
最新发布
05-31
HTML表单是一个用户界面元素，它包含用于收集用户输入的各种表单元素，例如文本输入框、下拉列表、单选按钮、复选框等。当用户提交表单时，它将被发送到服务器进行处理。以下是一个简单的HTML表单示例： ```html <form action="/submit-form" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Submit</button> </form> ``` 这个表单包括三个表单元素：一个文本框、一个电子邮件输入框和一个文本区域，以及一个提交按钮。当用户点击提交按钮时，表单数据将被发送到服务器的“/submit-form”端点，使用POST方法。此外，每个表单元素都有一个“required”属性，这意味着用户必须填写它们才能提交表单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值