Categories
PHP

Using Form Elements

Form elements are used for capturing user input. A form contains one or more elements, which are the fields where the user can enter data. When a user finishes entering the data, the form is submitted to the server for verification or storing of the data.

Text Field

<input type="text" name="state" value="" />

The text type displays a single-line box in which the user can enter text. It is the default type for the input tag even if you forgot to specify the input type or you specified an invalid type. The following input tags are valid text fields:

<input name="state" value="" />
<input type="invalidType" name="state" value="" />
<input type="text" name="state" value="" />

Input Attributes

type:
The text is the default type for an input tag, other types are hidden, tel, url, email, password, date, time, datetime-local, number, range, color, checkbox, radio, file, submit, image, reset, and button (discussed below).

name:
PHP (or any server-side language) will use the name attribute to retrieve the data (text) from this field. For example, in PHP:
$phone = $_POST['state'];.

value:
You can prefill the text field by writing the text in the value attribute. PHP access the input value by its name attribute: $_POST['state'].

placeholder:
The placeholder gives a quick hint about how to fill in the field.

pattern:

Specify any regular expression that must be matched in order to pass validation.

title:

Displays as the validation message if the field doesn’t match the pattern (regular expression).

required:

Specify the mandatory field, a value must be present for the form to be submitted.

Example: Restricting form submission unless the pattern is matched:

<form method="post" action="save.php">
 <input
  type="text"
  name="state"
  placeholder="Enter state code"
  value=""
  pattern="[A-Z]{2}"
  title="Please enter state code, i.e. CA"
  required
 >
 <input type="submit" name="submit" value="Go">
</form>

The text field uses the pattern attribute that uses a regular expression [A-Z]{2} to match two uppercase letters. The required attribute tells the browser that this field is mandatory.

The form will not submit if you leave the field blank, enter more than two letters, enter lowercase letters, or enter anything other than uppercase letters, let’s try:

Password Field

<input type="password" name="password"
       value="" placeholder="Write your password" />

Output:

A password field is like a text input field, except that the characters that the user enters are disguised as asterisks or circles in the field. You code a password field the same way you code a text input field, except that you replace the word “text” with the word “password’.

Hidden Field

<input type="hidden" name="userID" value="12" />

A hidden form field is used when you want to embed data that shouldn’t be seen by the user. The data associated with a hidden form field will be submitted along with the rest of the fields of the form when the form is submitted.

Radio Button

<input type="radio" name="category" value="PHP"> PHP<br>
<input type="radio" name="category" value="MySQL"> MySQL

Output:

PHP
MySQL

Radio buttons enable you to provide users with a list of options from which only one option can be selected. You must write the same name in the name property to create a radio button group.

Check Box

<input type="checkbox" name="fav1" value="Book1">
PHP<br>
<input type="checkbox" name="fav2" value="Book2">
MySQL

Output:

PHP
MySQL

A check box field has two states: on and off. A user can select as many choices as they would like in a group of checkboxes.

Multiline Text Field

<textarea name="jobDetail" rows="4" cols="50" placeholder="Description">
</textarea>

Output:

The above code represents a multi-line text box. This field does not have a value attribute. To prefill this box, write your text between the opening and closing tags. For example: <textarea>Your text</textrea>.

The rows="4" cols="50" specifies the box height and width but it is recommended to use the CSS stylesheet to set the width and height of the textarea.

Selection List

<select name="category">
 <option value="">Select an option</option>
 <option value="php">PHP</option>
 <option value="MySQL">MySQL</option>
</select>

Output:

The select field creates a drop-down menu from which a user can choose an option.

Multiple Selection List

<select name="category" multiple>
 <option value="JS">JavaScript</option>
 <option value="php">PHP</option>
 <option value="MySQL">MySQL</option>
</select>

Output:

By default, users can only select a single option from the select menu. Adding the multiple attribute allows a user to select multiple options at once and submit all selected options with the form.

File Field

<input type="file" name="thumb" />

Output:

The input file field allows users to upload files to the server. To enable uploading files you must specify the enctype attribute of form tag to multipart/formdata:

<form action="a.php" method="post" enctype="multipart/formdata">
 <input type="file" name="thumb" />
 <input type="submit" name="submit" value="Submit">
</form>

The accept attribute tells the browser to show only specified file types. The following example shows only image files to choose from:

<input type="file" name="thumb" accept="image/*">

Try it (only images are allowed):

To choose only pdf and doc files, use the comma to separate them:

<input type="file" name="thumb" accept=".pdf,.doc,.docx">

Try it (only pdf, doc, and docs files are allowed):

Submit Button

<input type="submit" name="go" value="Finish">

Output:

A submit input creates a button that submits the form it is inside when clicked.

Reset Button

<input type="reset" value="Reset">

To see how a form resets, fill fields and press the Reset button:

Username: Password:

This input resets all inputs in the form:

  • Text in an input field will be reset to blank or its default value (specified using the value attribute).
  • Any option in a selection menu will be deselected unless they have the selected attribute.
  • All checkboxes and radio boxes will be deselected unless they have the checked attribute.

HTML5 Form Fields

These fields can be automatically validated when submitted depending on the browser support.

Note: These fields are considered as type="text" if the browser does not support the type specified.

Time Field

<input type="time" name="time" value="">

Output:

Date and Time Field

<input type="datetime-local" name="datetime" value="">

Output:

Color Picker Field

<input type="color" name="textColor" value="">

Output:

Email Field

<input type="email" name="email">

Output:

Number Field

<input type="number" name="num" value=""> <br>
<input type="number" name="num" value="" min="5"> <br>
<input type="number" name="num" value="" max="100"> <br>
<input type="number" name="num" value="" min="5" max="100">

Output:




  • min attribute: Specify the minimum value users can input into the box.
  • max attribute: Specify the maximum value users can input into the box.

See more attributes.

Processing Forms in PHP: