HTML FORMS

 

HTML Forms can be used to collect user date, The user input is most often sent to a server for processing to make a login form, registration form, a search form, and the likes. 

The <form> element defines an HTML Forms. 

HTML Forms Attributes

  • accept-charset: defines the character set of the form
  • action: specifies the form-handler/page-handler page; usually a .php page in the server-side where the data is processed
  • autocomplete: tells the browser to automatically complete Form elements
  • enctype defines the encoding of the data submitted by the form
  • method: defines the HTTP method to use when submitting a form e.g. GET or POST; it is explained further below
  • name, id, class used for identifying the form; for the purpose of styling and Document Object Manipulation
  • novalidate: tells the browser not to validate the form 
  • onSubmit: used to call a JavaScript function e.g. for form validation when the form is submitted 

target defines the target of the form e.g. target="_blank", form-handler will be opened in new tab

To submit an HTML Form a user has to click the "Submit" button.

The user will be redirected to the form-handler page specified by the action attribute where the input data is processed.

The form-handler is typically a Hypertext Processor (PHP) server page that runs scripts to process input data.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Forms </title>

        </head>

        <body>

            <form>

                <input type="text" >

                <input type="password">

                <input type="submit">

            </form>

        <body>

<html>

HTML Form Labels

An HTML Form Label is an inline element.

It can be associated with form elements or form controls like an input, textarea and select for accessibility purposes.

The <label> element defines an HTML Form Label.

To associate a label to an input we can use the for attribute with the value same as the input's id attribute.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Forms </title>

        </head>

        <body>

            <form>

                <label for="fname">First Name</label>

                <input type="text" id="fname">

                <label for="sname">Second Name</label>

                <input type="text" id=sname" value="Secound name">

            </form>

        <body>

<html>

Output

   


Another way to associate a label to an input is to nest the input within the <label> element.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Forms </title>

        </head>

        <body>

            <form>

                <label> First Name

                    <input type="text">

                </label>

            </form>

        <body>

<html>