HTML5 Form

Summary -

In this topic, we described about the Form with detailed example.

Form attribute used to associate with an input, select, textarea element with a form. Form attribute specifies which form the associated input element belongs to.

The form elements can be coded as a child of the form or also coded away from the form. When the form elements coded as inline elements, it is easy to understand and usage.

When it is coded away from the form, it is really hard to understand which form the element belongs to. HTML5 introduces the form attribute to specify with form element when it is away from form to understand where it belongs to.

In the form attribute, the tracing-id of the form needs to be specified to tag the element with form.

Note! Inline form elements doesn’t require the form attribute to identify. By seeing the code it self, we can identify.

Syntax -

<form action="#" method="POST" id="form-tracing-id">
  <!-- Inline elements -->
</form>
<input type="text" name="tracking-name" id="tracking-id" 
              form="form-tracing-id">

Example -

Below example describes about how the form attribute used for the email element.

<html>
   <head>
       <title>Autofocus Example</title>
   </head>
    <body>
       <form action="" >
         <label for="username">Username: </label>
         <input type="text" name="username" id="username" autofocus>
         <label for="password">Password: </label>
         <input type="password" name="password" id="password">
         <input type="submit" value="submit">
       </form>
    <p> Form ends here. However, the below input element is also part 
                     of the form using form attribute.</p>
        <label for="email">Email: </label>
        <input type="text" name="email" id="email">
   </body> 
</html>

Output-

Form ends here. However, the below input element is also part of the form using form attribute.

Email: