HTML forms - part in the browser

Before we can process any user data on the server side via PHP, we need to get it first. This is done in the browser via HTML forms that define the basic elements to receive the data. The purpose of this article is not to present all the possibilities of forms, but just the basic possibilities of accepting data and understanding the principle.

Basic HTML form source

<form action="script.php" method="get">

<!-- Here will be the entire content of the form -->

</form>

Each form starts with the HTML tag <form> and ends with the tag </form>. All form fields placed between these tags will be submitted.

Next, you need to set where to send the form with the action attribute (script name), and what method to use with the method attribute (GET or POST). If the method and destination are not specified, the form defaults to sending itself by the GET method.

Basic form fields

The most used field is used to get the text (string). Each field has its own type and name by which it can be recognized after submission.

Common text fields

Most importantly, I require a plain text field:

<input type="text" name="food">

Password field

<input type="password" name="password">

Checkbox

It is used to check the boolean (TRUE and FALSE):

<input type="checkbox" name="vop" checked="checked">

Do you agree to the terms?

Radio button to select multiple options

<input type="radio" name="language" value="cz" checked> Czech
<input type="radio" name="language" value="sk"> Slovak
<input type="radio" name="language" value="en"> English

Allows you to select from several options. The selected option sends its value. By default it is good to select one field with the checked="checked" attribute:

Large text field

Created for entering multi-line text. It is also used to enter:

• cols ~ number of columns
• rows ~ number of rows

<textarea name="article" cols="40" rows="6">
Hey guys!
</textarea>

Hey guys!

Selectbox

Presents a convenient way to select from many data.

<select name="gender">
	<option value="man">Male</option>
	<option value="woman">Female</option>
</select>

When the form is submitted, the value in value is sent.

Submit button

The form can have an unlimited number of submit buttons. They are easy to enter:

<input type="submit" value="Submit">

When clicked, it takes all the data from the form fields and sends it to the set script:

Data processing on the server

Next, you need to send the data to the server and process it there, this is covered in the next article.

Jan Barášek   Více o autorovi

Autor článku pracuje jako seniorní vývojář a software architekt v Praze. Navrhuje a spravuje velké webové aplikace, které znáte a používáte. Od roku 2009 nabral bohaté zkušenosti, které tímto webem předává dál.

Rád vám pomůžu:

Kontakt