Bookmark and Share

HTML - Web Forms

HTML web forms are a composition of buttons, checkboxes, and text input fields embedded inside of HTML documents with one goal in mind: to capture user input. By doing things such as providing fields for user data such as names, phone number, and email addresses, web forms give users the opportunity to interact directly with a webpage.

Advertise on Tizag.com

HTML forms are placed on a web page using the <form> tag. This tag should encapsulate a series of other form elements, identifying them as a single cohesive web form.

HTML Form Element:

<formg name="myWebForm" action="myServerSideScript.php" method="post">
   <input type="checkbox" /> Checkbox 1<br />
   <input type="text" /> Text Field 1<br />
   <input type="submit" value="SUBMIT" />
</form>

HTML Web Form:

Checkbox 1
Text Field 1

HTML form elements rely on action and method attributes to identify where to send the form data for processing (action) and how to process the data (method). In the code above, we've inserted some make-believe values to represent what a typical HTML form might look like behind the scenes.

Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP, PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML form elements. A complete form-processing example using PHP can be found here: PHP Form Processing Example.

For the purpose of following along, we can also adjust the action property slightly to have the form launch an email client instead of processing a make-believe server-side script. This will provide us with some form interactivity for us as we learn more about HTML forms.

HTML Email Form Element:

<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
   <input type="checkbox" /> Checkbox 1<br />
   <input type="text" /> Text Field 1<br />
   <input type="submit" value="SUBMIT" />
</form>

HTML Email Form:

Checkbox 1
Text Field 1

Now when the SUBMIT button is clicked, the user should see their default email client launch.

HTML forms provide user interaction between visitors and the website while simultaneously collecting priceless user data from your users. They are a vital tool for any webmaster, and these days, it is common place to see form elements embedded in every web page.

Bookmark and Share


Tips

  • Remember to set the name and value attributes for your forms so the document created will be neatly organized.
  • Remember to place submit buttons with the form tags to submit the document correctly.


Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials