HTML Forms

HTML Forms

The time for forms has come! The comparison trend continues, as I will now stay that HTML forms are just like real life forms… but on the web. They allow users to input data in various fields and send it somewhere. Just like they will with pen & paper! That why both things are called forms. These one just come with more convinience and flexibility, like real time validation, different input types, and instant feedback. Sometimes…

Your email

Your password

Remember me

Submit

Types of HTML Form inputs

The <label> tag

We start of with the <label> tag, which is used to define a label for an input element. It is important for accessibility and usability, as it allows users to click on the label to focus on the associated input field.

<label for="name">I am a label:</label>
<input type="text" id="name" name="name" />

I am a label:

Submit

The for attribute links the label to an input element by matching the id of the input. When clicked, the label will focus (put the cursor in) the input field, making it easier for users to interact with forms. This improves accessibility for users with disabilities, as screen readers can announce the label when the input is focused.

The <input> tag

The <input> tag is the most basic and versatile form element in HTML. It can be used to create various types of input fields, such as text boxes, checkboxes, radio buttons, and more. The type of input field is specified using the type attribute.

<input type="text" />

Which results in this:

You can type text into this input field and will work out of the box. We can add more attributes to customize the input field, such as placeholder, required, and maxlength.

<input type="text" placeholder="Enter your name" required maxlength="10" />

Submit

Other common attributes for the <input> tag include:

• name: specifies the name of the input field, which is used to identify the field when the form is submitted.
• value: specifies the initial value of the input field.
• disabled: disables the input field, making it uneditable.
• readonly: makes the input field read-only, preventing users from changing its value.

<input type="text" name="username" value="JohnDoe" disabled />

Submit

Different input types can be specified using the type attribute, such as:

• text: a single-line text input field.
• password: a password input field that hides the entered text.
• email: an input field for email addresses, which can include validation for proper email format.
• number: an input field for numeric values, which can include validation for numeric format.
• checkbox: a checkbox input field that allows users to select or deselect an option.
• radio: a radio button input field that allows users to select one option from a group.
• file: an input field for file uploads, allowing users to select files from their device.

<input type="email" placeholder="Enter your email" required />
<input type="number" placeholder="Enter your age" min="0" max="120" required />
<input type="checkbox" id="subscribe" name="subscribe" />
<label for="subscribe">Subscribe to newsletter</label>
<input type="radio" id="option1" name="options" value="option1" />
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="option2" />
<label for="option2">Option 2</label>
<input type="file" accept="image/*" />

Subscribe to newsletter

Option 1

Option 2

Submit

All the types are: text, password, email, number, checkbox, radio, file, date, time, url, tel, search, and more. Each type has its own specific behavior and validation rules.

The <textarea> tag

The textarea tag is one big text input. It is used for multi-line text input, allowing users to enter larger amounts of text. The <textarea> tag does not have a type attribute, as it is always a multi-line text input.

<textarea rows="4" cols="50" placeholder="Enter your message"></textarea>

Submit

The text area has special attributes like rows and cols to define its size, and it can also have attributes like placeholder, required, and maxlength.

It also could be made resizable or not

<textarea rows="4" cols="50" placeholder="Resizable" required></textarea>
<textarea
  rows="4"
  cols="50"
  placeholder="Non resizable"
  style="resize:none;"
  required
></textarea>

Submit

The <select> tag

The select tag is basically a dropdown menu. It is used to create a dropdown list of options for users to choose from. The <select> tag contains one or more <option> tags, which define the available options in the dropdown.

<select name="options" id="options">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Option 1Option 2Option 3

Submit

The select is our first multi-tag input, which consists of a parent <select> tag and multiple child <option> tags with a value attribute. When the form is submitted, the value of the selected option is sent to the server.

<select name="options" id="options" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Option 1Option 2Option 3

Submit

To select multiple options, users can hold down the Ctrl (or Cmd on Mac) key while clicking on the options they want to select. The selected options will be sent as an array of values when the form is submitted.

The <button> tag

The button tag is used to create a clickable button in a form. It can be used to submit the form, reset the form, or perform any other action when clicked. The <button> tag can have different types, such as submit, reset, and button.

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click me</button>

Click me to submit

Click me to reset

Click me

The type attribute specifies the type of button. The submit type submits the form, the reset type resets the form to its initial values, and the button type does not perform any action by default.

The button tag can also have attributes like name, value, and disabled. The name attribute specifies the name of the button, which is used to identify the button when the form is submitted. The value attribute specifies the value of the button, which is sent to the server when the form is submitted. The disabled attribute disables the button, making it unclickable.

<button type="submit" name="submitButton" value="Submit" disabled>
  Submit
</button>

Submit

The <fieldset> and <legend> tags

The <fieldset> tag is used to group related form elements together, while the <legend> tag is used to provide a caption for the fieldset. This is useful for organizing forms and improving accessibility.

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
</fieldset>

Personal Information

Name:Email:

Submit

The <datalist> tag

The <datalist> tag is used to provide a list of predefined options for an input field. It is often used with the <input> tag to create an autocomplete feature, where users can select from a list of suggestions as they type.

<input type="text" list="suggestions" placeholder="Type something..." />
<datalist id="suggestions">
  <option value="Option 1" />
  <option value="Option 2" />
  <option value="Option 3" />
</datalist>

Submit

The datalist tag is linked to the input field using the list attribute. When the user starts typing in the input field, a dropdown list of suggestions appears, allowing them to select an option from the predefined list.

Styling the datalist tag can be tricky, as it is rendered differently by different browsers. You can use CSS to style the input field, but keep in mind that some styles may not be applied consistently across all browsers.

The <output> tag

The <output> tag is used to display the result of a calculation or user action in a form. It is often used in conjunction with JavaScript to dynamically update the output based on user input.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <label for="a">A:</label>
  <input type="number" id="a" value="0" />
  <label for="b">B:</label>
  <input type="number" id="b" value="0" />
  <output name="result" id="result">0</output>
</form>

A:B:

0

More on how to setup JavaScript to work with HTML will be covered in the JavaScript courses.

The <progress> and <meter> tags

The <progress> and <meter> tags are used to display progress and measurements in a form. The <progress> tag is used to show the progress of a task, while the <meter> tag is used to show a measurement within a known range.

<progress value="50" max="100"></progress>
<meter value="0.7" min="0" max="1" low="0.2" high="0.8" optimum="0.5"></meter>

The progress tag displays a progress bar, while the meter tag displays a gauge-like indicator. Both tags can have attributes like value, min, max, low, high, and optimum to define their behavior and appearance.

The <input type="hidden"> tag

The <input type="hidden"> tag is used to store data that is not visible to the user but needs to be submitted with the form. It is often used to store metadata or additional information that is required for processing the form.

<input type="hidden" name="userId" value="12345" />

Submit

Nothing to see here as the input is hidden.

The <form> tag

The <form> tag is the container for all the form elements. It defines the boundaries of the form and specifies how the form data should be submitted.

The action attribute specifies the URL where the form data should be sent when submitted, and the method attribute specifies the HTTP method to use (usually GET or POST).

<form action="/submit" method="post">
  <!-- Form elements go here -->
</form>

Form attributes

The <form> tag can have several attributes to control its behavior and appearance. Some of the most commonly used attributes include:

• action: specifies the URL where the form data should be sent when submitted.
• method: specifies the HTTP method to use when submitting the form (usually GET or POST).
• enctype: specifies the encoding type for the form data when submitting files (usually multipart/form-data for file uploads).
• target: specifies where to display the response after submitting the form (e.g., in a new tab or the same frame).
• autocomplete: specifies whether the browser should enable or disable autocomplete for the form fields (e.g., on or off).
• novalidate: disables the browser’s default form validation, allowing you to implement custom validation using JavaScript.

Summary

In this lesson, we covered the basics of HTML forms, including the different types of form elements and their attributes. We learned how to create input fields, text areas, dropdowns, buttons, and more. We also explored the <label>, <fieldset>, <legend>, <datalist>, <output>, <progress>, <meter>, and <input type="hidden"> tags.

We also discussed the <form> tag and its attributes, which control how the form behaves and how the data is submitted. Forms are essential for collecting user input and submitting data to a server for processing.

More advanced topics like form validation, handling form submissions with JavaScript, and styling forms will be covered in the JavaScript and CSS courses. For now, you should have a good understanding of how to create and use forms in HTML. The skeleton of the web.

Questions