HTML FORM

HTML Form :

An HTML form is used to collect user input. The user input is most often sent to a server for processing. An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
Syntax : 
  < form action = "Script URL" method = "GET|POST" > form elements like input, textarea etc. < /form >
HTML Form Elements :
The HTML < form > elements provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc.
Note: The < form > element doesn’t create a form itself but it is a container to contain all required form elements such as < input >, < label >, < textarea >, etc.
  • < input > - This is a fundamental form element. It is used to create form fields, to take input from user. The < input > element can be displayed in several ways, depending on the type attribute.
  • < textarea > - This element defines a multi-line input field (a text area). The size of < textarea > can be specified either using "rows" or "cols" attribute or by CSS.
  • < button > - The < button > element defines a clickable button. We can also create a clickable button using < input >tag by setting its type attribute to button.
  • < select > - The < select > element defines a drop-down list. A select box which is also called as drop down box provides option to list down various options in the form of drop down list, from where a user can select one or more options.
    • The < option > element 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.
  • < datalist > - 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. The list attribute of the < input > element, must refer to the id attribute of the < datalist > element.
  • < label > - This tag is used to specify a label for an < input > element of a form. The < label > element is useful for screenreader users, because the screen-reader will read out loud the label when the user focuses on the input element. The ‘for’ attribute of the < label > tag should be equal to the ‘id’ attribute of the < input > element to bind them together.


    • Difference of < select > tag and < datalist > tag :
                    < select > tag                                              < datalist > tag
  --------------------------------------------------    -----------------------------------------------------------
  The user can choose only one option from the given    The user can choose any option from the given list but
  list.                                                 can also use its own input.
  This tag is a form input type.                        This tag is not a form input type.
  The user has to scan a long list so as to select an   The user can easily input the option and get the hints and
  option.                                               then can be chosen by the user.
  
  The user can be restricted to a list of options.      The user is not restricted by the list of options.
  It doesn’t provide the auto-complete feature.         It provides the auto-complete feature
    HTML Input Types :
    In HTML < input type=" " > is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field.
    Note: The default value of the type attribute is "text".
  • text - Defines a single-line text input field
  • password - Defines a single-line password input field
  • submit - Defines a submit button to submit the form to server
  • reset - Defines a reset button to reset all values in the form.
  • radio - Defines a radio button which allows select one option.
  • checkbox - Defines checkboxes which allow select multiple options form.
  • button - Defines a simple push button, which can be programmed to perform a task on an event.
  • file - Defines to select the file from device storage.
  • date - Defines an input field for selection of date.
  • email - Defines an input field for entering an email address.
  • number - Defines an input field to enter a number.
  • tel - Defines an input field for entering the telephone number.


    • HTML Input Attributes :
  • value - The value attribute specifies an initial value for an input field.
  • size - The size attribute specifies the visible width, in characters, of an input field. The default value for size is 20.
    • Note: The size attribute works with the following
  • Input types: text, search, tel, url, email, and password.
  • multiple - Specifies that a user can enter multiple values. The multiple attribute works with the following input types: email, and file.
  • maxlength and minlength - The maxlength and minlength attribute specifies the maximum and minimum number of characters allowed in an input field.
  • min and max – The input min and max attributes specify the minimum and maximum numerical values for an input field.
  • checked - If type = "radio" or type = "checkbox" it will already be selected when the page loads,if checked attribute is given.
  • required - The input required attribute specifies that an input field must be filled out before submitting the form.
  • pattern - The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.
  • readonly – It specifies that an input field is read-only.It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls. The value of a read-only input field will be sent when submitting the form.
  • placeholder - Specifies a short hint that describes the expected value. (a sample value or a short description of the expected format).
    Note: The short hint is displayed in the input field before the user enters a value.
  • autofocus - The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
  • autocomplete - The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
  • novalidate – It defines that form elements should not be validated when submitted.


    • Form Validation :
  • The pattern attribute specifies a regular expression that the < input > element's value is checked against on form submission.
    • Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
    Tip: Use the global title attribute to describe the pattern to help the user.
  • An < input > element with type="password" that must contain 8 or more characters:
    Example: pattern=".{8,}"
  • An < input > element with type="password" that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:
    Example: pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"




    • (HTML - Media, Semantic and Non-Semantic Elements)