Learn HTML Forms





Part 1


In HTML5 we use the < form > element, to define an area to collect data



Code Example:

                      <form>
form 
</form>     
            


Form example (use CSS to style your form)



First name:

Last name:



Try yourself >>










Part 2


< input > Element


In HTML5 we use the < input > element along with several type attributes:


Type Description
< input type="submit" > create submit button (to submit the form data)
< input type="text" > create one line text area
< input type="radio" > create a radio button, let you choose.





Part 3

>

Submit Button


In HTML5 we use the < input type="submit" > to submit data to destination we choose, usally a database or email.


The destination will be placed in the form's action attribute:


Code Example:

                Start of showing code      <form action="../action_page.php"> <!--action= is where we send data -->
  First name:<br>
  <input type="text" name="firstname" value="enter first name"><br>
  Last name:<br>
  <input type="text" name="lastname" value="enter last name"><br><br>
  <input type="submit" value="Submit">
</form>     
            
Try yourself >>





Part 4

Text Input


< input type="text" > let you create a one line text area:


Code Example:

                Start of showing code   <form>
 Your First name:<br>
  <input type="text" name="firstname"><br>
 Your Last name:<br>
  <input type="text" name="lastname">
</form>    
            
Try yourself >>





Part 5

Radio Button Input


< input type="radio" > allows you to create multiple options to choose from:


Code Example:

                Start of showing code   <form>
  <input type="radio" name="car" value="bmw" checked> Bmw<br>
  <input type="radio" name="car" value="Mercedes"> Mercedes<br>
  <input type="radio" name="car" value="Volvo"> Volvo
</form>    
            
Try yourself >>

This is how the The Radio Button Input will look in a browser (no CSS):


Bmw
Mercedes
Volvo




Part 6

HTML Target Attribute


The target attribute let you decide what happns after sumbit was pressed, there are several options, new browser tab, current page, a frame.


by default the data will be sent to the current page, if you want to send data to a new page use _blank method:


../action_page.php is the destination we send data to, you can change it.

Code Example:

                Start of showing code   <form action="../action_page.php" target="_blank">
    
            
Try yourself >>






Part 7

HTML Method Attribute


The method attribute determine the HTTP ( GET ot POST) action when form data is submitted:


Code Example:

                Start of showing code   <form action="../action_page.php" method="get">

    
            
Try yourself >>


Code Example:

       Start of showing code   <form action="../action_page.php" method="post">


   
   
Try yourself >>










FreeCodeWiki best way to learn html, we allow students free and easy programming lessons,enjoy our html coding for beginners and above!



Navigation