Forms

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

Syntax:

 

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

...input elements...

</form>

 

 

IMPORTANT! Forms method GET Vs POST

 

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

 

GET

  • 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

 

POST

  • 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.

Attributes:

  • 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