预计效果图
部分代码展示
完整代码可在我的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"> </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"> </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">本地上传</button>
<button type="button">从图片库选取</button>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left">
<p style="color: #999999;font-size: small;display: inline">-最多添加10个多图产品，每个多图产品最多展示8张图片。</p>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left">
<p style="color: #999999;font-size: small;display: inline">-jpg或jpeg格式；不超过300k。</p>
</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="text" name="关键词" style="width: 220px">
<p onclick="alert('建议设置简短且体现力强的关键词')" style="display: inline;color: blue">关键词建议</p>
</form>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left">
<a href="./关键词建议.html" target="_blank" style="color:blue;text-decoration-line: none">+添加更多关键词</a>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left">
<p style="color: #999999;font-size: small;display: inline">-请在每个文本框中输入一个用于描述您产品的关键词，并控制在48个字符以内。</p>
</td>
</tr>
<tr>
<td colspan="4"> </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"> </td>
<td width="500" align="left">
<form>
<button data-trigger="anywhere-upload-input">选择目录</button>
<code style="color: #999999;font-size: small">找不到想要的目录？</code>
<a data-trigger="anywhere-upload-input" style="font-size: small;color: blue">点这里。</a>
</form>
</td>
</tr>
<tr>
<td height="40" width="100"> </td>
<td width="70" align="left">产品分组</td>
<td width="20" align="left"> </td>
<td width="500" align="left">
<form action="/demo/demo_form.asp">
<input list="cpfz" placeholder="请选择产品组">
<datalist id="cpfz" name="产品分组" style="width:180px">
<option>衣服</option>
<option>食品</option>
<option>电器</option>
<option>饰品</option>
</datalist>
</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="800" align="left">
<form>
<input type="radio" name="产品描述" value="富文本">富文本
<input type="radio" name="产品描述" value="纯文本">纯文本
<p style="color: #999999 ;font-size: small;display: inline">您已提交23个富文本产品，还可以提交97。</p>
<select style="color: blue; appearance: none; outline: none">
<option style="color: white;alignment: right; outline: white; -webkit-appearance: none">编辑</option>
</select>
</form>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="800" align="left">
<iframe src="文本框.html" frameborder="0" width="600" height="300"></iframe>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left">
<p style="color: #999999;font-size: small;display: inline">-最多100个产品可使用富文本模式编辑，每个产品最多可以在描述里插入3张图片；jpg或jpeg格式。</p>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left">
<p style="color: #999999;font-size: small;display: inline">-文本内容控制在60-4000个字符内。</p>
</td>
</tr>
</table>
<br><br>
<table border="0" align="center" cellspacing="0">
<tr align="left" bgcolor="#dcdcdc">
<th colspan="4" height="40" width="1005">
产品贸易
<img src="wenhao.jpg" width="13" height="13">
<p style="color: #999999;font-size: small;display: inline">详细填写您的报价，让其更易被买家关注。</p>
<p style="display: inline">
</p>
<input align="right" type="checkbox">可洽谈
</th>
</tr>
<tr>
<td height="40" width="80" align="right" style="color: red">*</td>
<td width="90" align="left">最小起订量</td>
<td width="800" align="left">
<form>
<input type="text" name="最小起订量" style="width: 100px">
<select style="width: 100px">
<option>个</option>
</select>
<p style="display: inline;color: red">*</p>
<p style="display: inline">FOB价格(USD)</p>
<input type="text" name="最小起订量" style="width: 100px">
<select style="width: 100px">
<option>个</option>
</select>
</form>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td width="800" height="40" align="left">
<p style="color: blue;display: inline">+添加价格区间</p>
</td>
<td> </td>
</tr>
<tr>
<td height="40" width="80"> </td>
<td width="90" align="right">港口</td>
<td width="800" align="left">
<input type="text" width="500" style="width: 250pt">
</td>
<td> </td>
</tr>
<tr>
<td height="40" width="80" align="right" style="color: red">*</td>
<td width="90" align="left">支付方式</td>
<td width="800" align="left">
<form>
<input type="radio" name="支付方式" value="L/C">L/C
<input type="radio" name="支付方式" value="T/T">T/T
<input type="radio" name="支付方式" value="D/P">D/P
<input type="radio" name="支付方式" value="Paypal">Paypal
<input type="radio" name="支付方式" value="Money Gram">Money Gram
<input type="radio" name="支付方式" value="Western Union">Western Union
<input type="radio" name="支付方式" value="Others">Others
</form>
</td>
<td> </td>
</tr>
</table>
<br><br>
<table border="0" align="center" cellspacing="0">
<tr align="left" bgcolor="#dcdcdc">
<th colspan="4" height="40" width="1005">
展示字段自定义
<img src="wenhao.jpg" width="13" height="13">
<p style="color: #999999;font-size: small;display: inline">可以从产品属性、自定义属性、交易条件中选择2个自定义信息用于展示厅产品介绍页面的优先展示。</p>
</th>
</tr>
<tr>
<td height="40" width="80" align="right"> </td>
<td width="90" align="left">交易条件</td>
<td width="800" align="left">
<form>
<input type="checkbox">港口
<input type="checkbox">支付方式
</form>
</td>
<td> </td>
</tr>
<tr>
<td height="40" width="80" align="right"> </td>
<td width="90" align="left">产品属性</td>
<td width="800" align="left">
<form>
<input type="checkbox">外观
<input type="checkbox">应用
<input type="checkbox">成分
<input type="checkbox">目标市场
</form>
</td>
<td> </td>
</tr>
<tr>
<td height="40" width="80" align="right"> </td>
<td width="90" align="left">自定义属性</td>
<td width="800" align="left">
<form>
<input type="checkbox">FOB
<input type="checkbox">CFR
<input type="checkbox">CIF
<input type="checkbox">DAT
<input type="checkbox">FAS
<input type="checkbox">DDP
<input type="checkbox">DAP
<input type="checkbox">FOB
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
关键代码解释
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
输入
输入内容为text
<input type="text">
定义供文本输入的单行输入字段
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
在浏览器显示如下：
复选框
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
在浏览器显示如下：
点击响应
onclick：当点击按钮时执行一段 JavaScript
案例在此，点我点我
结果展示
在这里插入图片描述
其中点击本地上传、从图片库上传、选择目录、点这里都会打开本地文件框
点击关键词建议，会在当前页面出现建议
富文本编辑框功能都可用
