form within table-row tag

Question

Is it OK to write a form within the tr tag?

<table>
    % for my $word ( @$words_2 ) {
        <tr>
            <form action="/blacklist" method="post">
            <td><%=$word%></td>
            <td><input type="text" name="data" readonly hidden value="<%=$word%>" /></td>
            <td><input class="remove" type="submit" value="Remove" /></td>
            </form> 
        </tr>
    % }
</table>

Answer 1

The tr doesn't allow form-tags as direct children. Most modern browsers will let you do a lot of crap and so you could use this - but I wouldn't call it OK. A better approach would be to but the complete form into one of the tds (tds allow text, forms, inline- and block-elements as children):

<table>
    <% for my $word ( @$words_2 ) { %>
        <tr>
            <td><%=$word%></td>
            <td>
              <form action="/blacklist" method="post">
                <input type="text" name="data" readonly hidden value="<%=$word%>" />
                <input class="remove" type="submit" value="Remove" />
              </form> 
            </td>
        </tr>
    <% } %>
</table>

or, a lot easier, simply use a link (but note that data gets sent using GET instead of POST - maybe you'll have to change something in your code that handles the blacklisting):

<table>
    <% for my $word ( @$words_2 ) { %>
        <tr>
            <td><%=$word%></td>
            <td><a href="/blacklist?data=<%=$word%>">Remove</a></td>
        </tr>
    <% } %>
</table>

Answer 2

Is it OK to write a form within the tr tag?

No. Forms can contain tables. Table cells can contain forms.

I'd approach this problem like so:

<form action="/blacklist" method="post">
    <fieldset>
    <legend>Remove</legend>
    % for my $word ( @$words_2 ) {
    <label>
        <input type="checkbox" name="data" value="<%=$word%>" />
        <%=$word%>
    </label>
    % }
    </fieldset>
    <input class="remove" type="submit" value="Remove" />
</form>

Answer 3

No, that is not correct. The form tag has to be outside the table or inside a table cell.

Putting the form tag inside the table is an old trick to keep the form from taking up extra space. You should just use CSS for that:

form { margin: 0; padding: 0; }