HTML forms are required, when we want to collect data from site visitors or create database of structured data. For example while creating an e-mail Id you are request to fill up an HTML form like first name, last name, contact no. etc.

HTML Forms

HTML forms are required, when we want to collect data from site visitors or create database of structured data. For example while creating an e-mail Id you are request to fill up an HTML form like first name, last name, contact no. etc.



<form action = "update.php" method = "GET">
 <label for = "fName">First Name : </label><br />
  <input type = "text" name = "firstName" id = "fName" value =  "Narendra"/><br />
 <label for = "mName">Middle Name : </label><br />
  <input type =  "text" name = "MiddletName" id = "mName" value = "Damodardas"/><br />
 <label for = "lName">Last Name : </label><br />
  <input type =  "text" name = "LastName" id = "lName" value = "Modi"/><br />
 <input type = "submit" value = "submit"/>
</form>

Try Yourself


Above Example looks something like this:









HTML forms can be defined on webpage with <form> element. <form> element contains different types of other input elements like text field, numerical field, checkbox, radio button, submit button etc. Below is the syntax and example as well.



<form action = "Script Page URL" method = "GET/POST">
   form elements like input, textarea etc.
</form>




<form action = "" method = "">
 First Name: <input type = "text" name = "user_id" /><br><br>
 Last Name: <input type = "password" name = "password" /><br /><br />
 <input type = "checkbox" name = "chemistry" value = "on" /> Maths
 <input type = "checkbox" name = "maths" value = "on" /> Chemistry
    <input type = "checkbox" name = "physics" value = "on" /> Physics <br /><br />
 Language : <input type = "radio" name = "subject" value = "Hindi" /> Hindi
    <input type = "radio" name = "subject" value = "English" /> English <br /><br />
 <input type = "Submit" name = "submit" value = "Submit" />
</form>

Try Yourself


Above Example looks something like this:

First Name:

Last Name:

Maths Chemistry Physics

Language : Hindi English



While a site visitor fills and submits the form, it posts the visitor’s data to a back-end application where it processes the data according to the server side scripts to store data into database. Server side scripts are language programs that used to navigate between client and servers. Like ASP script, PHP script, JSP scripts etc.



<form action = "update.php" method = "POST">
 First Name: <input type = "text" name = "user_id" /><br><br>
 Last Name: <input type = "password" name = "password" /><br /><br />
 <input type = "Submit" name = "submit" value = "Submit" />
</form>

Try Yourself

HTML Form Control Element

There are different types of form control elements which give different shape to HTML forms and collect the data into different manners. Brief descriptions of HTML Form Control Element are given below:

Type of HTML Form Control Elements


  • Input Control Element – The most important form element which is used in several ways with type attribute.
  • Select Box element – Select element defines the drop down list of the multiple values.
  • File Select Control Element – File Select Element describe the file select box to upload the files.
  • Clickable Button Element – Button element defines a clickable button. 
  • Output Control Element – Output element represents the result of a calculation like performed by a script.


 Above mentioned Form Control Elements behave differently with different attributes.  In next chapter we will study descriptively about HTML Form Control Elements and the use of attributes.

HTML5 Tutorial - HTML Forms
HTML5 Tutorial - HTML Forms



Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

2 comments: