HTML Forms

HTML Forms are used to send data to a server accross the web. There are lot of form elements such as text fields, radio button, check boxes, buttons and more. In HTML we can define the form elements with various html tags.
The basic tags used for forms are <form>, <input>, <textarea>, <select> and option.

• <form> tag uses to create HTML forms.
  Syntax :
  <form>
       --Form elements --
  </form>
• Attributes of the form element
• action
  action attribute describes where the form content will be sent when it is submitted.
• method
  method attribute specify hot to passes this information. There are 02 methods available for data passing i.e get & post. 
• GET 
  default method is get. when using this method browser displays sending data   with its URL.
• POST
  Post method hides information. Passwords & othere confidential data sending with this method

Ex:
<form action = "getDetails.php" method = "POST">
     -- Form elements --
</form>


• Text Boxes
  This tag defines a single-line input field to enter texts
  Syntax:
  <input type = "text" value = "Text here" />
• Value attribute uses to define default value of the text box.
  Ex:
  Code:
  <form>
     Name: <input type = "text" value = "Your Name here" />
     Address: <input type = "text" value = "Your Address here" />
  </form>
  
  Output :
  Name :
  Address:


• Password Field
  This tag defines a password input field and it hides characters entered by users.
  Syntax:
  <input type = "password" value = "password here" />
• Ex:
  Code:
  <form>
     User Name: <input type = "text" value = "Username here" />
     Password: <input type = "password" value = "Password" />
  </form>
  
  Output :
  Username : 
  Password: 


• Check Boxes
  HTML Check Boxes are use to select one or more options out of limited number of options by toggled on or off.
  Syntax:
  <input type = "Checkbox" />
  Ex:
  <input type = "checkbox" name = "Movie" value = "Romantic" /> Romantic <br />
  <input type = "checkbox" name = "Movie" value = "Horror" /> Horror <br />
  <input type = "checkbox" name = "Movie" value = "Act" checked = "checked" /> Action
  
  Out put :
  
  Romantic
  Horror
  Adventure
• name attribute define the name of the check box. Use same name for all check boxes within the same group.
• Value attribute define the exact value of each check box.
• Checked attribute define the initial state of the check box to be switched on. Default state is unchecked.


• Radio Button
  HTML Radio Buttons are use to select only one option out of limited number of options within the group.
  Syntax:
  <input type = "radio" />
• name attribute define the name of the radio button. Use same name for all Radio Buttons within the same group.
• Value attribute define the exact value of the Radio Button
• Checked attribute define the initial state of the Radio Button to be switched on. Default state is unchecked.
  
Ex:
<input type = "radio" name = "gender" value = "M" checked = "checked"/> Male<br />
<input type = "radio" name = "gender" value = "F" /> Female

Out put :

 Male
 Female


• Submit Button
  HTML Submit button is a special Button uses to send form data to the server.  Action attribute of the form tag describes where the data sent.
  Syntax:
  <input type = "submit" />
  
  • Value attribute specify the text on the button
  
  Ex:
  <form action = "result.php" method = "get">
     Comment : <input type = "text" value = "Comment here" name = "txtComm" /> <br />
     <input type = "submit" value = "Submit" name = "btnSubmit" />
  </form>
  
  Output:
  
  Comment :
  


• Reset Button
  HTML Reset button is a special Button uses to rest data in the form to its initial state.
  Syntax:
  <input type = "reset" />
  
  • Value attribute specify the text on the button
  
  Ex:
  <form>
     First Name :<input type = "text" value = "First Name here" name = "FN" /> <br />
     Middle Name :<input type = "text" value = "Middle Name here" name = "MN" /> <br />
     Last Name :<input type = "text" value = "Last Name here" name = "LN" /> <br />
     <input type = "reset" value = "Reset" name = "btnReset" />
  </form>
  
  Output:
  
  First Name :
  Middle Name :
  Last Name :
  

Will be coninued