CODEWITHSUNDEEP
htmlformspostinput
user3463645
user3463645

Reputation: 126

Table with multiple rows doesn't work with forms in HTML

Basically, I have a table with inputs inside a form tag, that are required by user to fill in.

When I test it, the form is working, but only when there is one row in a table. With two an more rows, a required attribute is not working.

I've written a simple example

This works, click enter inside input field to see.

<form>
  <table>
  <tr>
    <td>
      <input type="text" name="usrname" required>
    </td>
  </tr>
  </table>
</form>
<br>

This doesn't work, click enter inside input field to see.

<form>
  <table>
  <tr>
    <td>
      <input type="text" name="usrname" required>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="surname" required>
    </td>
  </tr>
  </table>
</form>

Upvotes: 2

Views: 552

Answers (2)

j08691
j08691

Reputation: 207901

That's because forms with more than one text input aren't submitted by hitting enter. Try adding a submit button to both forms and you'll see it works fine.

Upvotes: 3

jotasprout
jotasprout

Reputation: 81

In your example, is that supposed to be two identical fields in the different cells (and one of them is just misspelled)? If so, that's likely your problem. If they are intended to be two separate fields, it should work, but I'd need to see a more real-world example.

Also, I'd highly recommend using CSS to format/style your form. If that sounds intimidating, try Bootstrap--it makes creating pretty forms extremely easy.

Upvotes: 0

Related Questions