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.
optionAn option in a SELECT element.
selectA 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 ControlWhat Happens When It's Not Filled In Or Selected
Text input fieldThe field name is sent, along with an empty value.
Text area fieldThe field name is sent, along with an empty value.
Password fieldThe field name is sent, along with an empty value.
File select fieldThe field name is sent, along with an empty value.
Hidden fieldThe field name is sent, along with an empty value.
Checkbox fieldNothing is sent.
Radio button fieldNothing is sent.
Pull - down menuA value is always sent.
List boxNothing is sent.
Multi - select boxNothing is sent.
Submit buttonNothing is sent if the button isn't clicked.
Image fieldNothing is sent if the button isn't clicked.
Reset buttonNothing is sent.
Push buttonNothing is sent.