HTML 3: Forms and tables

Basically, for forms, the <form>, <input>, and <button> elements are used to make a form.

The <form> element is used to collect user information.

Input element

The action attribute specifies the URL where the form data will be sent on submission.

Nest the void <input> elements in the <form> to add fields. “Common Input Types: text, email, password, radio, checkbox, number, date.”

Possible type values for <input> elements includes:

button
radio
checkbox: use with the value attribute to specify the value that’s submitted to the server
range: slider
submit
reset
number: can set the min and max attributes are used to set the minimum and maximum values that can be entered in the input field.
Use the <label> element to label the input field.

Nest the input element in the label element to create an implicit association between the label and input. Clicking on the label focuses the text box field.

<form action="">
    <label>
        Full name: 
        <input type="text" />
    </label>
</form>

Explicitly create the association by setting the for attribute to the same value as the input attribute’s id value.
You can add placeholder text to the email or text input for an example or hint.
The name attribute is used to identify the entered data after being submitted to the server.
The size attribute specifies how many characters long the text box will be

<form>
    <label for="email"> Email address: </label>
    <input type="email" id="email" placeholder="example@email.com"/>
</form>

Input attributes

The input element: used to create an input field for user input.

type attribute: used to specify the type of input field, e.g., text, email, number, radio, checkbox.
placeholder attribute: used to show a hint to the user to show them what to enter in the input field.
value attribute: used to specify the value of the input. If the input has a button type, the value attribute can be used to set the button text.
name attribute: used to assign a name to an input field, which serves as the key when form data is submitted. For radio buttons, giving them the same name groups them together, so only one option in the group can be selected at a time.
size attribute: used to define the number of characters that should be visible as the user types into the input.
min attribute: can be used with input types such as number to specify the minimum value allowed in the input field.
max attribute: can be used with input types such as number to specify the maximum value allowed in the input field.
minlength attribute: used to specify the minimum number of characters required in an input field.
maxlength attribute: used to specify the maximum number of characters allowed in an input field.
required attribute: used to specify that an input field must be filled out before submitting the form.
disabled attribute: used to specify that an input field should be disabled.
readonly attribute: used to specify that an input field is read-only.

Wrap each <option> element in a <select> element. Use the selected boolean attribute to designate the default option that’s displayed in the dropdown menu.

For example:

<label for="city">Choose a City: </label>

<select id="city" name="city">
  <option value="new-york">New York</option>
  <option value="los-angeles">Los Angeles</option>
  <option value="chicago">Chicago</option>
  <option value="miami" selected>Miami</option>
</select>

The fieldset elements

Group related inputs together in the <fieldset> element.

Use the <legend> element to describe the group of elements

<form action="/example-url">
    <fieldset>
        <legend>Personal information</legend>
            <input type="text" />
            <input type ="email" />
    </fieldset>
</form>

Button types

Buttons perform actions specified by the type attributed when activated.

“button element: used to create a clickable button. A button can also have a type attribute, which controls the behavior of the button when it is activated, e.g., submit, reset, button.”

JavaScript is needed to implement the interaction though.

<button type="button">Show alert</button>
<script></script>

Types include:

button: what’s the point of this? To have a button without a type (like submit) so you can define the behaviour of the button using Javascript from a neutral starting point.
submit: send the data to the server for processing
reset: clear text typed into the entire form, but not recommended because it’s easy to accidentally clear input and too many buttons can clutter the UI

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

Using the `<input>` element as a button

Set the button text using the value attribute - and specifies the value that’s submitted to the server. JavaScript is needed to implement the interactivity.

<input class="start-btn" type="button" value="Start Game"/>
<script src="index.js"></script>

What’s the difference between input buttons and button buttons?

input elements are void elements that cannot have child nodes (or ‘content’) like text, images, and icons. Use button elements for more flexibility.

Name vs value attributes

Name attributes are needed on all form controls and identify the name of the field. The value attribute contains the data of the field and is needed for controls that don’t have text the user enters directly like dropdown options (option element), radio buttons (input element), and checkboxes (input element).

Client-side form validation in html

Client-side refers to the user’s device that users interact with directly, including layout and design.

Server-side refers to everything that happens on the server, computer, system that hosts the website or app.

Client-side validation can be maliciously bypassed so it’s important to have server-side validation as well.

Built-in validation

Input elements with the type email will have the browser check that the entered value matches email format and display an error message if it doesn’t match.

Required and min max character length validation

Add the boolean required to the <input> to prevent input being submitted without a value entered.

You can also set minlength and maxlength values and an alert will show if the criteria isn’t met.

<form>
    <label for="email">Email address (required): </label>
    <input 
        required
        type="email"
        id="email"
        minlength="4"
        maxlength="64"
    />
    <button>Submit form</button>
</form>

Form states (rather `<input>` element states)

You can use boolean attributes on input elements to control the state of the field:

default: focus the field (default blue border) using the Tab key or clicking it
readonly: can focus the input box but can’t edit the text appearing in the field (set with the value attribute)
disabled: user will be unable to focus the input field

The http method attribute

Forms have amethod attribute to specify which http method to use when sending the form data, with possible values:

GET: appends data to the URL and is suitable for send short input for searches or queries
POST: sends data in the request body and is suitable for larger payloads or sensitive data

The textarea element

Use the <textarea> element for text input that’s longer than one line, such as text fields for comments in a feedback form.

Define the size of the <textarea> with the rows and cols attributes.

<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

Tables in HTML

HTML tables aren’t used that much these days but are still good to know about and use instead of making tables with <div> elements. In the past, table elements were also used to position non-table elements on a webpage.

A <table> element has three first-level structural elements: the head, body and footer.

Table rows, <tr>, are nested in head, body, and footer elements. Each table row can contain
- a table header, <th>
- individual data cells, <td>

First level:

<table>
    <thead></thead>
    <tbody></tbody>
    <tfooter></tfooter>
</table>

Second level elements of <th> and <td>. You can add a <caption> within the <table>. Make a cell span multiple cells with the colspan attribute.

<table>
    <caption>This is a caption for the table</caption>
    <thead>
        <tr>
            <th>Column one heading (vertical)<th>
            <th>Column two heading (vertical)</th>
            <th>Column three heading (vertical)</th>
        </tr>
    <thead>
    <tbody>
        <th>First row heading (horizontal) </th>
        <td>First data cell</td>
        <td>Second data cell of first row</td>
    <tbody>
    <tfoot>
        <tr>
            <th colspan="3">Footer text also goes within a table row and table header element, just like the title</th>
        </tr>
    </tfoot>
</table>

Resources

Summary notes of section: https://www.freecodecamp.org/learn/responsive-web-design-v9/review-html-tables-and-forms/review-html-tables-and-forms

HTML validators: