我应该使用<form>而不是这里吗?<table> </table> </form>

时间:2014-01-05 00:24:52

标签: html

我正在尝试创建一个字段集合。这些字段需要使用Jquery进行验证。这样我就可以显示警告,例如字段是空的。然后我需要将输入的数字输入每个字段,&amp;在php中将它们等等(以保持公式私有)。我应该在这里使用<form>代替<table>吗?

<table class="no-top-border">
            <tr class="no-top-border">
                <td class="quarter-width field-label hide-mobile no-top-border">
                    <label for="material">Operation Type</label>
                </td>
                <td class="field-value no-top-border">
                    <p class="show-mobile mobile-label">Operation Type</p>
                    <select name="is_robotic" id="is_robotic">
                        <option value="1">Robotic Welding</option>
                        <option value="0">Manual Welding</option>
                    </select>
                    <p class="error-text"></p>
                </td>                           
            </tr>

            <tr>
                <td class="field-label hide-mobile">
                    <label for="number_of_welds">Number of Welds</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Number of Welds</p>
                    <input autocomplete="off" type="number" id="number_of_welds" name="number_of_welds" class="calculator-field yellow-bg first-inputs" title="Enter number of welds" min="0" />
                    <p class="error-text"></p>
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="number_of_construction_welds">Number of Construction Welds</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Number of Construction Welds</p>
                    <input autocomplete="off" type="number" id="number_of_construction_welds" name="number_of_construction_welds" class="calculator-field yellow-bg first-inputs" title="Enter number of construction welds" min="0" />
                    <p class="error-text"></p>
                </td>
            </tr>

            <tr>
                <td class="field-label hide-mobile">
                    <strong>Quantity of Parts to Load</strong>
                </td>
                <td class="field-value">&nbsp;</td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="holes">Under 1kg</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Under 1kg</p>
                    <input autocomplete="off" type="number" name="load_weight_1" id="load_weight_1" class="calculator-field green-bg first-inputs" title="Enter weight to load under 1 kg" min="0" placeholder="(optional)" />
                    <p class="error-text"></p>
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="holes">Between 1kg and 8kg</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Between 1kg and 8kg</p>
                    <input autocomplete="off" type="number" name="load_weight_2" id="load_weight_2" class="calculator-field green-bg first-inputs" title="Enter weight to load between 1 kg and 8 kg" min="0" placeholder="(optional)" />
                    <p class="error-text"></p>
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="holes">Between 8kg and 12kg</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Between 8kg and 12kg</p>
                    <input autocomplete="off" type="number" name="load_weight_3" id="load_weight_3" class="calculator-field green-bg first-inputs" title="Enter weight to load between 8 kg and 12 kg" min="0" placeholder="(optional)" />
                    <p class="error-text"></p>
                </td>
            </tr>

            <tr>
                <td class="field-label hide-mobile">
                    <strong>Quantity of Parts to Unload</strong>
                </td>
                <td class="field-value">&nbsp;</td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="holes">Under 1kg</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Under 1kg</p>
                    <input autocomplete="off" type="number" name="unload_weight_1" id="unload_weight_1" class="calculator-field green-bg first-inputs" title="Enter weight to unload under 1 kg" min="0" placeholder="(optional)" />
                    <p class="error-text"></p>
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="holes">Between 1kg and 8kg</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Between 1kg and 8kg</p>
                    <input autocomplete="off" type="number" name="unload_weight_2" id="unload_weight_2" class="calculator-field green-bg first-inputs" title="Enter weight to unload between 1 kg and 8 kg" min="0" placeholder="(optional)" />
                    <p class="error-text"></p>
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="holes">Between 8kg and 12kg</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Between 8kg and 12kg</p>
                    <input autocomplete="off" type="number" name="unload_weight_3" id="unload_weight_3" class="calculator-field green-bg first-inputs" title="Enter weight to unload between 8 kg and 12 kg" min="0" placeholder="(optional)" />
                    <p class="error-text"></p>
                </td>
            </tr>

            <tr>
                <td class="hide-mobile"></td>
                <td><button id="clear-button" class="btn-red">Clear all data</button></td>
            </tr>
            <tr class="no-borders">
                <td colspan="2" class="no-borders"><hr></td>
            </tr>

            <tr class="no-top-border">
                <td class="field-label hide-mobile no-top-border">
                    <strong>Outputs</strong>
                </td>
                <td class="field-value no-top-border">&nbsp;</td>
            </tr>

            <tr>
                <td class="field-label hide-mobile">
                    <label for="loading_unloading">Loading / Unloading</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Loading / Unloading</p>
                    <input autocomplete="off" name="loading_unloading" id="loading_unloading" type="text" readonly="readonly" class="calculator-field" />
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="robot_addr_in_out">Robot address in / out</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Robot address in / out</p>
                    <input autocomplete="off" name="robot_addr_in_out" id="robot_addr_in_out" type="text" readonly="readonly" class="calculator-field" />
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="weld_time">Weld time</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Weld time</p>
                    <input autocomplete="off" name="weld_time" id="weld_time" type="text" readonly="readonly" class="calculator-field" />
                </td>
            </tr>
            <tr>
                <td class="field-label hide-mobile">
                    <label for="controlling_cycle">Controlling cycle</label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Controlling cycle</p>
                    <input autocomplete="off" name="controlling_cycle" id="controlling_cycle" type="text" readonly="readonly" class="calculator-field" />
                </td>
            </tr>

            <tr>
                <td colspan="2">&nbsp;</td>
            </tr>


            <tr>
                <td class="field-label hide-mobile">
                    <label for="total_time">Total time <small>(secs)</small></label>
                </td>
                <td class="field-value">
                    <p class="show-mobile mobile-label">Total time <small>(secs)</small></p>
                    <input autocomplete="off" name="total_time" id="total_time" type="text" readonly="readonly" class="calculator-field" />
                </td>
            </tr>

                <tr>
                <td class="hide-mobile"></td>
                <td><button id="spot-welding-calculate-button"  class="btn-blue">Calculate cycle time</button></td>
            </tr>
        </table>

2 个答案:

答案 0 :(得分:2)

如果您要传输数据,则应使用form

您可以在table内使用form

顺便说一下,我还建议使用fieldset,这是一个很好的字段元素。

答案 1 :(得分:2)

更好的语义HTML。使用<form>代替<table>