一、实验内容
- 编程实现下面表单：
二、实验代码及成品
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>产品基本信息表单</title>
<style type="text/css"> <!-- 去掉网页的横线 -->
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body>
<table border="0" align="center" cellspacing="0">
<tr align="left" bgcolor="#d3d3d3">
<th colspan="4" height="40">产品基本信息</th>
</tr>
<tr>
<td height="40" width="100" align="right" style="color: red">*</td>
<td width="70" align="right">产品名称</td>
<td width="20" align="left"><img src="wenhao.png" width="15" height="15"></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="right">产品型号</td>
<td width="20" align="left"><img src="wenhao.png" width="15" height="15"></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="right">产品图片</td>
<td width="20" align="left"><img src="wenhao.png" width="15" height="15"></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 data-trigger="anywhere-upload-input">从图片库选取</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个多图产品，每个多图产品最多展示6张图片。</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 colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td width="70" align="right">
<form>
<code style="color: red">*</code>
<code width="70" align="right" style="font-size: medium ; font-family: 等线">关键词</code>
</form>
</td>
<td width="20" align="left"><img src="wenhao.png" width="15" height="15"></td>
<td width="500" align="left">
<form>
<input type="text" name="关键词" style="width: 220px">
<a href="http://www.chanpin.biz/" target="_blank" style="color: #0045be;text-decoration-line: none">关键词建议</a>
</form>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td width="500" align="left"><img src="jiahao.png" width="13" height="13">
<a href="http://www.chanpin.biz/" target="_blank" style="color: #0045be;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> </td>
<td colspan="2" width="70" align="right">
<form>
<code style="color: red">*</code>
<code width="70" align="right" style="font-size: medium ; font-family: 等线">产品类别 </code>
</form>
</td>
<td width="500" align="left">
<form>
<button data-trigger="anywhere-upload-input">选择目录</button>
<code style="font-size: small">找不到想要的目录？</code>
<a data-trigger="anywhere-upload-input" style="font-size: small;color: #0045be">点这里</a>
<code style="font-size: small">。</code>
</form>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2" width="70" align="right">
<form>
<code width="70" align="right" style="font-size: medium ; font-family: 等线">产品分组 </code>
</form>
</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>
</datalist>
</form>
</td>
</tr>
<tr>
<td height="40" width="100" align="right" style="color: red">*</td>
<td width="70" align="right">产品描述</td>
<td width="20" align="left"><img src="wenhao.png" width="15" height="15"></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: #0045be; 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="700" 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格式；不超过300k。</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.png" width="15" height="15">
<p style="color: #999999;font-size: small;display: inline">详细填写您的报价，让其更易被买家关注。</p>
<p style="display: inline">
</p>
<input align="right" type="checkbox">可洽谈
</th>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="2" align="right">
<form>
<code style="color: red">*</code>
<code width="200" align="right" style="font-size: medium; font-family: 等线">最小订单量 </code>
</form>
</td>
<td width="800" align="left">
<form>
<input type="text" name="最小起订量" style="width: 100px">
<select style="width: 100px">
<option>个</option>
<option>升</option>
<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>
<option>升</option>
<option>千克</option>
</select>
</form>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td width="800" height="40" align="left">
<img src="jiahao.png" width="13" height="13">
<p style="color: #0045be;display: inline">添加价格区间</p>
</td>
<td> </td>
</tr>
<tr>
<td height="40" width="100"> </td>
<td width="100" align="right" style="font-size: medium">港口 </td>
<td width="800" align="left">
<input type="text" width="500" style="width: 250pt">
</td>
<td> </td>
</tr>
<tr>
<td colspan="2" width="70" align="right">
<form>
<code style="color: red">*</code>
<code width="70" align="right" style="font-size: medium; font-family: 等线">支付方式 </code>
</form>
</td>
<td width="800" align="left">
<form>
<input type="checkbox" name="支付方式" value="L/C">L/C
<input type="checkbox" name="支付方式" value="T/T">T/T
<input type="checkbox" name="支付方式" value="D/P">D/P
<input type="checkbox" name="支付方式" value="Paypal">Paypal
<input type="checkbox" name="支付方式" value="Money Gram">Money Gram
<input type="checkbox" name="支付方式" value="Western Union">Western Union
<input type="checkbox" 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.png" width="15" height="15">
<p style="color: #999999;font-size: small;display: inline">可以从产品属性、自定义属性、交易条件中选择2个自定义信息用于展示厅产品介绍页面的优先展示。</p>
</th>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td height="40" width="100" align="right"> </td>
<td width="100" align="right">交易条件 </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="right">产品属性 </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="right">自定义属性 </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>
