Skola Tutorijala - School of Tutorials: February 2016

Sunday, February 28, 2016

Kako da obojite pozadinu naslova (How to add a background color to a heading)

Pitanje: kako da obojite pozadinu naslova?

Resenje: svojstvo background-color.

Primer:

HTML kod

<!DOCTYPE html>
<html>
<head>
<title>Kako da obojite pozadinu naslova</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Manipulacija podacima u nizovima (Manipulating data in arrays)

Ako zelite da obrisete duple elemente koristite funkciju array_unique().

Primer:

<?php

$cene_motora = array(3500, 3700, 2300, 3500, 3500);
print_r($cene_motora);

$cene = array_unique($cene_motora);
print_r($cene_motora);

?>

Rezultat:

Array ( [0] => 3500 [1] => 3700 [2] => 2300 [3] => 3500 [4] => 3500 ) Array ( [0] => 3500 [1] => 3700 [2] => 2300 )

Ako zelite da saberete sve vrednosti koje se nalaze u nizu, koristite funkciju array_sum().

CSS: Selectors

The selector is a term that defines on what HTML tags is necessary to apply the rule.

Selectors may be:

names tags - the declaration applies to all such tags
id elements - the declaration refers only to an element with this unique identifier
class elements - the declaration applies to all the elements that have the value within the class attribute. The attribute class can have more words and then each word is a separate class.
combination of selectors - for example, an element with a certain tag, under condition that has a certain class.

To select elements with a certain identifier you should use "#" in front of the id, and to select class elements "." in front of desired class.

Example:

Multimedia - images, svg, audio and video

The multimedia content represents pictures, sound, animation and video elements that appear on the pages.

Pictures

To insert the image in an HTML page use the <img> element, which has no end tag, and it's always empty. Attributes that are commonly used are src and alt.

Example:


<img src="http://www.example.com/imagename.png" alt="image name">

<img src="images/suzuki.jpg" alt="suzuki motorcycle">

Result:

Poredjenje nizova (Comparing arrays)

PHP podrzava poredjenje nizova i odredjivanje istih elemenata ili razlicitih.

Pimer: ako imate sledeca dva niza i ako je u njima drugi element isti.

<?php

$japan = array("honda", "suzuki", "kawasaki");
$kina = array("shineray", "suzuki", "thumpstar");

?>

Pomocu funkcije array_diff() mozete napraviti novi niz. U ovom primeru dacemo ime $razlicito i u njemu ce se naci elementi koji su u ova dva niza razliciti.

Nastavak primera:

CSS: formatting content

Colors

CSS allows you to define different color elements, such as the text color (color), background color (background-color), border color (border-color) and so on. It is only necessary to assign a value to these styles. The most commonly used are next three ways to specify colors:

hexadecimal value preceded by the # sign
RGB (Red Green Blue) value
standard color name (red, blue, green)

Example:

<h1>This is title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque tortor et convallis consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus</p>
<h2>This is title 2</h2>

<img src="images/three.gif" style="border:5px solid yellow" />

Result:

HTML elements - links and formatting text

There are a certain number of tags for formatting text.

Example:

<p>This is text with <b>bold</b>, <i>italic</i>, <u>underline</u> and <s>strikethrough</s> letters. It also contains a combination of styles, such as <b><i>bold and italic</i></b>. Text within HTML tags will ignore the extra space between the words and new rows <pre>unless you use the tags for reformatting</pre>.

</p>

Result:

Note: even though the text can be formatted using the above attributes, this mode is not desirable. If you want to define how a text is displayed, you should use CSS rules, rather than using HTML tags. Conclusion: HTML should only define the structure of the text, but not the rules for presentation.

The text you need to format set in <span> tags, and add some CSS class.

Spajanje i deoba nizova (Merging and slicing arrays)

Nizove mozete spajati i deliti.

Primer: ako imate niz sa tri stavke od kojih svaka predstavlja neki motor, a zelite da dobijete podniz koji sadrzi samo poslednje dve stavke, mozete koristiti funkciju array_slice(). Ovoj funkciji prosledjujete niz ciji deo zelite da dobijete. Ova funkcija prima argument offset, koji pokazuje odakle treba poceti, i argument length, koji ukazuje na duzinu niza koji zelite da napravite.

<?php

$motor["japan"] = "suzuki";
$motor["italija"] = "ducati";
$motor["austrija"] = "ktm";

$podniz = array_slice($motor, 1, 2);

foreach ($podniz as $vrednost) {
echo "Motor: $vrednost<br />";

}

?>

Rezultat:

Motor: ducati
Motor: ktm

Ako je vrednost argumenta offset negativna, pocetak se broji od kraja niza. Ako je length negativna vrednost, elementi se uzimaju od kraja niza.

Ako ne zadate duzinu podniza, dobicete sve elemente do kraja (ili do pocetka, ako idete u suprotnom smeru).

Primer 2: ako zelite da spojite dva ili vise nizova, koristite funkciju array_merge().

<?php

$motori = array("suzuki", "ducati", "ktm");
$automobili = array("jugo", "tojota", "pezo");

$proizvodnja = array_merge($motori, $automobili);

foreach ($proizvodnja as $vrednost) {
echo "Proizvodnja prevoznog sredstva: $vrednost<br />";

}

?>

Rezultat:

Proizvodnja prevoznog sredstva: suzuki
Proizvodnja prevoznog sredstva: ducati
Proizvodnja prevoznog sredstva: ktm
Proizvodnja prevoznog sredstva: jugo
Proizvodnja prevoznog sredstva: tojota
Proizvodnja prevoznog sredstva: pezo

You can merge and slice arrays.

Example, if you have an array with three items, each of which represents one motorcycle, and you wish to get a subarray containing only last two items, you can use function array_slice(). To this function you forward array whose part you want to get. This function accepts an argument offset, which shows where to start, and argument length, which indicates the length of array you want to make.

<?php

$motorcycle["japan"] = "suzuki";
$motorcycle["italy"] = "ducati";
$motorcycle["austria"] = "ktm";

$subarray = array_slice($motorcycle, 1, 2);

foreach ($subarray as $value) {
echo "Motorcycle: $value<br />";

}

?>

Result:

Motorcycle: ducati
Motorcycle: ktm

If the value of the argument offset is negative, start is counted from the end of the array. If the length has negative value, the elements are taken from the end of the array.

If you do not specify the length of the subarray, you will get all the elements to the end (or to the beginning, if you're going in the opposite direction).

Example 2: if you want to merge two or more arrays, use function array_merge().

<?php

$motorcycles = array("suzuki", "ducati", "ktm");
$cars = array("yugo", "toyota", "peugeot");

$production = array_merge($motorcycles, $cars);

foreach ($production as $value) {
echo "Production of transportation: $value<br />";

}

?>

Result:

Production of transportation: suzuki
Production of transportation: ducati
Production of transportation: ktm
Production of transportation: yugo
Production of transportation: toyota
Production of transportation: peugeot

Sunday, February 21, 2016

Vadjenje promenljivih iz niza (Extracting variables from an array)

Funkcija extract je korisna za kopiranje elemenata nizova u promenljive ako niz radi sa indeksima u obliku stringa.

Primer: kada za niz pozovemo funkciju extract, kreiraju se promenljive koje odgovaraju indeksima $japan, $italija, $austrija.

<?php

$motor["japan"] = "suzuki";
$motor["italija"] = "ducati";
$motor["austrija"] = "ktm";

extract($motor);
.
.
.

?>

Primer 2:

<?php

$motor["japan"] = "suzuki";
$motor["italija"] = "ducati";
$motor["austrija"] = "ktm";

extract($motor);

echo "\$japan = $japan<br />";
echo "\$italija = $italija<br />";
echo "\$austrija = $austrija<br />";

?>

Rezultat:

$japan = suzuki
$italija = ducati
$austrija = ktm

Ako zelite da izvadite podatke iz niza mozete da koristite funkciju list(). Rezultat se moze smestati u razlicite promenljive.

Primer 3:

<?php

$motori[0] = "suzuki";
$motori[1] = "ducati";
$motori[2] = "ktm";

list($prvi, $drugi) = $motori;

echo $prvi, "<br />";
echo $drugi;

?>

Rezultat:

suzuki
ducati

Ako zelite da uradite suprotno i da vrednost iz promenljivih smestite u niz, koristite funkciju compact(). Ovoj funkciji prosledjujete nizove promenljivih, sa $, a funkcija pronalazi promenljive i smesta ih u niz.

Primer 4:

<?php

$ime = "Miran";
$prezime = "Stanovnik";
$zanimanje = "motociklista";

$punoime = array("ime", "prezime");
$rezultat = compact($punoime, "zanimanje");

print_r($rezultat);

?>

Rezultat:

Array ( [ime] => Miran [prezime] => Stanovnik [zanimanje] => motociklista )

The function extract is useful for copying elements of arrays in a variables if array works with indexes in the form of string.

Example, when you for an array call function extract, it creates the variables that correspond to the indexes $japan, $italy, $austria.

<?php

$motorcycle["japan"] = "suzuki";
$motorcycle["italy"] = "ducati";
$motorcycle["austria"] = "ktm";

extract($motorcycle);

.
.

.

?>

Example 2:

<?php

$motorcycle["japan"] = "suzuki";
$motorcycle["italy"] = "ducati";
$motorcycle["austria"] = "ktm";

extract($motorcycle);

echo "\$japan = $japan<br />";
echo "\$italy = $italy<br />";
echo "\$austria = $austria<br />";

?>

Result:

$japan = suzuki
$italy = ducati
$austria = ktm

If you want to extract data from array you can use function list(). The result can be stored in a different variables.

Example 3:

<?php

$motorcycles[0] = "suzuki";
$motorcycles[1] = "ducati";
$motorcycles[2] = "ktm";

list($first, $second) = $motorcycles;

echo $first, "<br />";
echo $second;

?>

Result:

suzuki
ducati

If you want to do the opposite and that the value from variables store in array, use function compact(). To this function you forward arrays from variables, with $, and the function finds variables and places them in array.

Example 4:

<?php

$name = "Miran";
$lastname = "Stanovnik";
$proffesion = "motorcyclist";

$fullname = array("name", "lastname");
$result = compact($fullname, "proffesion");

print_r($result);

?>

Result:

Array ( [name] => Miran [lastname] => Stanovnik [proffesion] => motorcyclist )

Saturday, February 20, 2016

Using CSS rules on HTML document

CSS is used for defining styles, ie, the way in which elements of the page should be displayed. CSS can be used to determine the size and position of elements, specifying colors, backgrounds, fonts characteristic, second. This is achieved by making the set of CSS rules.

Every CSS rule consists of a selector and a declaration. Selector is used to determine the item to which the rule should apply. The declaration states what style should be applied over the selected element or elements.

selector {
style: value;
style2:value;
}

The selector may be a tag name over which is applied a style. The curly braces is a collection of one or more definitions of styles in the form of style: value, separated by semicolons. Styles can be color or font background, font size and so on. Of the types of styles depend specific values that can be assigned. For example, to the size is assigned a numerical value in pixels.

Example: an external CSS style.

Spajanje i rastavljanje nizova (Joining and breaking arrays)

Pomocu funkcija implode i explode mozete vrsiti konverziju stringova u nizove i obrnuto. Funkcija implode sklapa niz na osnovu stringa, a funkcija explode rastavlja string u niz.

Ako zelite da sadrzaj niza stavite u string, mozete koristiti funkciju implode() i proslediti joj tekst koji treba da bude separator, u ovom primeru zarez.

Primer:

<?php

$motori[0] = "suzuki";
$motori[1] = "ducati";
$motori[2] = "ktm";

$tekst = implode(",", $motori);
echo $tekst;

?>

Rezultat:

suzuki,ducati,ktm

Objasnjenje: u ovom stringu nema razmaka izmedju stavki stringa, pa cemo separator promeniti na ", "

Nastavak primera 1:

<?php

$motori[0] = "suzuki";
$motori[1] = "ducati";
$motori[2] = "ktm";

$tekst = implode(", ", $motori);

echo $tekst;

?>

Rezultat:

suzuki, ducati, ktm

Ako zelite string da rastavite u niz, morate da ukazete na sta zelite da ga rastavite, na primer ", " i da to prosledite funkciji explode().

Primer 2:

<?php

$tekst = "suzuki, ducati, ktm";
$motori = explode(", ", $tekst);

print_r($motori);

?>

Objasnjenje: string smo rastavli u niz.

Rezultat:

Array ( [0] => suzuki [1] => ducati [2] => ktm )

Either via implode and explode you can make the conversion of strings to arrays and vice versa. The function implode is joining based on the string, and the function explode is breaking string to array.

If you want to place the contents of array into string, you can use function implode() and forward her the text that should be the separator, in this example, a comma.

Example:

<?php

$motorcycles[0] = "suzuki";
$motorcycles[1] = "ducati";
$motorcycles[2] = "ktm";

$text = implode(",", $motorcycles);

echo $text;

?>

Result:

suzuki,ducati,ktm

Explanation: this string has no spaces between the items of the string, so we will change the separator to ", ".

Continued example 1:

<?php

$motorcycles[0] = "suzuki";
$motorcycles[1] = "ducati";
$motorcycles[2] = "ktm";

$text = implode(", ", $motorcycles);

echo $text;

?>

Result:

suzuki, ducati, ktm

If you want to break the string in array, you have to point out to what you want to break it, for example, ", " and to forward it to function explode().

Example 2:

<?php

$text = "suzuki, ducati, ktm";
$motorcycles = explode(", ", $text);

print_r($motorcycles);

?>

Explanation: we broke string into array.

Result:

Array ( [0] => suzuki [1] => ducati [2] => ktm )

Friday, February 19, 2016

Kretanje kroz nizove (Navigating through arrays)

U PHP-u postoji veci broj funkcija koje se koristi za kretanje kroz nizove. Ovo kretanje se vrsi pomocu pokazivaca niza, koji sadrzi tekucu lokaciju u nizu.

Primer:

<?php

$motori[0] = "suzuki";
$motori[1] = "ducati";
$motori[2] = "ktm";

print_r($motori);

/* ako zelite da odredite tekuci element niza
mozete koristiti funkciju current(). */
echo "Trenutni: ", current($motori), "<br />";

/* ako zelite da prebacite pokazivac na
sledeci element, koristite funkciju next() */
echo "Sledeci: ", next($motori), "<br />";

/* ako zelite da prebacite pokazivac na
prethodni element, koristite funkciju prev(). */
echo "Prethodni: ", prev($motori), "<br />";

/* ako zelite da prebacite pokazivac na
poslednji element, koristite funkciju end(). */
echo "Poslednji: ", end($motori), "<br />";

/* ako zelite da se vratite na pocetak niza,
koristite funkciju reset(), ili ... */
echo "Na pocetak: ", reset($motori), "<br />";

/* ... ili, ako zelite da se vratite na pocetak niza,
koristite funkciju reset(). */
echo "Resetovanje niza. <br />";

/* ako zelite da prikazete novi tekuci element,
koji je sada prvi element niza,
koristite funkciju current(). */
echo "Trenutni: ", current($motori), "<br />";

?>

Rezultat:

Array ( [0] => suzuki [1] => ducati [2] => ktm ) Trenutni: suzuki
Sledeci: ducati
Prethodni: suzuki
Poslednji: ktm
Na pocetak: suzuki
Resetovanje niza.
Trenutni: suzuki

In PHP there are a number of functions that are used to navigate through arrays. This navigating is done using the array pointer, which contains the current location in the array.

Example:

<?php

$motorcycles[0] = "suzuki";
$motorcycles[1] = "ducati";
$motorcycles[2] = "ktm";

print_r($motorcycles);

/* if you want to specify the current element of an array
you can use function current(). */
echo "Current: ", current($motorcycles), "<br />";

/* if you want to move a pointer to
the next element, you can use function next() */
echo "Next: ", next($motorcycles), "<br />";

/* if you want to move a pointer to
the previous element, you can use function prev(). */
echo "Previous: ", prev($motorcycles), "<br />";

/* if you want to move a pointer to
the end of element, you can use function end(). */
echo "End: ", end($motorcycles), "<br />";

/* if you want to return to the beginning,
of array, you can use function reset(), or ... */
echo "On the beginning: ", reset($motorcycles), "<br />";

/* ... or, if you want to return to the beginning,
of array, you can use function reset() */
echo "Resetting the array. <br />";

/* if you want to display new current element,
which is now the first element of array,
you can use function current(). */
echo "Current: ", current($motorcycles), "<br />";

?>

Result:

Array ( [0] => suzuki [1] => ducati [2] => ktm ) Current: suzuki
Next: ducati
Previous: suzuki
End: ktm
On the beginning: suzuki
Resetting the array. Current: suzuki

Thursday, February 18, 2016

Sortiranje nizova (Sorting arrays)

U PHP-u postoji vise nacina za sortiranje podataka u nizu.

Funkciju sort() mozete koristiti kod nizova sa numerickim indeksima.

Primer: kreiranje niza, prikazivanje, sortiranje niza i ponovno prikazivanje niza.

<?php

$motor[0] = "suzuki";
$motor[1] = "ducati";
$motor[2] = "ktm";

print_r($motor);

sort($motor);

print_r($motor);

?>

Rezultat:

Array ( [0] => suzuki [1] => ducati [2] => ktm ) Array ( [0] => ducati [1] => ktm [2] => suzuki )

Ako zelite da sortirate po obrnutom redosledu, koristite funkciju rsort().

Primer 2:

<?php

$motor[0] = "suzuki";
$motor[1] = "ducati";
$motor[2] = "ktm";

print_r($motor);

rsort($motor);

print_r($motor);

?>

Rezultat:

Array ( [0] => suzuki [1] => ducati [2] => ktm ) Array ( [0] => suzuki [1] => ktm [2] => ducati )

Ako imate niz koji koristi kljuceve koristite funkciju asort(), koja zadrzava kljuceve, jer ako koristite funkcije sort() i rsort(), kljucevi ce biti zamenjeni brojevima.

Primer 3:

<?php

$motor["Japan"] = "suzuki";
$motor["Italija"] = "ducati";
$motor["Austrija"] = "ktm";

print_r($motor);

asort($motor);

print_r($motor);

?>

Rezultat:

Array ( [Japan] => suzuki [Italija] => ducati [Austrija] => ktm ) Array ( [Italija] => ducati [Austrija] => ktm [Japan] => suzuki )

Za ovakvo sortiranje samo po obrnutom redosledu mozete koristiti funkciju arsort(). Ako zelite da ovakav niz sortirate, na bazi kljuceva, a ne na bazi vrednosti, koristite funkciju ksort(). Ako zelite mozete da definisete svoje operacije sortiranja, tj. da napravite svoju funkciju, koristite funkciju usort().

In PHP there are several ways to sort data in array.

Function sort() can be used with arrays with numerical index.

Example: creating array, displaying array, sorting array and again displaying array.

<?php

$motorcycle[0] = "suzuki";
$motorcycle[1] = "ducati";
$motorcycle[2] = "ktm";

print_r($motorcycle);

sort($motorcycle);

print_r($motorcycle);

?>

Result:

Array ( [0] => suzuki [1] => ducati [2] => ktm ) Array ( [0] => ducati [1] => ktm [2] => suzuki )

If you want to sort in reverse order, use rsort().

Example 2:

<?php

$motorcycle[0] = "suzuki";
$motorcycle[1] = "ducati";
$motorcycle[2] = "ktm";

print_r($motorcycle);

rsort($motorcycle);

print_r($motorcycle);

?>

Result:

Array ( [0] => suzuki [1] => ducati [2] => ktm ) Array ( [0] => suzuki [1] => ktm [2] => ducati )

If you have array that uses the keys, use function asort(), which holds the keys, because if you use functions sort() and rsort(), the keys will be replaced by numbers.

Example 3:

<?php

$motorcycle["Japan"] = "suzuki";
$motorcycle["Italy"] = "ducati";
$motorcycle["Austria"] = "ktm";

print_r($motorcycle);

asort($motorcycle);

print_r($motorcycle);

?>

Result:

Array ( [Japan] => suzuki [Italy] => ducati [Austria] => ktm ) Array ( [Italy] => ducati [Austria] => ktm [Japan] => suzuki )

For this kind of sorting, only in the reverse order, you can use function arsort(). If you want this kind of array to sort, based on keys, and not on the basis of values, use function ksort(). If you want you can define your sorting operations, ie. to make its function, use function usort().

Wednesday, February 17, 2016

HTML elements - forms

Forms are elements that allow the user to type in and send it to the web server, which affects the state of the application. In this way, the flow of data is going from the browser to the server.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML elements - forms</title>

<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML element forms" />
<meta name="keywords" content="html elements, html froms, forms" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/script.js"></script>

<script type="text/javascript">

</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>

<body>
<form action="demo_form.php" method="post"
enctype="multipart/form-data"
autocomplete="on" novalidate>

<button type="submit">Send</button>
</form>

</body>

</html>

Result:

The essential attributes of form are action and method, with them you can define on what URL on the server will be send data from the form and what type of HTTP request will be used (GET or POST).

Elements of form can be text fields, lists for checking several options, lists to select one of the options (radio buttons or drop-down list) and other.

Form fields

The most important elements of the form that user enters the data are fields to input the text, <input> tags. Each input field has a type that determines how the user will enter a value in it. Type of input fields is listed as the value of the attribute type and the most frequently used is text. Type can be adjusted, so that if, for example, if you set the type password, instead of text, when the user enters a character, rather than the character, the dots will be displayed, thereby masking input.

Example 2: a typical form for user login.

<form action="login.php">
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<button type="submit">Confirm</button>
</form>

Example 3: form with different input fields.

<form name="upload_resume" action="send.php" method="post">
Name: <input type="text" name="username" /><br /><br />
Address: <textarea id="address" name="address"></textarea><br /><br />
Married <input type="checkbox" id="married" name="married" /><br /><br />
Male <input type="radio" id="male" name="sex" /><br /><br />
Female <input type="radio" id="female" name="sex" /><br /><br />
Position <select>
<option value="web developer">Web Developer</option>
<option value="seo specialist">SEO Specialist</option>
<option value="copywriter">Copywriter</option>
</select><br /><br />
Upload resume <input type="file" id="resume" name="resume" /><br /><br />
<button type="reset">Reset</button>
<input type="submit" value="Save" />
</form>

Result:

Radio buttons are used to offer the user several options, where you can select only one. Checkbox list allows the user to select multiple options simultaneously. In both groups of options, it is important to have the same value of name attribute in order to be taken as part of the same group (for example, name="sex" for the radio options from example 3). The field type file allows uploading the file that will, after confirmation of entry form, be sent to the server. Button can be presented using the <button> element, which can be of the type:

button (simple button that can be clicked)
reset (button that erases entered data from form)
submit (the button that sends data from the form)

In the HTML5 version can be applied a large number of field types for <input> elements, such as color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url and week.

Example 4: Form with special types of fields.

<form>
Color: <input type="color" name="color" /><br /><br />
Date: <input type="date" name="date" /><br /><br />
Date/Time: <input type="datetime" name="datetime" /><br /><br />
Month: <input type="month" name="month" /><br /><br />
Week: <input type="week" name="week" /><br /><br />
Number: <input type="number" min="1" max="10" step="2" /><br /><br />
Range: <input type="range" min="10" max="100" step="2" />

</form>

Result:

Note: these types were introduced only in the HTML5 specification so that they are not supported in all browsers. Most types are supported in Chrome, Opera and Safari, while Internet Explorer and Firefox do not support most of these types.

HTML5 has a list of data which can be added to the text field, <datalist>. They make it possible to easily implement a text box where the user can select one of the predefined values while tyoing text (autocomplete)

Example 5: datalists.

<input list="libraries" />
<datalist id="libraries">
<option value="jQuery"></option>
<option value="MooTools"></option>
<option value="Dojo"></option>
<option value="YUI"></option>
</datallist>

Result:

Labels are HTML elements that contain the names of the form fields. Each label is associated with some fields in form; when you click on it, some action is executed on the field that depends on the type of field.

For example,

if the field of form to which the label applies is a text field or a list, clicking on the label sets the focus so the user can start entering text or to select an item from the list.
if the form field is radio button or checkbox, it will be selected when you click on the appropriate label.
if it is the input field for the file, clicking on the label opens dialogue to select the file.

Example 6: the label fields.

<form id="form" action="upload_resume.php" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="address">Address</label>
<textarea id="address" name="address"></textarea><br /><br />
<label for="married">Married</label>
<input type="checkbox" id="married" name="married" /><br /><br />
<label for="male">Male</label>
<input type="radio" id="male" name="sex" /><br /><br />
<label for="female">Female</label>
<input type="radio" id="female" name="sex" /><br /><br />
<label for="position">Position</label>
<select id="position">
<option value="web">Web Developer</option>
<option value="seo">SEO Specialist</option>
<option value="writer">Copywriter</option>
</select>
<input type="file" id="resume" name="resume" /><br /><br />
<button type="reset">Reset</button>
<button type="submit">Save</button>
</form>

Result:

Note: the labels are extremely important elements in cases where the form has to be accessible to people who do not see well. A large number of applications that read elements on the screen (screen readers) use just labels to inform users about the name of the element. If you do not set a label with valid for attribute, visually impaired users will have problem
recognizing elements to enter.

Complete code used in examples.

Skola Tutorijala - School of Tutorials

Website Development Prices

Search Blog