DONATE  
MENU
HTML
JAVASCRIPT
JSON
AJAX

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Html Forms » HTML Forms
Share Tweet WhatsApp

HTML Forms

HTML forms are used in collecting various forms of data like texts, numbers, dates and a lot others for processing or storage or whatever purpose. Forms are created in HTML using the <form> tag which creates a block element that can contain your numerous form inputs.
<form>
</form>
FORM ATTRIBUTES Aside the general attributes that are applicable on all HTML elements, the HTML form element have certain distinct attributes helping in the processing of a form since forms basically are created to collect data from a user for storage or processing. Some of such attributes are: METHOD: The value of the method attribute can either be POST or GET. This attribute specify how the data collected from a form should be sent to wherever they will be process when a form is submitted. GET METHOD If the method is GET, the form values will be sent like a URL with parameters and values. For example, assuming a form data will be sent to a webpage, process.html, when submitted. The form data will be sent in a URL like process.html?username=myusername&password=123. From the above, the username is a parameter and its value is "myusername", which is what was entered by the user. Same is the password. The disadvantage of using this method is that there is a limit to the number of parameters and values a web browser can take. Also, it is not secure as a web user can directly load the data processing page url (process.html) with different parameters (e.g process.html?username=hacker&password=675) and the values will be processed even though they were not submitted via the form page. POST METHOD This is the best method recommended for sending data of forms that should be secure. Unlike the GET method, where data are sent like URLs with parameters, the POST method send such data in a separate request body which can only be created when the form is submitted. It is secure and can be use in sending any amount of data. ACTION: The action attribute of a form element simply specify where the data collected via a form should be sent to for processing when a form is submitted. The data can be sent to the same webpage where the form element is or a distinct webpage meant for the processing of such forms. The form will usually redirect to the specified webpage or file when submitted. EXAMPLE Assuming we are processing the data collected from a form via another webpage, a PHP file, let's see how the data will be sent to that webpage. php_form_action_20210111111914.php file - where our form data will be sent to with the action attribute
<?php
//If the form is submitted
if ($_SERVER['REQUEST_METHOD'] == "POST"){

//We print the received username as sent from the form
echo "Welcome, ".$_POST['username'];
echo "<br/>";

//We also print the received password as sent from the form
echo "Your password is ".$_POST['password'];
}
?>

Copy SEE RESULT

Our webpage file - where the form is contained and where data will be sent from to the php file
<h3>REGISTER</h3>
<form method='POST' action='php_form_action_20210111111914.php'>
<fieldset>
<legend>Details</legend>
<p><input type='username' name='username' placeholder='Enter a username'/></p>
<p><input type='password' name='password' placeholder='Compose a password'/></p>
<p><input type='submit' name='sbtn' value='SUBMIT'/></p>
</fieldset>
</form>

Copy PRACTICE IT

FIELDSET AND LEGEND The HTML <fieldset> tag can be used in grouping the information that should be entered in a form. Have you ever been handed a paper form in which the form is divided into sections like personal information, educational information and career information? The <fieldset> tag helps in achieving a similar feat with HTML forms. The <legend> tag helps in specifying the name for each of the sections created with the <fieldset>. EXAMPLE
<h2>FILL THE FORM BELOW!</h2>
<form>
    <fieldset>
        <legend>Personal Information</legend>
    <p>Full name: <input type='text'/></p>
        <p>Age: <input type='text'/></p>
        <p>Nationality: <input type='text'/></p>
    <p>Address: <input type='text'/></p>
    </fieldset>
        <fieldset><legend>Educational Information</legend>
      <p>School Attended: <input type='text'/></p>
           <p>Certificate Obtained: <input type='text'/></p>
    <p>Grade: <input type='text'/></p>
    </fieldset>
        <fieldset><legend>Work Information</legend>
       <p>Work Place: <input type='text'/></p>
    <p>Position: <input type='text'/></p>
          </fieldset>
    <p><input type='submit' value='SUBMIT'></p>
</form>

Copy PRACTICE IT

FORM ELEMENTS You will learn about the numerous elements used in collecting data from web users in the following chapters. SUMMARY
  1. The <form> tag enables you to create a form element in HTML.
  2. It has some distinct attributes that enables you to submit and process whatever data that was filled in to its various input elements.
  3. The method attribute specify how the data collected from a form should be sent to wherever they will be process when a form is submitted.
  4. The action attribute of a form element simply specify where the data collected via a form should be sent to for processing when a form is submitted.
  5. The HTML <fieldset> tag can be used in grouping or dividing the information that should be entered in a form into various sections e.g background information, educational information, career information and etcetera.
  6. The <legend> tag helps in specifying the name for each of the sections created with the <fieldset>.
Take a short quiz on HTML Forms.
Ask a question or tell us if HTML Forms is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode