Lesson 8: Developing HTML5 Forms

Hi viewers
This week, we will be learning about developing HTML5 forms.
An HTML form are used to collect user input. HTMl has form element that help with data input. There are so many different types of input elements, checkboxes, radio buttons, submit buttons, and more.
 Radio buttons: round buttons in a group of mutually exclusive pre-determined choices
 Check boxes: square buttons in a group of pre-determined choices from which the user can select more than one choice
Drop-down select list:rectangular field that can expand upon user interaction and allow users to select one or more pre-determined choices
 Text box : rectangle field into which users can type alphanumeric characters of their choice
Submit and Reset buttons: buttons typically found at the bottom of forms used for either submitting the form or clearing all user input from the form.
HTML5 Form Input Types: HTML5 has three main input types that  helps a developer create forms easily. These input types are <form>, <input>, and <button>.
 The <form> tag is still used to designate the beginning of a form on a page.
 The <input> tag is still used to create many types of form fields.
 The <button> tag is still used to create buttons associated with a particular form, as well as other types of clickable buttons.
HTML5 also uses some form elements that enhance the creation of web forms. these elements are:
<datalist>
Specifies a list of predefined choices for an <input> element.
<keygen>
Adds security to a form through asymmetric encryption by creating a key-pair generator field in the form.
<output>
Displays the result when a calculation is performed.
HTML forms use other helpful elements, such as <fieldset>, <legend>, <label>, <select> and <textarea>. These HTML5 elements are known as Global Attributes.
The <fieldset> element is used to group elements so that related fields are placed together in a form.
The <legend> element allows you to add a caption for a group of items created by the <fieldset> element.
The <label> element is especially useful for semantics and accessibility, which are current concerns in Web page design.
 The <select> element creates a drop-down selection list, and it uses the <option> element to identify your list options.
 The <textarea>
element allows an unlimited character length, but developers usually define the size by adding the rows and cols attributes.
I hope you learned something from here.