HTML实现产品基本信息表单--初入HTML2

最新推荐文章于 2022-08-04 11:12:43 发布

你的大数据学长

最新推荐文章于 2022-08-04 11:12:43 发布

阅读量6.7k

点赞数 12

分类专栏： HTML 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_43198568/article/details/104147845

版权

HTML实现产品基本信息表单--初入HTML2

预计效果图
部分代码展示
关键代码解释
结果展示

预计效果图

在这里插入图片描述

部分代码展示

完整代码可在我的GitHub中找到，链接在此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品基本信息表单</title>
</head>

<body>

<table border="0" align="center" cellspacing="0">

    <tr align="left" bgcolor="#dcdcdc">
        <th colspan="4" height="40">产品基本信息</th>
    </tr>

    <tr>
        <td height="40" width="100" align="right" style="color: red">*</td>
        <td width="70" align="left">产品名称</td>
        <td width="20" align="left"><img src="wenhao.jpg" width="13" height="13"></td>
        <td width="500" align="left">
            <form>
                <input type="text" name="产品名称" placeholder="如：PU女士手提包(CK12002)" style="width: 300px">
            </form>
        </td>
    </tr>

    <tr>
        <td height="40" width="100" align="right">&nbsp;</td>
        <td width="70" align="left">产品型号</td>
        <td width="20" align="left"><img src="wenhao.jpg" width="13" height="13"></td>
        <td width="500" align="left">
            <form>
                <input type="text" name="产品型号" style="width:220px">
            </form>
        </td>
    </tr>

    <tr>
        <td height="40" width="100" align="right" style="color: red">*</td>
        <td width="70" align="left">产品图片</td>
        <td width="20" align="left"><img src="wenhao.jpg" width="13" height="13"></td>
        <td width="500" align="left">
            <form>
                <input type="radio" name="产品图片" value="上传单张图片">上传单张图片
                <input type="radio" name="产品图片" value="上传多张图片">上传多张图片
                <p style="color: #999999;font-size: small;display: inline">您已提交10个多图产品，还可以提交0个</p>
            </form>
        </td>
    </tr>

    <tr>
        <td colspan="3">&nbsp;</td>
        <td width="500" align="left">
            <input id="anywhere-upload-input" data-action="anywhere-upload-input" class="hidden-visibility" type="file" accept=".jpg,.jpeg" multiple style="display: none">
            <script defer data-cfasync="false" src="https://imgchr.com/lib/Peafowl/js/scripts.min.js?7327332198c9e6bf7273393e2b94088a" id="jquery-js" onload="jQueryLoaded(this, event)"></script>
            <script defer data-cfasync="false" src="https://imgchr.com/lib/Peafowl/peafowl.min.js?7327332198c9e6bf7273393e2b94088a" id="peafowl-js"></script>
            <button data-trigger="anywhere-upload-input">本地上传