HTML - Forms

HTML Forms

HTML forms are elements that are used to collect user data (such as names, phone number, password etc). Data are usually collected and sent to the server for processing or for other use.

Below is an example of simple HTML form where a user can type their names, phone number and password.

Simple HTML Form

Example

Creating a Simple HTML Form

Now let's take it step by step on how create a simple HTML form.

  • <form> - This tag is the container that houses other form elements
  • It takes the following major attributes:
    • action - used to send user data to the server page (URL).
    • method - used to specify the HTTP method when submitting user data.
  • <label> - This form element is used to label any other form element.
  • It takes the following major attributes:
    • for - used to specify which element the label belongs to.
    • id - same function as the for attribute.
  • <input> - This is an input form element that is used to collect user data depending on the type.
  • It takes the following major attributes:
    • type - used to specify the type of data to be collected.
    • name - used to specify the name of the input element. Also, very useful when referencing.
  • <button> - The button tag is to used for submission of data to the specified URL on the action attribute in the <form> tag.
  • It takes the following major attributes:
    • type - used to specify the type of input element.
    • name - used to specify the name of the input element. Also, very useful when referencing.
    • value - used to set the value of the element.
  • tips
    TIP:

    An <input> tag can also be used in place of the button tag for submission.
    <input type="submit" name="submit" value="submit">


Now try create a simple form on your own, using the example below, add as many input elements as you want.

Simple HTML Form

Example

ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT