我有一个项目，我试图将旧样式转换为更现代的形式。表单是 multipart / form-data ，并且每个表行有多个输入字段和不同的提交选项。下面是一些截图和代码的副本。我希望它有意义，因为我已经将代码缩减为单行以使其更小。通常这种形式可以增长到数百行。
我到处搜索过，我不会进入我尝试过的所有变种，但是我最接近它的工作是使用<button>标签，但是，它不会发布到服务器
以下是我正在使用的代码的jsfiddle：http://jsfiddle.net/kbbz19zm/
<form method="post" action="/CM/cmach" enctype="multipart/form-data" onreset="document" name="edittmpl">
<table class="accts" border="2" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<h4>Participant</h4>
</td>
<td align="center">
<h4>ABA</h4>
</td>
<td align="center">
<h4>Account</h4>
</td>
<td align="center">
<h4>Tran Type</h4>
</td>
<td align="center">
<h4>Amount</h4>
</td>
<td align="center">
<h4>ID Num</h4>
</td>
<td align="center">
<h4>Disc Data</h4>
</td>
<td align="center">
<h4>Addenda Info</h4>
</td>
<td align="center">
<h4>Actions</h4>
</td>
</tr>
<tr class="tabledetail">
<td align="center">
<h6>Joe Schmoe</h6>
</td>
<td align="center">
<h6>0101010101</h6>
</td>
<td align="center">
<h6>CK - 10001000111001</h6>
</td>
<td class="blankcell1" align="left">
<h6><label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Withdrawal" />Withdrawal</label><br /> <label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Deposit" checked="checked" />Deposit</label><br /></h6>
</td>
<td class="blankcell1" align="center">
<input name="part_amount_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="14" type="text" value="0.00" size="8" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="part_id_num_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="15" type="text" value="" size="8" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="part_disc_data_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="2" type="text" value="" size="1" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="part_addenda_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="80" type="text" value="" size="15" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="edit_tmpl_part_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="submit" value="Update" />
<input name="del_tmpl_part_conf_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="submit" value="Delete" />
</td>
</tr>
</table>
<input name="edit_switch" type="hidden" value="on" />
<input name="tmpl_val" type="hidden" value="Schmoe Enterprises" />
</form>
以下是目前有效的截图以及我想要实现的目标。 当前正在使用input type =“submit”：
编辑：由于某种原因论坛不喜欢此链接作为图片，我会再试一次。 http://s4.postimg.org/5a3hokc9p/Image3.png
答案 0 :(得分：0)
如果您希望它像提交按钮一样，请使用type="image"作为输入。您可以使用src属性为其设置图像。
<td class="blankcell1" align="center">
<input name="edit" type="image" src="http://placehold.it/20x20">
<input name="delete" type="submit" value="Delete">
</td>
演示：
table{border:solid CornflowerBlue 1px;border-radius:8px;margin-left:auto;margin-right:auto;max-width:1024px;-webkit-box-shadow:0 3px 5px 0 rgba(128,128,128,0.9);-moz-box-shadow:0 3px 5px 0 rgba(128,128,128,0.9);box-shadow:0 3px 5px 0 rgba(128,128,128,0.9)}
h1{text-align:left;font-family:"Open Sans",helvetica;font-weight:bold;font-size:20px;color:#f9f3f3;margin:8px;border:0;text-shadow:0 1px 0 rgba(32,32,192,0.4),0px -1px 0 rgba(32,32,192,0.2)}
h2{font-family:"Open Sans",helvetica;font-weight:bold;font-size:18px;color:#f9f3f3;margin:8px;border:0;text-align:left;padding:2px 0 4px 10px;border-radius:8px;background:url(/images/tablebg.png) center repeat-x;background-size:auto 100%;background:linear-gradient(#5c90be,#0053a0);max-width:1016px;text-shadow:0 1px 0 rgba(32,32,192,0.4),0px -1px 0 rgba(32,32,192,0.2)}
h5{font-family:"Open Sans",helvetica;font-weight:bold;font-size:16px;color:#50575d;margin:4px;border:0;text-shadow:0 1px 0 rgba(32,32,32,0.1),0px -1px 0 rgba(32,32,32,0.1)}
h5.messagetext{font-family:"Open Sans",helvetica;font-weight:normal;font-size:16px;color:#c9c3c3;margin:4px;border:0;padding:2px 2px 2px 2px;text-shadow:0 1px 0 rgba(32,32,32,0.1),0px -1px 0 rgba(32,32,32,0.1)}
h3{font-family:"Open Sans",helvetica;font-weight:bold;color:#333;font-size:12px;margin:0;padding:0 2px 2px 5px}
#tc297{width:297px}
#tc97{width:97px}
#tc25{width:25px}
table{background-color:#fff}
td{border:0}
h4{font-family:"Open Sans",helvetica;font-weight:bold;color:#333;font-size:12px;margin:6px}
tr.tabledetail{background-color:#f7f7f7;border-radius:8px}
tr.tabledetail1{background-color:#efefef;border-radius:8px}
h6{font-family:"Open Sans",helvetica;font-weight:normal;color:#333;font-size:12px;margin:0;padding:2px 5px 2px 5px}
td.pad3{padding:3px}
td.title{background-color:#fff;border-bottom:1px CornflowerBlue solid;border-radius:8px;-webkit-box-shadow:0 0 7px 0 rgba(192,192,192,1);-moz-box-shadow:0 0 7px 0 rgba(192,192,192,1);box-shadow:0 0 7px 0 rgba(192,192,192,1)}
td.pad_bottom_border{padding-bottom:8px;border-bottom:1px CornflowerBlue solid;border-radius:8px}
td.tablelabelleft{border-bottom:1px white solid;border-top:1px white solid;border-radius:8px}
td.tablelabellefttopright{border-left:1px white solid;border-top:1px white solid;border-right:1px white solid;border-radius:8px}
td.tablelabellefttop{border-left:1px white solid;border-top:1px white solid;border-radius:8px}
td.tablelabel{border-bottom:1px white solid;border-left:1px white solid;border-top:1px white solid;border-radius:8px}
td.tablebottom{border-top:1px white solid;padding:2px;border-radius:8px}
td.blankcellb{border-left:1px white solid;border-radius:8px}
td.blankcellb1{border-left:1px white solid;border-radius:8px}
tbody tr.tabledetail:hover{background:#dce2e6}
tbody tr.tabledetail1:hover{background:#dce2e6}
input{font-family:"Open Sans",helvetica;color:#333;font-weight:normal;font-size:12px}
textarea{font-family:"Open Sans",helvetica;color:#333;font-weight:normal;font-size:12px}
select{font-family:"Open Sans",helvetica;color:#333;font-weight:normal;font-size:12px}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url('/css/open_sans_light.woff') format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url('/css/open_sans.woff') format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'),local('OpenSans-Semibold'),url('/css/open_sans_semibold.woff') format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url('/css/open_sans_bold.woff') format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url('/css/open_sans_italic.woff') format('woff')}<form method="post" action="/CM/cmach" enctype="multipart/form-data" onreset="document" name="edittmpl">
<table class="accts" border="2" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<h4>Participant</h4>
</td>
<td align="center">
<h4>ABA</h4>
</td>
<td align="center">
<h4>Account</h4>
</td>
<td align="center">
<h4>Tran Type</h4>
</td>
<td align="center">
<h4>Amount</h4>
</td>
<td align="center">
<h4>ID Num</h4>
</td>
<td align="center">
<h4>Disc Data</h4>
</td>
<td align="center">
<h4>Addenda Info</h4>
</td>
<td align="center">
<h4>Actions</h4>
</td>
</tr>
<tr class="tabledetail">
<td align="center">
<h6>Joe Schmoe</h6>
</td>
<td align="center">
<h6>0101010101</h6>
</td>
<td align="center">
<h6>CK - 10001000111001</h6>
</td>
<td class="blankcell1" align="left">
<h6><label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Withdrawal" />Withdrawal</label><br /> <label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Deposit" checked="checked" />Deposit</label><br /></h6>
</td>
<td class="blankcell1" align="center">
<input name="part_amount_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="14" type="text" value="0.00" size="8" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="part_id_num_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="15" type="text" value="" size="8" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="part_disc_data_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="2" type="text" value="" size="1" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="part_addenda_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="80" type="text" value="" size="15" override="1" />
</td>
<td class="blankcell1" align="center">
<input name="edit_tmpl_part_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="image" src="http://placehold.it/30&text=U" />
<input name="del_tmpl_part_conf_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="image" src="http://placehold.it/30&text=D" />
</td>
</tr>
</table>
<input name="edit_switch" type="hidden" value="on" />
<input name="tmpl_val" type="hidden" value="Schmoe Enterprises" />
</form>
答案 1 :(得分：0)
感谢您的回复。我最终放弃使用图标按钮的实际图像，而是使用类似于webdings或wingdings的自定义字体，以及一些CSS样式。
以下是代码和屏幕截图：
HTML：
<input name="mark_batch_conf_2015006:_:1" class="buttonIcons" title="Mark" type="submit" value="m" id="blue" />
<input name="edit_batch_2015006:_:1" class="buttonIcons" title="Edit" type="submit" value="a" id="orange" />
CSS
.buttonIcons {
font-family:"Icons", helvetica;
color:#636363;
font-weight:normal;
font-size:24px;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
margin: 0px;
padding: 0px 0px 0px 0px;
display: inline-block;
vertical-align: baseline;
border-radius: 15px;
outline: none;
border: none;
cursor: pointer;
background: transparent;
}
#blue { color: #5e83cc; }
#blue:hover ,
#blue:active {
text-shadow: 1px 1px 2px rgba(192, 192, 192, 0.9);
transition: color 0.2s ease-in;
position: relative;
top: -1px;
left: -1px;
color: #539cd0;
}
我使用的字体：Sosa-Regular（http://tenbytwenty.com/?xxxx_posts=sosa）
