Forms are defined using the <form> element and contain a number of form controls to collect data from the user.


Some of the most frequently used form attributes are:

  • name: Unique name of the form
  • action: Name of the script URL to receive the collected data
  • method: Define the method to be used to upload the collected data, generally GET or POST



<form name="userDefiend" action="formAction.php" method="POST"  >

...input elements...






The forms method attribute defines how to send data to the resource defined in the action attribute.



  • Appends data into the URL as name/value pairs, and is therefore visible!
  • Should NEVER be used with sensitive data
  • The length of the URL is limited to ~2048 characters
  • Can be bookmarked
  • Remains in browser history



  • Appends data inside body of HTTP request
  • No size limitations
  • Cannot be bookmarked
  • Do not remain in browser history



<input /> 


The most important form element is the <input /> element, which is used to collect user information.


<input /> element attributes:

  • type: Specifies the type of input control
  • name: Specifies the name part of the name/value pair sent to the server, representing each form control and the value the user entered
  • value: Specifies an initial value for the text input control that the user will see when the form loads
  • size: Specifies the width of the text-input control in terms of characters. Default is 20
  • maxlength: Specifies the maximum number of characters a user can enter into the text box


The <input /> element has many types:

  • Button, Submit, Reset
  • Text
  • Password (characters are masked by being shown as asterisks)
  • Radio buttons
  • Checkboxes
  • Select boxes
  • Hidden controls
  • File select boxes


Button, Submit, Reset


The input element is also used to create buttons, which are specified using the type attribute:

  • button. Specifies a button to trigger a script
  • submit. Specifies a button to submit the form
  • reset. Specifies a button to reset the form controls to their initial values



Text Input


<input type="text" />


The <textarea> form element allows multi-line text to be entered.


  • name: Specifies the name part of the name/value pair sent to the server
  • rows: Specifies the number of rows
  • cols: Specifies the number of columns



Radio buttons


<input type="radio" />


Radio buttons allows the user to select ONLY ONE of a limited number of choices, and therefore the name attribute should be set to the same value for each input choice. The optional checked attribute provides a default selection:



Check Boxes


<input type="checkbox" />


Check boxes allow more than one selection to be made. The optional checked attribute provides a default selection:



Select Boxes


<select name="dropdown">


The <select> box is used to provide a drop down selection of choices, which are defined by its <option> elements.


Select attributes:

  • name: Specifies the name for the control
  • size: This Used to present a scrolling list box
  • multiple: Allows a user to select multiple items from the dropdown

Option attributes:

  • value: Value sent to the server if this option is selected
  • selected: Specifies this option should be initially selected when the page loads
  • label: An alternative way of labeling options


Important: remember to provide a name/value pair to the <select> element so that the value can be sent to the server!




Hidden Controls


<input type="hidden" />


Allows values to be passed to a form without being seen in browser. Useful to pass temporary or session data between forms, or perhaps as a temporary store for information already entered by the user.




File Select Boxes


<input type="file">


Allows the user to select a file from their local machine and upload it to the server.


Leave a Reply