PHP Form Elements

In this chapter you will learn:

Form Element List
Example - Form Element

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> /* ja v  a2s .  c  o  m*/
    <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.

Next chapter...

What you will learn in the next chapter:

PHP Form Elements

Form Element List

Example

Next chapter...

PHP HTML Forms

PHP GET and POST

PHP Form Elements

PHP Form TextField

PHP Form Password Field

PHP Form Textarea

PHP Form CheckBox

PHP Form Select

PHP Form RadioButton

PHP Form Submit

PHP Form Reset

PHP Form Push Button

PHP Form Image

PHP Form Hidden Field

PHP Split Form Across Pages

PHP Form Validation

PHP Form File Upload

PHP Form Demo

PHP Form Empty Fields

PHP Form Multi-Value Fields

PHP Redirect after a Form Submission