PHP Tutorial - PHP Form Elements

Form Element List

The following table lists HTML elements in forms.

Element	Description
input type="checkbox"	A checkbox that lets users select multiple options.
input type="file"	A text box plus a button that opens a file selection dialog.
input type="hidden"	A hidden form element.
input type="password"	A password text box.
input type="radio"	A radio button.
input type="reset"	A button to clear the form.
input type="submit"	A button to submit the form.
input type="text"	A text box.
option	An option in a SELECT element.
select	A listbox; can also be a drop-down list box.
textarea	Multiline text box.

Password elements hide the password on the client side by using *s. The password is sent in plain text withno encryption.

Example

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <body> 
    <form action="index.php" method="get"> 
        <label for="textField">A text input field</label> 
        <input type="text" name="textField" id="textField" value="" /> 
        <label for="passwordField">A password field</label> 
        <input type="password" name="passwordField" id="passwordField" value="" /> 
        <label for="checkboxField">A checkbox field</label> 
        <input type="checkbox" name="checkboxField" id="checkboxField" value="yes" /> 
        <label for="radioButtonField1">A radio button field</label> 
        <input type="radio" name="radioButtonField" id="radioButtonField1" value="radio1" /> 
        <label for="radioButtonField2">Another radio button</label> 
        <input type="radio" name="radioButtonField" id="radioButtonField2" value="radio2" /> 
        <label for="submitButton">A submit button</label> 
        <input type="submit" name="submitButton" id="submitButton" value="Submit Form" /> 
        <label for="resetButton">A reset button</label> 
        <input type="reset" name="resetButton" id="resetButton"  value="Reset Form" /> 
        <label for="fileSelectField">A file select field</label> 
        <input type="file" name="fileSelectField" id="fileSelectField" value="" /> 
        <label for="hiddenField">A hidden field</label> 
        <input type="hidden" name="hiddenField" id="hiddenField" value="" /> 
        <label for="imageField">An image field</label> 
        <input type="image" name="imageField" id="imageField" value="" src="asterisk.gif" width="23" height="23" /> 
        <label for="pushButton">A push button</label> 
        <input type="button" name="pushButton" id="pushButton"  value="Click Me" /> 
        <label for="pullDownMenu">A pull-down menu</label> 
        <select name="pullDownMenu" id="pullDownMenu" size="1"> 
          <option value="option1">Option 1</option> 
          <option value="option2">Option 2</option> 
          <option value="option3">Option 3</option> 
        </select> 
        <label for="listBox">A list box</label> 
        <select name="listBox" id="listBox" size="3"> 
          <option value="option1">Option 1</option> 
          <option value="option2">Option 2</option> 
          <option value="option3">Option 3</option> 
        </select> 
        <label for="multiListBox">A multi-select list box</label> 
        <select name="multiListBox" id="multiListBox" size="3" multiple="multiple"> 
          <option value="option1">Option 1</option> 
          <option value="option2">Option 2</option> 
          <option value="option3">Option 3</option> 
        </select> 
        <label for="textAreaField">A text area field</label> 
        <textarea name="textAreaField" id="textAreaField" rows="4" cols="50"></textarea> 

    </form> 
  </body> 
</html>

Form is created with the get method. This means that the form field names and values will be sent to the server in the URL. Meanwhile, the empty action attribute tells the browser to send the form back to the same page.

Field names and field values as being similar to the keys and values of an associative array.

Most controls are also given an associated label element. This text describes the field to the users. Each label is associated with its control using its for attribute, which matches the corresponding id attribute in the control element.

Action for empty fields

When form fields are empty, some data is not sent to the server. Sometimes the field is sent as an empty string; sometimes no field name is sent at all.

The following table illustrates the behavior of various form controls when they're not filled in or selected:

Form Control	What Happens When It's Not Filled In Or Selected
Text input field	The field name is sent, along with an empty value.
Text area field	The field name is sent, along with an empty value.
Password field	The field name is sent, along with an empty value.
File select field	The field name is sent, along with an empty value.
Hidden field	The field name is sent, along with an empty value.
Checkbox field	Nothing is sent.
Radio button field	Nothing is sent.
Pull - down menu	A value is always sent.
List box	Nothing is sent.
Multi - select box	Nothing is sent.
Submit button	Nothing is sent if the button isn't clicked.
Image field	Nothing is sent if the button isn't clicked.
Reset button	Nothing is sent.
Push button	Nothing is sent.