HTML forms and input attributes and elements

Happy weekend, everyone!!!

Today, we are going to be delving into HTML forms and input elements. This is definitely a tricky one and really bulky, truthfully I had some problems understanding this particular topic but I am proud to say that I understand it now.

Alrightyyy, let us get into it!!!!

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The <form> Element:

The HTML <form> element is used to create an HTML form for user input:

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

Importance of Forms in User Interaction on Web Pages:

Forms are fundamental components of web pages, enabling user interaction by collecting and submitting data.
Forms facilitate various functions such as; user registration, login, feedback submission, e-commerce transactions, e.t.c.
Understanding forms is crucial for creating dynamic and interactive web experiences.

Introducing Different Form Elements:

<form> Element: The <form> element is the foundation of HTML forms, encompassing all input elements and defining how data is collected and processed.
<input> Element: The <input> element creates various types of input fields within a form.
- It is the most used form element.
- An <input> element can be displayed in many ways, depending on the 'type' attribute.
- The <input> element uses the 'id' attribute.

COMMON'<input>' ATTRIBUTES:

type: It determines the type of input field

Basic examples of input types are:
1. <input type="text">: It displays a single-line input field for text input.
2. <input type="radio">: Displays a radio button (for selecting one of many choices)
3. <input type="checkbox">: Displays a checkbox (for selecting zero or more of many choices)
4. <input type="submit">: Displays a submit button (for submitting the form)
5. <input type="button">: Displays a clickable button
name: It provides a unique identifier for the input field.

Each input field must have a 'name' attribute to be submitted.

If the 'name' attribute is omitted, the value of the input field will not be sent at all.
value: It specifies the initial value of the input field.

Example of an 'input' element:
<input type="text" id="name" name="name" value="value">

<label> Element: The <label> tag defines a label for many form elements.
- This element is useful for screen-reader users because the screen-reader will read out loud when the user focuses on the input element.
- The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
- The <label> tag uses a 'for' attribute.
  
  Example of an 'label' element:
  <label for="inputField">Label Text</label>
  
  NOTE: The 'for' attribute of the '<label>' tag should be equal to the 'id 'attribute of the '<input>' element to bind them together.
<textarea> Element: The <textarea> element allows users to input multi-line text.

ATTRIBUTES OF THE '<textarea>' ELEMENT:
- rows: Specifies the visible number of lines in the text area.
- cols: Specifies the visible width of the text area.
  
  Example of an 'textarea' element:
  <textarea id="message" name="message"></textarea>
<select> Element:
- The '<select>' element creates a dropdown list of options.
- Presents a set of mutually exclusive options from which users can select only one.

ATTRIBUTES OF <select> ELEMENT:

'name': It defines the name of the select element.

Example of an 'name' element:

<select name="dropdown"></select>
'multiple': It allows users to select multiple options if present.

It creates a checkbox input field allowing users to select multiple options from a list.

Example of an 'multiple' element:
<select id="dropdown" name="dropdown" multiple></select>

<option> Element: It defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the 'selected' attribute to the option.

Example: <option value="fiat" selected>Fiat</option>
<fieldset> Element: The <fieldset> element is used to group related data in a form.
<legend> Element: The <legend> element defines a caption for the <fieldset> element.
The <datalist> Element: The <datalist> element specifies a list of pre-defined options for an <input> element.
- Users will see a drop-down list of the pre-defined options as they input data.
  
  E.G: <input list="browsers" id="browser" name="browser">

NOTE: The 'list' attribute of the <input> element, must refer to the 'id' attribute of the <datalist> element.

<output> Element

The <output> element represents the result of a calculation.
<button> Element: The <button> element generates clickable buttons within a form.

ATTRIBUTES:
- type: Specifies the behavior of the button (e.g., submit, reset, button).
- name: Provides a name for the button.
- value: Assigns a value to the button. It specifies the text displayed on the button.

**EXPLAINING DIFFERENT <button> ELEMENT TYPES:**

Submit Button: The (`<input type="submit">`) defines a button for submitting the form data to a form handler.
Radio Button: The (`<input type="radio">`) defines a radio button.
- Radio buttons let a user select ONE of a limited number of choices.
Checkbox Button: The (`<input type="checkbox">`) defines a checkbox.
- Checkboxes let a user select ZERO or MORE options of a limited number of choices.

OTHER EXAMPLES OF HTML <input> TYPES:

<input type="password"> : It defines a password field.
- Similar to the text input, but obscures the entered text to maintain security.
<input type="reset"> : It defines a reset button that will reset all form values to their default values.
<input type="color"> : It is used for input fields that should contain a color.
- Depending on browser support, a color picker can show up in the input field.
<input type="date"> : It is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.
<input type="datetime-local"> : It specifies a date and time input field, with no time zone.
<input type="email"> : It is used for input fields that should contain an e-mail address.
- Depending on browser support, the e-mail address can be automatically validated when submitted.
- Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
<input type="image"> : It defines an image as a submit button.

The path to the image is specified in the 'src' attribute.
<input type="file"> : It defines a file-select field and a "Browse" button for file uploads.
<input type="hidden"> defines a hidden input field (not visible to a user).
- A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
- A hidden field often stores what database record that needs to be updated when the form is submitted.

NOTE: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality.

Do not use hidden inputs as a form of security!

<input type="month"> : It allows the user to select a month and year.
- Depending on browser support, a date picker can show up in the input field.
<input type="number"> : It defines a numeric input field.
- You can also set restrictions on what numbers are accepted.
<input type="search"> : It is used for search fields (a search field behaves like a regular text field).
<input type="tel"> : It is used for input fields that should contain a telephone number.
<input type="time"> : It allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.
<input type="url"> : It is used for input fields that should contain a URL address.
- Depending on browser support, the url field can be automatically validated when submitted.
- Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
<input type="week"> : It allows the user to select a week and year.
- Depending on browser support, a date picker can show up in the input field.
<input type="range"> : It defines a control for entering a number whose exact value is not important (like a slider control).
- The default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the 'min', 'max', and 'step' attributes.

NOTE:

max: It specifies the maximum value for an input field.

min: Specifies the minimum value for an input field.

step: Specifies the legal number intervals for an input field.

The form handler is typically a file on the server with a script for processing input data.
- The form handler is specified in the form's 'action' attribute.

PHEW!!!!! LET US TAKE A BREAK

Here are some <input> attribute restrictions:

Checked: It specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") .

It specifies whether the checkbox is initially selected.

E.G: <input type="checkbox" name="subscribe" checked>
Disabled: It specifies that an input field should be disabled. E.G: <input type="text" name="disabledField" disabled>
max: It specifies the maximum value for an input field. E.G: <input type="number" name="age" max="100">
maxlength: It specifies the maximum number of characters allowed for an input field. E.G: <input type="text" name="comment" maxlength="100">

Note: When a 'maxlength' is set, the input field will not accept more than the specified number of characters.
min: It specifies the minimum value for an input field. E.G: <input type="number" name="quantity" min="1">
minlength: It specifies the minimum number of characters required in the input field. E.G: <input type="text" name="password" minlength="6">
pattern: It specifies a regular expression pattern to check the input value against. E.G: <input type="text" name="password" id="userPass" pattern="[A-Za-z]{3}" title="3 letter Password">

In this case, the password requires 3 letters.
readonly: It specifies that an input field is read-only (cannot be changed). E.G: <input type="text" name="reference" value="XYZ123" readonly>
required: It specifies that an input field is required (must be filled out). E.G: <input type="text" name="username" required>
size: It specifies the width (in characters) of an input field. E.G: <input type="text" name="zipcode" size="5">
step: It specifies the legal number intervals for an input field.

specifies the interval between a permitted value and the next. E.G: <input type="number" step="10">

In this example, the permitted values are: -20, -10, 0, 10, 20...e.t.c.
value: It specifies the default value for an input field.

E.G: <input type="text" name="username" value="John Doe">
placeholder: Provides a hint or example of the expected input. E.G: <input type="text" name="search" placeholder="Enter your search query">

COMMON HTML '<form>' ATTRIBUTES:

action attribute: Specifies the URL where the form data is submitted.

It defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.

E.G: <form action="/submit-form" method="post">

NOTE: If the 'action' attribute is omitted, the action is set to the current page.
1. target attribute: It specifies where to display the response that is received after submitting the form.
  
  The 'target' attribute can have one of the following values:
_blank: The response is displayed in a new window or tab.

E.G:

<form action="/submit-form" method="post" target="_blank">
_self: The response is displayed in the current window.

E.G: <form action="/submit-form" method="post" target="_self">
_parent: The response is displayed in the parent frame.

E.G: <form action="/submit-form" method="post" target="_parent">
_top: The response is displayed in the full body of the window. E.G: <form action="/submit-form" method="post" target="_top">
1. autocomplete attribute: It specifies whether a form should have autocomplete on or off.
  - When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
  - Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
  - The 'autocomplete' attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
    
    E.G: Autocomplete on: <input type="password" id="password" name="password" autocomplete="on">
    
    Autocomplete off: <input type="password" id="password" name="password" autocomplete="off">
2. novalidate attribute: This is a boolean attribute.
  
  When present, it specifies that the form data (input) should not be validated when submitted. When the form is submitted, the browser will not perform its usual validation checks, such as checking for required fields or validating input formats.
  
  E.G: <form action="/submit-form" method="post" novalidate>
3. rel attribute: The relationship attribute specifies the relationship between a linked resource and the current document.
  
  E.G: <a href="https://example.com" rel="nofollow">Visit Example Website</a>
  
  There are various values under the 'rel' attribute but with this example (rel="no follow") it indicates that the search engines should not follow the link when indexing the page.
4. list Attribute:
  
  The input 'list' attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
5. method attribute: It defines the HTTP method to be used when sending the form data.
  - The form data can be sent as URL variables (with method="get") or as an HTTP post transaction (with method="post").
  - The default HTTP method when submitting form data is GET.

NOTES ON EACH METHOD:

GET:
- Appends the form data to the URL, in name/value pairs
- NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
- The length of a URL is limited (2048 characters)
- Useful for form submissions where a user wants to bookmark the result
- GET is good for non-secure data, like query strings in Google
POST:
- Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
- POST has no size limitations, and can be used to send large amounts of data.
- Form submissions with POST cannot be bookmarked

NOTE: Always use POST if the form data contains sensitive or personal information!

NOTES:

The text editor I use is called Visual Studio Code.
Like I said before, this topic is extremely bulky, so in case I missed out on any information, please feel free to discuss it with me in the comment section, I will be very happy to learn.
The picture attached is a sample of some of the codes I use. Try it out for yourselves! Enjoy the ride!!!

DAY 6: HTML Forms and Input Elements

Table of contents