html tables on form input

Question

Is it possible to have html tables on a form input?

What I am trying to figure out is how to make the form input a small box, and not a box that stretches across the whole page. Hopefully this screenshot makes sense:

The code below trying to implement tables and tables rows (tr) isn't working well, any tips greatly appreciated.

<h1>GEB Research</h1>
<hr>
<fieldset>
  <table>

    <tr>
      <h2>Create Open ADR Event</h2>
    </tr>

    <tr>
      <form method="post" action="/trigger">
        <label>VEN ID:</label>
        <input type="text" name="VEN ID" value="" required><br>
        <tr>
          <label>Open ADR Payload Simple Signal:</label>
          <input type="number" name="Payload Signal" value="" required><br>
        </tr>

        <tr>
          <label for="starttime">Choose start date and time for event:</label>
          <input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
        </tr>

        <tr>
          <label>Event Duration in Minutes:</label>
          <input type="number" name="Minutes" value="" min="30" max="720" required><br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </tr>

  </table>
</fieldset>
<input type="submit" value="Submit">
</form>

Mister Jojo · Accepted Answer · 2021-09-17 14:55:07Z

use display : inline-block;

form {
  display : inline-block;
}

<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
  <fieldset>
    <table>

      <tr>
        <h2>Create Open ADR Event</h2>
      </tr>

      <tr>
        <label>VEN ID:</label>
        <input type="text" name="VEN ID" value="" required><br>
        <tr>
          <label>Open ADR Payload Simple Signal:</label>
          <input type="number" name="Payload Signal" value="" required><br>
        </tr>

        <tr>
          <label for="starttime">Choose start date and time for event:</label>
          <input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
        </tr>

        <tr>
          <label>Event Duration in Minutes:</label>
          <input type="number" name="Minutes" value="" min="30" max="720" required><br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </tr>
    </table>
  </fieldset>
  <input type="submit" value="Submit">
</form>

depperm · Accepted Answer · 2021-09-17 14:47:28Z

1

Add width: fit-content to fieldset css. You should also fix your tags (<form> has interesting placement)

fieldset {
  width: fit-content;
}

<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
  <fieldset>
    <table>

      <tr>
        <h2>Create Open ADR Event</h2>
      </tr>

      <tr>
        <label>VEN ID:</label>
        <input type="text" name="VEN ID" value="" required><br>
        <tr>
          <label>Open ADR Payload Simple Signal:</label>
          <input type="number" name="Payload Signal" value="" required><br>
        </tr>

        <tr>
          <label for="starttime">Choose start date and time for event:</label>
          <input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
        </tr>

        <tr>
          <label>Event Duration in Minutes:</label>
          <input type="number" name="Minutes" value="" min="30" max="720" required><br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </tr>
    </table>
  </fieldset>
  <input type="submit" value="Submit">
</form>

answered Sep 17, 2021 at 14:47

depperm

10.8k4 gold badges46 silver badges68 bronze badges

2 Comments

bbartling Over a year ago

Any chance you could elaborate more on the You should also fix your tags (<form> has interesting placement)? Sorry learning web dev from starter level...

depperm Over a year ago

@HenryHub html tags should be closed before closing a parent's tag. In your post, your form tag is inside a tr but the /tr closes before the form. As you have a submit button, I moved the opening form tag to outside of the fieldset

Collectives™ on Stack Overflow

html tables on form input

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related