DEV Community

Gustavo Assis
Gustavo Assis

Posted on

Forms and Tables

Forms

The form element in HTML is used to gather user information

<form action="url-goes-here">
  <!-- input elements go here -->
</form>
Enter fullscreen mode Exit fullscreen mode

Action defines where the form data will be sent upon submission.

Input

We can read the data using Inputs:

<form action="">
  <input type="text" />
</form>
Enter fullscreen mode Exit fullscreen mode

We can add a Label too:

<form action="">
  <label>
    Full Name:
    <input type="text" />
  </label>
</form>
Enter fullscreen mode Exit fullscreen mode

The input and the label are linked now. We can do that in a explicit way too:

<form action="">
  <label for="email"> Email Address: </label>
  <input type="email" id="email" />
</form>
Enter fullscreen mode Exit fullscreen mode

You can add a hint to the user too, using the element placeholder:

<form action="">
  <label for="email"> Email Address: </label>
  <input type="email" id="email" placeholder = "Ex: gustavoassis203@gmail.com"/>
</form>
Enter fullscreen mode Exit fullscreen mode

Button

We can have buttons in the forms too:

<form action="">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" />
  <button type="reset">Reset form</button>
  <button type="submit">Submit form</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Or use Input like buttons:

<input type="button" value="Show Alert" />
Enter fullscreen mode Exit fullscreen mode

To submit a form, we can require some information, the form won't be send if the user do not fill the field.

<input required type="email" name="email" id="email" />
Enter fullscreen mode Exit fullscreen mode

In HTML, form controls, like inputs, can be in different stages or conditions like a focused state, readonly state, or disabled state.

<input disabled type="email" name="email" id="email" />
Enter fullscreen mode Exit fullscreen mode

Fieldset

We can group, visually, buttons and inputs, using the tag <fieldset>, and give to it a legend. Example:

<form action = "">
   <fieldset>
      <legend>Here you digit you legend</legend>
      <!--inputs and buttons-->
   </fieldset>
</form>
Enter fullscreen mode Exit fullscreen mode

Tables

We can use tables in HTML using the <table> tag. Here a example from freecodecamp:

<table id="quickfacts">
  <thead>
    <tr>
      <th colspan="2">Quick Facts: Software Developers, Quality Assurance Analysts, and Testers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2023 Median Pay</th>
      <td>
        $130,160 per year
        <br>$62.58 per hour
      </td>
    </tr>
    <tr>
      <th>Typical Entry-Level Education</th>
      <td>Bachelor's degree</td>
    </tr>
    <tr>
      <th>Work Experience in a Related Occupation</th>
      <td>None</td>
    </tr>
    <tr>
      <th>On-the-job Training</th>
      <td>None</td>
    </tr>
    <tr>
      <th>Number of Jobs, 2022</th>
      <td>1,795,300</td>
    </tr>
    <tr>
      <th>Job Outlook, 2022-32</th>
      <td>25% (Much faster than average)</td>
    </tr>
    <tr>
      <th>Employment Change, 2022-32</th>
      <td>451,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>If this table had a footer it would be here.</th>
    </tr>
  </tfoot>
</table>
Enter fullscreen mode Exit fullscreen mode

We can see in this example how we can structurate our table. First, we have a head, a body and a footer (<thead>, <tbody>, <tfoot>). <tr> define a row, and each row can have a header <th> and a data <td>.
My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX

Top comments (0)