This content originally appeared on DEV Community and was authored by Gustavo Assis
Forms
The form element in HTML is used to gather user information
<form action="url-goes-here">
<!-- input elements go here -->
</form>
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>
We can add a Label too:
<form action="">
<label>
Full Name:
<input type="text" />
</label>
</form>
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>
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>
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>
Or use Input like buttons:
<input type="button" value="Show Alert" />
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" />
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" />
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>
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>
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
This content originally appeared on DEV Community and was authored by Gustavo Assis
Gustavo Assis | Sciencx (2025-08-28T01:16:05+00:00) Forms and Tables. Retrieved from https://www.scien.cx/2025/08/28/forms-and-tables/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.