├── 01-introduction.md
├── 02-structure.md
├── 03-data-exchange.md
├── 04-dom-101.md
├── 10-real-life-scenarios.md
├── draft.md
└── readme.md


/01-introduction.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | ## Why forms
 4 | 
 5 | Forms are everywhere on the web. We use forms to do all kind of activities like logging into a system, sending messages and files, answering quizzes and a lot more. This is why understanding how to create forms is important. Not just for developers but for UX engineers and designers as well.
 6 | 
 7 | Forms exist from the first day HTML was created. HTML5 introduced a lot of new features to the forms (native validation, new input types)
 8 | 
 9 | In this series we will explore everything related to forms like:
10 | 
11 | * How to leverage semantic HTML to create intuitive and accessible forms
12 | * How to style forms using CSS
13 | * How to enforce client side validation using HTML5 APIs
14 | * What are the common practices and pitfalls we should be aware of when we create forms
15 | 
16 | ## The motive behind this book
17 | 
18 | Forms are important to web applications and web development. There is a lot of techniques and tricks people are missing when they work with forms. With the rise of the modern frontend frameworks, most of the developers I met are caring less about forms and do a lot of bad practices. That's not the fault of the frameworks though, it might be due to the forgiving nature of the web or the availability of learning resources.
19 | 
20 | For example, one of the tasks we give to junior developers applying to my company is an HTML form. We asked them to do the changes they see necessary and ask them to add validation for a couple of fields. Most of the submissions were:
21 | 
22 | * unable to spot invalid HTML (like duplicate IDs),
23 | * unable to bind labels to inputs properly or not using labels at all,
24 | * unable to use validation without JavaScript (like required, proper input types ... etc)
25 | 
26 | This is why I saw an opportunity to try to fill this gap.


--------------------------------------------------------------------------------
/02-structure.md:
--------------------------------------------------------------------------------
  1 | [TOC]
  2 | 
  3 | # Forms structure
  4 | 
  5 | HTML offers a variety of elements that can be used collect data from users. Due to the increase in the complexity of the web applications, developers are still creating custom components that extend existing elements and add new ones. In this chapter we will explore the native HTML elements used in HTML forms.
  6 | 
  7 | ## Forms 101
  8 | 
  9 | ### The `form` tag
 10 | 
 11 | Forms always start with the `form` tag. It's used to define the *method* that will be used to submit the form data to the server and the *URL* where it will be submitted.
 12 | 
 13 | ```html
 14 | <form method="POST" action="/mailer.php">
 15 |   <!-- the form data shall be written here -->
 16 | </form>
 17 | ```
 18 | 
 19 | The example above shows 2 different attributes written in the `form` tag, the `method` and the `action` attributes.
 20 | 
 21 | #### The `method` attribute
 22 | 
 23 | The `method` attribute describes the HTTP verb used to submit the form. It's case insensitive and can be either:
 24 | 
 25 | 1. `get` which is the default value. The form data is submitted in the URL as *query string*. This method is usually used when we want to create an indexable URL (like a search form).
 26 | 2. `post` method, the data is sent in the request body.
 27 | 
 28 | 💡 If the author does not provide a `method` attribute, the form will use the `get` method by default.
 29 | 
 30 | 💡 HTML5 introduced a new method `dialog` which can be used to close a native `dialog` element that enclose the form. For the sake of simplicity, this one will be discussed later in **Real life cases** section.
 31 | 
 32 | ⚠️ Forms cannot be nested (i.e. we cannot add a form inside another form). Browsers usually ignore the inner `form` tag. Some authors try to do that in attempt to organize their form into different sections. This is done using different elements that we will discuss later.
 33 | 
 34 | #### The `action` attribute
 35 | 
 36 | The `action` attribute is used to define the URL where this form will be submitted. If this attribute is not available, the form will submit to the same URL. This URL can be overridden by some form elements that we will explore later.
 37 | 
 38 | ### Form elements used to collect data
 39 | 
 40 | In this section we will learn about the different elements used to collect inputs from the users. We will discuss the `input`, `textarea` and `select` tags. For the sake of simplicity, we will refer to them collectively as *form controls*.
 41 | 
 42 | #### The `input` tag
 43 | 
 44 | The `input` tag is used to collect data from the user. It has a lot of types that control the type of data it accepts. These types define the user interaction with that element and the kind of validation rules that will be triggered when it receives data.
 45 | 
 46 | ```html
 47 | <form>
 48 |   <label for="first-name">First Name</label>
 49 |   <input type="text" id="first-name" />
 50 |   ...
 51 | </form>
 52 | ```
 53 | 
 54 | You can see there is a new tag we used here `label`. For now, let's just say that it is used to describe a form input. We will talk more about it in the next section.
 55 | 
 56 | The `input` is a self-closing element. The `type` attribute defines what type of the element is. HTML5 introduced a lot of different types that can be used to collect different types of data.
 57 | 
 58 | ##### Original input types
 59 | 
 60 | * `text` accepts anything. This is the default value of the attribute. If the user doesn't provide a value for the `type`, the browser will consider the `input` type as `text`. Also, if the browser doesn't understand the value of the `type` attribute (like if it is an invalid value, or an older browser that doesn't understand new values) it will also be treated as `text`.
 61 | * `password` accepts anything like text. The difference is, the browser will attempt to hide the value the user is writing on the screen for privacy purpose. The behavior is different on mobile phones where the browser will attempt to show the last character you wrote for a moment before hiding the entire value.
 62 | * `checkbox` allows the user to choose multiple answers for one question. This one is suitable to use when the available options are few and your intent is to show them all together.
 63 | * `radio` requires the user to pick one answer out of many.
 64 | * `file` allows the user to pick one or more files from their machine.
 65 | * `hidden` allows developers to include data when the form is not submitted without being visible to the users. It can be used in different scenarios, most commonly to include an automatically generated token to prevent an attack like Cross Site Request Forgery (CSRF). We will discuss this part in the forms security section.
 66 | * `submit` transforms the `input` to look like a button that can be used to submit form. Since the introduction of the `button` element, authors shifted to the new element to submit forms because it offers richer render possibilities.
 67 | * `reset` transforms the `input` to look like a button that can be used to reset the value of the form to match the corresponding `value` attribute on each element. Like the `submit` type, it can be replaced with a `button` tag with the same `type` which is now preferred for the same reason.
 68 | 
 69 | ##### HTML5 new input types
 70 | 
 71 | * `email` accepts email format. This will trigger validation errors and prevent form submission if the value provided doesn't match the email format.
 72 | * `number` accepts numerical values. According to the specs it accepts floating-point numbers so exponential notation is accepted as well. We will discuss this later.
 73 | * `date` accepts date format. This input display a mini calendar that allows the user to pick a date. The layout of that date picker differs from a browser to another and is affected by the device type and operating system as well.
 74 | * `color` accepts color in a hexadecimal format. This input display a color picker for the user to choose. The layout of that color picker is dependent upon the operating system.
 75 | * `datetime-local`
 76 | * `range`
 77 | * `search`
 78 | * `tel`
 79 | * `url`
 80 | 
 81 | ##### How `input`'s value is calculated
 82 | 
 83 | The `input` tag has the option to accept an initial value using the `value` attribute. If that attribute is missing, the value will be nothing. When the user submit a form, the text value written inside the form will be submitted.
 84 | 
 85 | Some input types will resolve to special values that is different from the text being displayed inside the form control. For example, an `input` with the type `date` might display the date in the format `MM/DD/YYYY` (if your locale is en-US) but the submitted value will always be formatted according to ISO8601 like `YYYY-MM-DD`. These special cases will be explained when we discuss each `type` separately.
 86 | 
 87 | #### The `textarea` tag
 88 | 
 89 | The `textarea` allows the user to write multiple lines of text. It's suitable to use when the user is expected to insert big chunks of unstructured text (like a message, a feedback ... etc).
 90 | 
 91 | ```html
 92 | <form>
 93 |   <label for="address">Address</label>
 94 |   <textarea id="address"></textarea>
 95 | </form>
 96 | ```
 97 | 
 98 | Unlike the other form elements, the `textarea` does not require a value attribute. If we want to write a default value for a `textarea` we simply write it as text inside the tag itself (note that this isn't a self-closing tag like `input`)
 99 | 
100 | ```html
101 | <form>
102 |   <label for="address">Address</label>
103 |   <textarea id="address">1600 Amphitheatre Parkway in Mountain View,
104 |     California,
105 |     United States</textarea>
106 | </form>
107 | ```
108 | 
109 | ⚠️ If you used a framework [like react](https://reactjs.org/docs/forms.html#the-textarea-tag), you will find that the binding of `textarea` value happens by using `value` attribute. The framework changes that on run time to work as we described above. The `value` attribute doesn't work on `textarea`.
110 | 
111 | #### The `select` tag
112 | 
113 | The `select` tag let the user select an option or more from a list. The available options we provide for the user to pick from is listed using the `option` tag. The `select` tag provides a similar functionality to that of the `input` of type `checkbox` or `radio`.
114 | 
115 | A good use case for `select` is when there are too many options to display on the screen. The available options are only demonstrated when the user *open* the select control. check the following example:
116 | 
117 | ```html
118 | <form>
119 |   <label for="car-brand">Your car brand</label>
120 |   <select id="car-brand">
121 |     <option>Acura</option>
122 |     <option>Alfa Romeo</option>
123 |     <option>Audi</option>
124 |     <option>BMW</option>
125 |     <option>Bentley</option>
126 | 		...
127 |   </select>
128 | </form>
129 | ```
130 | 
131 | There are tens of car brands. Displaying all of them using checkboxes or radio buttons will unnecessarily occupy a huge space.
132 | 
133 | Another good use case is when  is when we want to group the different options together in a way that makes it easy for the user to understand. Check the following:
134 | 
135 | ```html
136 | <form>
137 |   <label for="car-model">Your car model</label>
138 |   <select id="car-model">
139 |     <optgroup label="Honda Civic">
140 |     	<option>2020 LX	Sedan</option>
141 |     	<option>2020 LX	Hatchback</option>
142 |     	<option>2020 EX	Sedan</option>
143 |     	<option>2020 Touring Sedan</option>
144 |     </optgroup>
145 |     <optgroup label="Ford">
146 |       <option>2020 Edge ST</option>
147 |       <option>F-150 Raptor</option>
148 |       <option>2020 Mustang Shelby GT350</option>
149 |     </optgroup>
150 |   </select>
151 | </form>
152 | ```
153 | 
154 | The `optgroup` tag accepts a `label` attribute. Its value will be displayed on top of these options making it easier to distinguish for the user. It will also add the needed padding for each group of options to make it easier to read.
155 | 
156 | A great benefit we get from `optgroup` is that we can disable a group of options by using the `disabled` attribute on that group.
157 | 
158 | ⚠️ With the power offered by the `optgroup`, some authors nest `optgroup`  inside each other. While this might work in some browser, it goes again the HTML specification and hence, it produces invalid HTML which could lead to unexpected results. The HTML specs define that the only allowed children of `optgroup` is zero or more `option` tags. Also, the only allowed parent is the `select` tag. Try to stick to that and keep your forms simple.
159 | 
160 | ##### How `select`'s value is calculated
161 | 
162 | The value of the `select` tag is determined by the selected `option`. This leads to a very interesting behavior.
163 | 
164 | * If the selected `option` does not have a `value` attribute, the value will be the text written inside the `option` tag.
165 | * If the selection `option` have a `value` attribute, this value of this attribute will be used.
166 | 
167 | ### Structural form elements
168 | 
169 | HTML provides us with a few elements that can be used to improve structuring and laying out our forms. In this section we will be talking about `label`, `fields` and `legend`.
170 | 
171 | #### The `label` tag
172 | 
173 | You were introduced to the `label` tag in the previous section. As we described earlier; it is used to provide a caption for form controls. To associate a `label` with a form controls we have two options:
174 | 
175 | ```html
176 | <form>
177 |   <!--First option -->
178 |   <label for="unique-identifier">Label text</label>
179 |   <input id="unique-identifier" type="text" />
180 |   
181 |   <!--Second option -->
182 |   <label>
183 |     Label text
184 |     <input type="text" />
185 |   </label>
186 | </form>
187 | ```
188 | 
189 | The first option requires that we specify the `id` of that control to the value of the `for` attribute of the `label`. The second option involves wrapping that form control inside the `label` along with the text used to describe it. Both options are fine but the first one offers a greater styling control over the text. Also, no styles will be cascaded from the `label` to the enclosed form control.
190 | 
191 | It's always encouraged to use `label`s for the following benefits:
192 | 
193 | 1. It helps the users who use assistive technologies like screen reader. It will read out the label when the user is focused on the form input, helping the user to understand what this field is about and what data should be entered.
194 | 2. When the user clicks a `label`, it will activate the associated `input`. This offers great benefit when a user tries to activate a checkbox or a radio button. Instead of having to click precisely on the `input`, clicking the whole text will do the purpose. This is mostly noted when a user try to fill a form on a mobile device.
195 | 
196 | 💡 We should always use labels to describe form controls. Sometimes, designers don't add labels on simple forms (like a search form with a single input) or replace them with `placeholders` (we will discuss it later). In the accessibility section, we will discuss some alternative approaches to provide form controls with descriptive text; either through `label` or other techniques.
197 | 
198 | 💡 Multiple labels can be associated with a single form control. This becomes handy when you try to design a certain experience where multiple click areas can be used to activate the same form control.
199 | 
200 | #### The `fieldset` and `legend` tags
201 | 
202 | The `fieldset` element allows us to group some form controls in a single section. It's labelled by using a `legend` element.
203 | 
204 | ```html
205 | <form>
206 |   <fieldset>
207 |     <legend>Personal information</legend>
208 |     <label for="name">Name</label>
209 |     <input type="text" id="name" />
210 |     <label for="date-of-birth">Date of birth</label>
211 |     <input type="date" id="date-of-birth" />
212 |   </fieldset>
213 |   <fieldset>
214 |     <legend>Contact details</legend>
215 |     <label for="email">Email</label>
216 |     <input type="email" id="email" />
217 |     <label for="phone">Phone number</label>
218 |     <input type="tel" id="phone" />
219 |   </fieldset>
220 |   <button>Submit</button>
221 | </form>
222 | ```
223 | 
224 | By default, the user agent stylesheet add some padding and margin around the `fieldset` as well as 2px groove border giving it a distinguished look. We will discuss how it look in details in the **Styling forms with CSS** section.
225 | 
226 | Another common use case for `fieldset` is to group several checkboxes or radio buttons like the following
227 | 
228 | ```html
229 | <form>
230 |   <fieldset>
231 |     <legend>Select your gender</legend>
232 |     <input type="radio" id="gender-male" value="1" name="gender" />
233 |     <label for="gender-male">Male</label>
234 |     <input type="radio" id="gender-female" value="2" name="gender" />
235 |     <label for="gender-female">Female</label>
236 |     <input type="radio" id="gender-unspecified" value="3" name="gender" />
237 |     <label for="gender-unspecified">Prefer not to disclose</label>
238 |   </fieldset>
239 | </form>
240 | ```
241 | 
242 | In the previous example, screen readers will attempt to read the question defined in the `legend` tag giving a greater context for the users. This will be discussed in details in **Forms accessibility**.
243 | 
244 | 💡 It's OK to nest several `fieldset`s inside each other as long as it makes sense.
245 | 
246 | 💡 A `fieldset` can contain only one `legend`. The HTML specs define the `legend` as the first child to the `fieldset`. If the `legend` is nested in any place other than the first child, it will be rendered as if it is the first child. This odd behavior is intended by design and there were several proposals to change it.
247 | 
248 | ### Form actions
249 | 
250 | #### Submitting a form
251 | 
252 | #### Resetting a form
253 | 
254 | #### Custom form actions
255 | 
256 | 


--------------------------------------------------------------------------------
/03-data-exchange.md:
--------------------------------------------------------------------------------
1 | # Data exchange
2 | 
3 | TODO
4 | 
5 | * How form data is collected
6 | * Constructing the URL query in `GET` requests
7 | * Different data formats and MIME types used when using `POST` methods
8 | * Dealing with arrays of data


--------------------------------------------------------------------------------
/04-dom-101.md:
--------------------------------------------------------------------------------
 1 | # DOM 101
 2 | 
 3 | In this section we will shed the light on some important properties and methods provided by the DOM API that will help us working with forms using JavaScript.
 4 | 
 5 | ## HTMLFormElement
 6 | 
 7 | The `HTMLFormElement` interface represents a `<form>` element in the DOM.
 8 | 
 9 | ### Properties
10 | 
11 | This interface inherit properties from `HTMLElement` as well as other specific ones.
12 | 
13 | * `HTMLFormElement.elements` returns a collection holding all *form controls* in this form. Check what form controls mean below
14 | * `HTMLFormElement.length` returns the length of all form controls in this form.
15 | 
16 | #### Elements that are considered form controls
17 | 
18 | Some elements are omitted for simplicity
19 | 
20 | * `button`
21 | * `fieldset`
22 | * `input`
23 | * `select`
24 | * `textarea`
25 | 
26 | This is the preferred way to get the important form elements when working with forms.
27 | 
28 | ### Methods
29 | 
30 | This interface inherit properties from `HTMLElement` as well as other specific ones.
31 | 
32 | - `checkValidity()`
33 | 
34 | - `reportValidity()`
35 | 
36 | - `requestSubmit()`
37 | 
38 | - `reset()`
39 | 
40 |   Resets the form to its initial state. Check the note below about how the initial state is defined. 
41 | 
42 | - `submit()`
43 | 
44 |   Submits the form to the server.
45 | 
46 | #### Form's initial state
47 | 
48 | The form initial state is defined in the HTML attributes rather than the DOM properties. It differs according to the type of element.
49 | 
50 | * `<input>` (types other than `checkbox` and `radio`) is defined by the `value` attribute.
51 | * `<textarea>` is defined by the inner text written within the starting and closing tags.
52 | * `<select>` is defined by the `option` tags that has the `selected` attribute.
53 | 
54 | ### Events
55 | 
56 | * `formdata` fires every time we call `new FormData()` on a `<form>`. It can be used to construct data and submit it asynchronously. 💣 This is relatively a new event and it's not supported in Safari yet.
57 | * `reset` fires when the form is reset.
58 | * `submit` fires when the form is being submitted. Usually authors attach listeners to it and stop the submission to manipulate data, submit the form asynchronously or do many other things
59 | 
60 | 


--------------------------------------------------------------------------------
/10-real-life-scenarios.md:
--------------------------------------------------------------------------------
  1 | # Real life scenarios
  2 | 
  3 | The following examples are created without external dependencies.
  4 | 
  5 | ## Creating a multistep form
  6 | 
  7 | Multistep forms are common on the web. It's used to breakdown a big form into multiple smaller ones. Typically; a multistep form consists of:
  8 | 
  9 | 1. A navigator indicating which step you're in
 10 | 2. A way to navigate between steps (forward and backward)
 11 | 3. Parts of the form displayed and hidden as needed
 12 | 
 13 | Let's start with the basic HTML
 14 | 
 15 | ```html
 16 | <form>
 17 |   <fieldset>
 18 |     <legend>Personal Information</legend>
 19 |     <label for="name">Name</label>
 20 |     <input type="text" id="name" name="name" required />
 21 |     <label for="date-of-birth">Date of birth</label>
 22 |     <input type="date" id="date-of-birth" name="date-of-birth" required />
 23 |   </fieldset>
 24 |   <fieldset>
 25 |     <legend>Contact Info</legend>
 26 |     <label for="tel">Phone number</label>
 27 |     <input type="tel" id="tel" name="tel" required />
 28 |     <label for="email">Email address</label>
 29 |     <input type="email" id="email" name="email" required />
 30 |     <fieldset>
 31 |       <legend>Preferred contact method</legend>
 32 |       <input type="radio" id="method-1" name="preferred-method" value="1" required />
 33 |       <label for="method-1">Email</label>
 34 |       <input type="radio" id="method-2" name="preferred-method" value="2" required />
 35 |       <label for="method-2">Phone</label>
 36 |     </fieldset>
 37 |   </fieldset>
 38 |   <fieldset>
 39 |     <legend>Message</legend>
 40 |     <label for="message">Message</label>
 41 |     <textarea id="message" placeholder="Reason for contact"></textarea>
 42 |   </fieldset>
 43 | </form>
 44 | ```
 45 | 
 46 | Nothing fancy is going on. We structured our form in a way that each `fieldset` directly descending from the `form` tag will be used as the step. Now let's write down the basic structure for our JavaScript utility that will transform this form into a multistep form
 47 | 
 48 | ```javascript
 49 | class MultiStepForm {
 50 |   
 51 |   // Will take care of creating the navigation buttons
 52 |   setupMultiStepForm() {}
 53 |   
 54 |   // We will use this to attach all the necessary events listeners
 55 |   bindEvents() {}
 56 | 
 57 |   // Hide current step and activate next step
 58 |   activateNextStep() {}
 59 | 
 60 |   // Hide current step and activate previous step
 61 |   activatePreviousStep() {}
 62 |   
 63 |   // Hide current step and activate step by index
 64 |   activateStep(stepIndex) {}
 65 |   
 66 |   // Validate the active step
 67 |   validateActiveStep() {}
 68 | }
 69 | ```
 70 | 
 71 | We need our class to be reusable to use it across different projects without modifications. To do so, we will need to pass different options to it like the form and the selector for the steps. We should be able to do something similar to the following:
 72 | 
 73 | ```javascript
 74 | const form = new MultiStepForm({
 75 |   form: formELement // should be an HTMLFormElement
 76 |   stepSelector: 'css-selector-for-the-step'	// String representing a CSS selector
 77 | });
 78 | ```
 79 | 
 80 | To do so, we will need to add a `constructor` function to our class:
 81 | 
 82 | ```javascript
 83 | class MultiStepForm {
 84 |   /**
 85 |     * @param {Object} options
 86 |     * @param {HTMLFormElement} options.form
 87 |     * @param {string} options.stepSelector
 88 |     */
 89 |   constructor(options) {
 90 |     this.form = this.options.form;
 91 |   }
 92 | }
 93 | ```
 94 | 
 95 | Now let's do a couple of checks to avoid errors from being thrown if anything went wrong. We should check that the form exists and there is at least two steps in the form.
 96 | 
 97 | ```javascript
 98 | constructor(options) {
 99 |   this.form = this.options.form;
100 |   if (!this.form instanceof HTMLFormElement) {
101 |     console.error('Error, the element used is not a form element');
102 |     return;
103 |   }
104 |   this.steps = this.form.querySelectorAll(this.options.stepSelector);
105 |   if (this.steps.length < 2) {
106 |     console.error(`Error, the form should contain at least 2 steps matching the selector ${this.options.stepSelector}`);
107 |     return;
108 |   }
109 |   this.steps = Array.from(this.steps);
110 |   this.setupMultiStepForm();
111 | }
112 | ```
113 | 
114 | `form` and `steps` will be used a lot in our class so we store them as class members. We do the necessary checks to ensure the script will work without troubles. We also log an error in the console for the developer without breaking the application. You can also `throw` an error if you want.
115 | 
116 | Note that `querySelectorAll` returns a **`NodeList`** which is an array-like object. We convert it to array using `Array.from` because we will need to work with it using Array methods.
117 | 
118 | Note that we call `setupMultiStepForm` afterward to bootstrap our form.
119 | 
120 | So far we are able to identify the form and the steps. Let's start with the first function `setupMultiStepForm`. This function should be doing all the initial work we need like:
121 | 
122 | 1. Create the form step navigator
123 | 2. Add previous and next buttons
124 | 3. Hide all steps except the first one
125 | 
126 | Let's start by creating the next and previous buttons for each step. Usually these buttons are placed at the end of the step so we will create a container that will host these buttons and append it to each step
127 | 
128 | ```javascript
129 | setupMultiStepForm() {
130 |   this.steps.forEach(step => {
131 |     // Create the buttons container per step
132 |     const buttonsContainer = document.createElement('div');
133 |     buttonsContainer.classList.add('buttons-container');
134 | 
135 |     // Create next button
136 |     const nextButton = document.createElement('button');
137 |     // We set the type to button to prevent it from submitting the form
138 |     nextButton.type = 'button';
139 |     // This action will be used to determine the behaviour of the button
140 |     nextButton.dataset.action = 'activateNextStep';
141 |     nextButton.innerText = 'Next';
142 | 
143 |     // Create previous button
144 |     const prevButton = document.createElement('button');
145 |     prevButton.type = 'button';
146 |     prevButton.dataset.action = 'activatePrevStep';
147 |     prevButton.innerText = 'Next';
148 | 
149 |     // Append buttons to the container
150 |     buttonContainer.appendChild(prevButton);
151 |     buttonContainer.appendChild(nextButton);
152 |     // Append container to the step
153 |     step.appendChild(buttonContainer);
154 |   });
155 | }
156 | ```
157 | 
158 | Now each step should have a new child containing previous and next buttons. The problem now is, not all steps should have a previous and a next button. The first step shouldn't have a previous button and the last step shouldn't have a next button. We can do that by modifying our script as follow:
159 | 
160 | ```javascript
161 | setupMultiStepForm() {
162 |   this.steps.forEach((step, index, array) => {
163 |     // Create the buttons container per step
164 |     const buttonsContainer = document.createElement('div');
165 |     buttonsContainer.classList.add('buttons-container');
166 | 
167 |     // Temporary placeholder for buttons;
168 |     const buttons = [];
169 | 
170 |     // If it isn't the first step, create a previous button
171 |     if (index !== 0) {
172 |       // Create previous button
173 |       const prevButton = document.createElement('button');
174 |       prevButton.type = 'button';
175 |       prevButton.dataset.action = 'prevStep';
176 |       prevButton.innerText = 'Previous';
177 |       buttons.push(prevButton);
178 |     }
179 | 
180 |     // If it isn't the last step, create a next button
181 |     if (index === array.length - 1) {
182 |       // Create next button
183 |       const nextButton = document.createElement('button');
184 |       // We set the type to button to prevent it from submitting the form
185 |       nextButton.type = 'button';
186 |       // This action will be used to determine the behaviour of the button
187 |       nextButton.dataset.action = 'nextStep';
188 |       nextButton.innerText = 'Next';
189 |       buttons.push(nextButton);
190 |     }
191 |     // Append buttons to the container
192 |     buttons.forEach(button => {
193 |       buttonContainer.appendChild(button);
194 |     });
195 |     // Append container to the step
196 |     step.appendChild(buttonContainer);
197 |   });
198 | }
199 | ```
200 | 
201 | Now each step should have the correct navigation buttons. These buttons will do nothing yet.
202 | 
203 | Next we should hide all steps except the first one. We can do that by adding the following line to the loop:
204 | 
205 | ```javascript
206 | setupMultiStepForm() {
207 |   this.steps.forEach((step, index, array) => {
208 |     ...
209 |     // If it isn't the first step, create a previous button
210 |     if (index !== 0) {
211 |       ...
212 |       step.hidden = true;
213 |     }
214 |     ...
215 |   });
216 | }
217 | ```
218 | 
219 | `hidden` is a global boolean attribute that is used to indicate that an element is no longer relevant on the document. Browsers will hide elements with `hidden` attribute.
220 | 
221 | Note that CSS can easily override the display elements with `hidden` attribute because it overrides the user agent stylesheet. For example if you're setting the step container's display using CSS to `block` or `flex`, it will be visible. The best way to ensure that an element with `hidden` is to use CSS like the following:
222 | 
223 | ```css
224 | [hidden] {
225 |   display: none !important;
226 | }
227 | ```
228 | 


--------------------------------------------------------------------------------
/draft.md:
--------------------------------------------------------------------------------
 1 | # Draft
 2 | 
 3 | * [Introduction](./01-introduction.md)
 4 | * [The structure of forms](./02-structure.md)
 5 |   * Different types of input
 6 |   * Structural elements
 7 |   * Accessibility practices
 8 |     * Label attribute
 9 |     * Keyboard navigation
10 |       * Select options
11 | * Data exchange
12 | * Styling
13 | * Design patterns in forms
14 | * Validation
15 |   * Native validation
16 |   * Extended validation with constraint validation
17 | * Forms and security
18 | * [DOM 101](./04-dom-101.md)
19 | * Events
20 | * Third party plugins for working with forms
21 | * Real life cases
22 |   * Multistep form
23 |   * Cross fields interaction
24 |   * Group duplications
25 |   * Form inside dialog


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # HTML Forms
2 | 
3 | This is my attempt to write a book about a topic I learned a lot about during my career. Forms are everywhere on the web. This is why I dedicate that book to go through everything about them.
4 | 
5 | This work is in a very early stage, I don't expect it to be complete before at least 6 months. There is a lot I am intending to cover, hopefully that end up beneficial to anyone.
6 | 
7 | Contributions and corrections are welcomed. Please open an issue first.


--------------------------------------------------------------------------------