Processing HTML Forms with PHP

Forms are special components which allow your site visitors to supply various information on the HTML page.

Forms typically include some input elements to gather information. We have also talked about client-side form validation using javascript. This time we are going to talk about processing forms at server side using PHP.

HTML forms can have many attributes. Most important attributes for HTML forms that we haven't talked about so far are:

Example of HTML Form:

<form name="myForm" id="myForm" action="process.php" method="GET" enctype="multipart/form-data">
 	<span id="firstname">Firstname: </span>
 	<input type="text" name="firstname"><br><br>
 	<span id="lastname">Lastname: </span>
 	<input type="text" name="lastname"><br><br>
 	<input type="submit" name="submitBtn">
 	<input type="reset" name="resetBtn">
</form>

• action: The action parameter tells the browser what script/site must be called when the visitor presses the submit button.
• method: The method parameter tells the browser by which method to send the user submitted data to the web-server. The parameter values are either POST or GET.
• name: provides a way to reference the form in a script.
• id: uniquely identifies the form.
• enctype="multipart/form-data" : It specifies which content-type to use when submitting the form.

Here, we are telling the browser to send form data to "process.php" file by using "get" method, upon form submission.

When dealing with forms, the most important aspect to remember is that you are limited to a certain variety of fields that can be applied to a form.

The fields that have been created are non-negotiable and work in only the way they were created to work. It is important, therefore, to fully understand what is available and how best to use the form features to your advantage.

Form creation - </form> Tag

<form 
	action = ".."
	method = "..."
	name = "..."
	id = "...">
	...
	...
</form>

Text field - <input> Tag

For single line text input:

<input 
	type = "text"
	name = "mytextfield"
	value = "initial value"
	size = "50"
	maxlength = "50"
	placeholder = "My Text Field"
/>

Attributes:

• type="text"
• name: Only form elements with a “name” attribute will have their values sent to the server when the form is submitted
• id: uniquely identifies the text field.
• size: specifies the width (in characters) of the text box shown on the screen.
• maxlength: specifies the maximum length (in characters) of the string that the user is allowed to type in, which could be more or less than the size of the text box.
• value: defines the initial (default) value of the input box.
• required

Password - <input> Tag

For single line masked text input

<input 
	type = "password"
	name = "pwd"
	placeholder = "Your Password"
/>

Attributes:

• type="password"
• name
• id: uniquely identifies the password field.
• size: specifies the width (in characters) of the text box shown on the screen.
• maxlength: specifies the maximum length (in characters) of the string that the user is allowed to type in, which could be more or less than the size of the text box.
• value: defines the initial (default) value of the password box.
• required

Radio Button - <input> Tag

Single choice

Male: <input type = "radio" name = "gender" value="Male"/>
Female: <input type = "radio" name = "gender" value="Female"/>

Attributes:

• type="radio"
• name: must be the same for all the radio buttons in the group.
• id
• value: defines the value sent to the server if the radio button is selected.
• checked: specifies that the input element should be preselected when the page loads.
• required

Checkbox - <input> Tag

Allows the user to select one or more of a predetermined list of items.

<input type="checkbox" id="php" name="php" value="PHP">
<label for="php"> PHP</label><br>
<input type="checkbox" id="c" name="c" value="C">
<label for="c"> C Programming</label><br>
<input type="checkbox" id="java" name="java" value="Java">
<label for="java"> Java</label><br>

Attributes:

• type="checkbox"
• name:
• id:
• value: defines the value sent to the server if the box is checked
• checked: specifies that the input element should be preselected when the page loads

Drop-down list - Select Option

Single choice

<select name="country" size="1">
	<option value="UK">United Kingdom</option>
	<option value="USA">United States of America</option>
	<option value="NK">North Korea</option>
	<option value="BE">Belgium</option>
</select>

Attributes:

• name
• id
• size: specifies the number of visible options in the drop-down list
• value: defines the value sent to the server

Multiple selection list

Multiple choice

<select name="country[]" size="3"multiple="multiple">
	<option value="UK">United Kingdom</option>
	<option value="USA">United States of America</option>
	<option value="NK">North Korea</option>
	<option value="BE">Belgium</option>
</select>

Attributes:

• name
• id
• size: specifies the number of visible options in the drop-down list
• value: defines the value sent to the server
• multiple: specifies that multiple options can be selected

Text Area - <textarea> Tag

Creates a multi-line text input control in which the user can write an unlimited number of characters.

<textarea name="myTextArea" cols="30" rows="5"> </textarea>

Attributes:

• name
• id
• cols: specifies the visible width of a text area (better done with CSS)
• rows: specifies the visible height of a text area (better done with CSS)

Hidden fields - <input> Tag

Defines a hidden field which is not visible by the user but can store a default value or have its value changed via JavaScript code.

<input 
	type="hidden"
 	name="hidden1"
 	value="Form example for demo"
/>

Attributes:

• type="hidden"
• name
• id
• value: defines the value sent to the server

Submit/Reset Buttons - <input> Tag

The submit button sends the form data (that is, the “name=value” pair for each form element) to the web server: when clicked, it triggers the “action” method set in the <form> tag.

<input type="submit"
	name="submitButton"
	value="Submit Form"
/>

<input type="reset"
	name="submitButton"
	value="Submit Form"
/>

Attributes:

• type="submit"
• name
• id
• value: defines the text on the button

The reset button resets the form fields to their initial values.

Attributes:

• type="reset"
• name
• id
• value: defines the text on the button

Button: element with type “button”

Creates a generic button without a default action when the button is clicked. Usually a JavaScript function is defined and invoked when the button is clicked.

<input type="button"
	name="submitButton"
	value="Submit Form"
/>

Attributes:

• type="button"
• name
• id
• value: defines the text on the button

File - <Input> Tag

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the element but type attribute is set to file.

<form action="upload.php" method="post" enctype="multipart/form-data">
	<input type = "file" name = "fileupload" accept = "image/*" />
</form

• Make sure that the form uses method="post"
• The form also needs the following attribute: enctype="multipart/form-data". It specifies which content-type to use when submitting the form

Attributes:

• type = “file”
• name: Used to give a name to the control which is sent to the server to be recognized and get the value.
• accept: Specifies the types of files that the server accepts.

Image - <Input> Tag

Displays an image that behaves like a submit button. The SRC attribute specifies the location of an image file. The ALT attribute specifies some text to render if the image is not displayable.

<input type="image" src="button.png" alt="Submit">