heading.append(addParagraph("Jen Simmons - LinkedIn Learning - February 2020"));
heading.append(addParagraph("Chapter 8 - Forms and Interactive Elements"));
main.append(addSubHeader("HTML Form Basics"));
main.append(addParagraph("We will start with a basic HTML and then add a very simple form that allows a user to enter a name and email address in order to sign up for a mailing list. We will start out with a simple HTML page which you can access in the html file, <a href=\"samples/form-stage1.html\" id=\"form1\">form-stage1.html</a>. This is currently blank - that is, there is nothing in the body so there is nothing visible in the viewport."));
main.append(addParagraph("We will start by creating a <form> element and we will add a <label> element to tell the suer what needs to be entered and an input box. The syntax for this is as follows."));
main.append(addParagraph("The amended page with these elements is at <a href=\"samples/form-stage2.html\" id=\"form2\">form-stage2.html</a>."));
main.append(addParagraph("Note that the <input&ht; element doesn't have a closing tag and this is for two reasons. Firstly, it is an older element and it has been included in HTML for decases, but also it is really a placeholder. That is, it isn't just a visible element, it does provide some additional functionality as well - it is leveraging browser functionality."));
main.append(addParagraph("It might be worth noting that the form elements haven't been styled at all so the boxes look like the sort of thing you might have seen in 1995, but that is a secondary issue. More importantly, although it looks like a form, we can enter something into the input boxes but nothing happens."));
main.append(addParagraph("The first step in rectifying this is to add a button."));
main.append(addParagraph("The form with the button added can be found in <a href=\"samples/form-stage3.html\" id -\"form3\">form-stage3.html</a>."));
main.append(addParagraph("So this now looks complete and our users would expect something to happen when they click on the button, but we haven't added any functionality yet. We need to specify what will happen when the button is clicked and to do that, we will add a couple of attributes to the <form> element."));
main.append(addParagraph("NOTE - we wouldn't usually use the get method in this situation because it is not very secure. In this instance, it is being used as a very simple method of demonstrating the functionality of the submit button."));
main.append(addParagraph("Now, if we look at <a href=\"samples/form-stage4.html\" id=\"form4\">form-stage4.html</a>, you will notice that when we click on the button, the success page is loaded."));
main.append(addParagraph("However, the data entered into the form has not been passed to the success page. To do that, we want to have some way of referencing this information and we can do that by adding a name attribute to the input elements."));
main.append(addParagraph("We can look at this in <a href=\"samples/form-stage5.html\" id=\"form5\">form-stage5.html</a>, but bear in mind that there are not really any exercise files for this course and I don't actually know how to pass the name and email address over to the success page. I will look into that later, but for the time being this data is not being shown."));
main.append(addParagraph("Now, we do have a label and an input box for name, and a similar pair for email. These have been placed side by side on the page but other than proximity, there is nothing to link the two together and this can cause problems on some platforms. There are two ways in which we can fix this. The first is to add a for attribute to the label and a matching id attribute to the input (essentially, this is telling the browser that our label is the label for the element that has the corresponding id."));
main.append(addParagraph("Similarly, this clearly indicates to the browser that the label and input box are related to each other. I have used the former method and the result can be seen in <a href=\"samples/form-stage6.html\" id=\"form6\">form-stage6.html</a>, which doesn't really look any different to the previous version. However, notice that when you click on a label, the associated input but takes focus (the border of the box turns blue) and this is a useful method of testing the link between the label and the input."));
main.append(addSubHeader("More on Forms"));
main.append(addParagraph("You may have noticed that in the last example shown above, we smeaked in an additional attribute associate with the <input> elements."));
main.append(addParagraph("The type attribute tells the browser what sort of input we expect. In this case, it is text which means that the browser will happilly allow us to type anything into the input boz without performaing any sort of validation. Actually, by default, the type for an input box is text, so this can be omitted as it was in previous examples. The browser will perform some validaton based on the value of type. For example, we can give it a value of email."));
main.append(addParagraph("This tells the browser that the user is expected to type an email address in the box and the browser will only allow the user to continue if something that looks like an email address has been entered as we can see in <a href=\"samples/form-stage7.html\" id=\"form7\">form-stage7.html</a>."));
main.append(addParagraph("Now, if we enter something that doesn't look like an email address and click the sign up button, a message pops up telling us to add a valid email address and we do not see the success page. Note that a valid email address is a string of text that includes an ampersand so something like a@a or 1@1 would be accepted as a valid email address."));
main.append(addParagraph("You may notice that although the browser will check any text that we enter for email address, if we leave the field blank, we don't see any error and the browser shows us the success page. This is because the user doesn't have to add an email address. If we want to ensure that an email address is entered, we can add the attribute, required, which doesn't need a value."));
main.append(addParagraph("Now, if the email field is left blank, when the user clicks the Sign Up button, they will see a message indicating that an email address is required and we can see this in <a href=\"samples/form-stage8.html\" id=\"form8\">form-stage8.html</a>."));
main.append(addParagraph("We can also add a type to the button which in this case would have a value of \"submit\" so that the browser knows which button to activate when the user presses enter."));
main.append(addSubHeader("More on Forms"));
main.append(addParagraph("Another atrribute we can use with input is placeholder which puts some sample text in the input box to give the user an example of the sort of thing the user should type in."));
main.append(addParagraph("This can be seen in <a href=\"samples/form-stage9.html\" id=\"form9\">form-stage9.html</a>. Notice that the placeholder text is light grey and when the user clicks on the email input, it disappears when you start to type an email address. The placeholder doesn't assign any value to the email so if the user wanted to use this suggestion, he (or she) would have to type it out in full."));
main.append(addParagraph("Similar to placeholder is the value attribute which also provides a suggested, in this case, email address but it does actually provide this as a value. Essentially, it is providing a default value so you would use this to add some data that you think may be correct. For instance, if the user has previously provided an email address, you might use that as the default value so the user can just leave it as is and click the sign up button or can delete if he (or she) wants to provide a different email address."));
main.append(addParagraph("This is demonstrated in <a href=\"samples/form-stage10.html\" id=\"form10\">form-stage10.html</a>. You should bear in mind that value might be the better option if you have a good reason to beleive that the default value is likely to be the value a user will want to use. If it is more likely that it won't be, or if you simply dont know what value the user is likely to enter, placeholder is a better option because it can be a nusiance for the user if they have to delete a value before they type in their required value, especially if there is no good reason for it to be there."));
main.append(addSubHeader("Additional Form Element Types"));
main.append(addParagraph("We have seen a couple of examples of the type attribute for input already, text and email, and we have seen that using particularly types allows us to take advantage of input validation provided by the browser - such as checking that an email address is in a valid format for an email address."));
main.append(addParagraph("We will look at some additional types here shown in the examples below."));
main.append(addParagraph("These can be seen in <a href=\"samples/form-stage11.html\" id=\"form11\">form-stage11.html</a>. Note that aside from the additional inputs, I have made a couple of changes here, particularly that all of the inputs with the exception of search are required. I have also inserted each input into the related <label> element."));
main.append(addParagraph("Of the new types, password is probably the most interesting. It invokes the browsers built-in password handling so, for example, the browser provides an automatically generated password and does not echo the password if you type one in."));
main.append(addParagraph("For the search and tel types, I don't see anything to suggest that these are in any way different from the text type. But some browsers might provide, for example, a telephone-like keypad to input a telephone number of a different keypad for search. At this stage, the important point is to be aware of the fact that these different types do exist and can be useful."));
main.append(addParagraph("If we want the user to be able to type in more than one line of text, we can use a <textarea> element in place of an input elment."));
main.append(addInsetCodeListing(["<label>"," Text Area"," <textarea"," name=\"textarea\"",""," type=\"text\""," />","</label>"]));
main.append(addParagraph("This has been added to <a href=\"samples/form-stage12.html\" id=\"form12\">form-stage12.html</a>. Note that we have the option of setting a height and width for the text area but this is not required. In any case, this is often specified in the CSS. The browser will also provide scroll bars and a resize handle for the text area."));
main.append(addParagraph("I should mention that I haven't really bothered with styling the forms so they do look a little dated, but as more inputs are added, it is starting to get a bit crowded so I have moved the boxes so that there is only one on each line."));
main.append(addParagraph("There are a whole range of types we can attrbiute to an <input> element and you can find a list of these on the <a href=\"https://www.w3schools.com/tags/att_input_type.asp\">W3 Schools</a> website. Most of these are fairly self-explanatory, but I have added three more to my form just to demonstrate them in action. These are date, color and file."));
main.append(addParagraph("Each of these provides a method for selecting a value that is probably familiar to most web users and will probably just work in the way you expect and you can look at these in <a href=\"samples/form-stage13.html\" id=\"form13\">form-stage13.html</a>."));
main.append(addParagraph("If you click on the input for date, a calendar widget appears allowing you to select a date, if you click on the colour input, a swatch appears allowing you to select a colour and if you select the file input, a file dialog box appears to allow you to select a file. The main point in demonstrating these is to show that the file type allows you to leverage functionality from the browser to produce profeessional looking inputs and, just as importantly, since this is very easy to do, a lot of website take advantage of this and so the functionality is going to be familiar for the majority of users."));
main.append(addParagraph("A very useful attribute that works well with file is accept."));
main.append(addParagraph("For a demonstration of this, please see <a href=\"samples/form-stage14.html\" id=\"form14\">form-stage14.html</a>."));
main.append(addParagraph("There are two aspects to this. The first part, \"image/*\" looks like it might be specifying a default folder to searh in, but it is actually just specifying the type of file you can open, although as with any file dialog box, it will offer you the chance to change this at least to All Files. Multiple does exactly what you would expect in that it allows the user to select multiple files to open. If omitted, the user will only be able to select a single file."));
main.append(addParagraph("Most of the input types we have seen so far allow the user to determine what the input value should be, albeit often with some constraints as to what can be selected. For example, with file, you can select and file located on the computer or with colour you can select any colour from the swatch."));
main.append(addParagraph("Other input types are more constraining. For example, you can use the type checkbox to create a checkbox that the user can select or deselect as required."));
main.append(addParagraph("Note that after the type, we have an additional attribute of checked and this is the default value. If you look at <a href=\"samples/form-stage15.html\" id=\"form15\">form-stage15.html</a>, you will see that the form is already checked and the user can leave it checked or uncheck it. We could change this to unchecked to have the checkbox unchecked by default, but if we omit it altogether, the checkbox will be unchecked by default anyway so unchecked is redundant and you may therefore not see it very often. However, if you really want unchecked to be the default, specifying that demonstrates the fact that this is a deliberate choice rather than just a default value that you don't care about."));
main.append(addParagraph("The value is required for checkbox, and you can demonstrate that this value is passed to the success page when the user clicks the submit button, but this does not appear in the form."));
main.append(addParagraph("We can also provide the user with a drop-down list, although, in this case, it uses a <selectlist> element rather than an <input> element."));
main.append(addParagraph("As you can see, each option is added as an <option> element inside the <selectlist> element and this works in exactly the way you would expect of a drop down menu as is demonstrated in <a href=\"samples/form-stage16.html\" id=\"form16\">form-stage16.html</a>"));
main.append(addParagraph("We can also create a group of checkboxes by using a <fieldset> element. We can also do the same for radio buttons and as you might expect, you can select as many checkbokes you like within a fieldset, but only one radio button. For this reason, we didn't mention radio buttons previously, because, by their nature, they can only exist as a group of two or more. This is because radio buttons are intended to allow the user to select any one (and only one) from a group of possible options."));
main.append(addParagraph("A couple of points worth mentioning here are the legend attribute which is used as a sort of \"header\" for the group of options. Also, in both fieldsets, the first option is checked in the code which means that when the page is opened, the first option will be pre-selected. With the checkboxes, any of the options or any combination of options may be checked by default."));
main.append(addParagraph("With the radio buttons, if you apply the checked attribute to more than one option, when the page loads, you will see that only one of these options is selected. I would guess that this is because as the page loads, the first option with a checked attribute is marked as being checked, but when the browser encounters another option in the same fieldset with a checked attribute, it marks that one as being checked as well, but the nature of radio buttons means that the first option is marked as unchecked."));
main.append(addParagraph("This may be a little clearer if you look at <a href=\"samples/form-stage17.html\" id=\"form17\">form-stage17.html</a> where you will see that \"This\" is selected. If you then select \"That\", the act of selecting \"That\" causes \"This\" to be deselected. Similarly, if you try to make more than one option selected by default, you will still only see one option selected because of the fact that checking an option results in the other options being unchecked and, of course, only one option at a time can be checked."));
main.append(addParagraph("As a final note regarding forms, it is important to remember that this section is only scratching the surface in terms of what is possible with forms and to a large extent, it is showing you what you can do with forms and how you can leverage the built-on functionality of a browser. But we aren't really doing anything else with it. For example, if you look at the final example, <a href=\"samples/form-stage17.html\">form-stage17.html</a>, you can use the inputs demonstrated here to select a colour, a file, an option from a set of radio buttons and so on, but we aren't doing anything with these choices. Forms is, in fact, a subject all of its own and there is a LinkedIn course on this called <a href=\"https://www.linkedin.com/learning/html-css-creating-forms\">HTML & CSS: Creating Forms</a> and it is worth checking this out. Also, the forms demonstrated here don't really use much in terms of CSS so they don't look as neat and attractive as those in the course. I will be covering the CSS courses next so I may return to these later and style these forms as I get better with CSS."));
