Tag: Attribute

Form novalidate attribute: HTML5

Today let us learn about novalidate and formnovalidate attributes of HTML5 form.

form-novalidation-html5

In this video tutorial I’m taking 2 input fields and making one input field as required. Also take 2 submit buttons, with one validating the user entered data and the other one bypassing the validation rules set.

HTML file: formnovalidate
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< !DOCTYPE html>
<html>
<head>
<title>novalidation: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
<label for="name">Name: </label>
 <input type="text" name="name" required/><br />
 
<label for="age">Age: </label>
 <input type="number" name="age"/><br />
 
<input type="submit" value="Submit"/>
<input type="submit" value="Save" formnovalidate/>
</form>
 
</body>
</html>

Here we are using formnovalidate attribute on submit button which has a value of Save. This button bypasses the validation rules.

HTML file: novalidate
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

< !DOCTYPE html>
<html>
<head>
<title>novalidation: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form novalidate>
<label for="name">Name: </label>
 <input type="text" name="name" required/><br />
 
<label for="age">Age: </label>
 <input type="number" name="age"/><br />
 
<input type="submit" value="Submit"/>
</form>
 
</body>
</html>

Here I’ve added novalidate attribute directly to the form tag, which bypasses any validation rules written to it or to it’s child elements/tags.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

novalidate and formnovalidate attributes of HTML5 form


[youtube https://www.youtube.com/watch?v=BbU2KndW7Ho]

YouTube Link: https://www.youtube.com/watch?v=BbU2KndW7Ho [Watch the Video In Full Screen.]



Why would we ever need novalidation for forms ?
Sometimes we enter a lengthy form and submit, but due to some validation mistakes all our entries gets erased, and the user may not have the patience to re-enter everything from beginning. He may skip it altogether. To avoid that, you can build an interface wherein user can save her data first and then can submit it after reviewing it. In such a situation we can make use of a temporary database table to store user entered information and display for review with appropriate messages to correct the wrong inputs – user can correct them and Submit.

pattern and title Attribute of Form Field: HTML5

Today lets see how we can make use of pattern attribute to validate the user input data and use title attribute to hint the user for right inputs.

pattern-title-attribute-html5-regular-expression

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< !DOCTYPE HTML>
<html>
<head>
<title>pattern and title attribute: HTML5</title>
<link href="myStyle.css" rel="Stylesheet"/>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<label for="name">Name: </label>
 <input id="name" type="text" pattern="^[a-zA-Z]+$" title="Example: Satish"/><br />
 
<label for="age">Age: </label>
 <input id="age" type="text" pattern="^[0-9]{2}$" title="Example: 25" /><br />
 
 <input type="submit" value="Done"/>
</form>
 
</body>
</html>

Here in the first input field, we’re restricting the input to only lower case and upper case alphabets. To the second input field, we’re restricting it to only 2 digits from 0 to 9.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

label{
width: 50px;
    float:left;
}
 
input{
width: 200px;
}
 
form {
padding: 5px;
background-color: ivory;
width: 300px;
height: auto;
border: 2px dotted black;
}

CSS styling to align the input fields and the labels, with background color to the form, which has a 2px black dotted border.

pattern and title Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=TKLF0Aydcv4]

YouTube Link: https://www.youtube.com/watch?v=TKLF0Aydcv4 [Watch the Video In Full Screen.]



Note: ^ symbol specifies the beginning and the $ symbol specifies the end of the input value.

You can share any simple/small to complex/big regular expression knowledge in the comment section below. Your time and effort is highly appreciated. Your knowledge and inputs will surely be helpful to many people around the world. Comment section is all yours :-)

autocomplete Attribute of Form Field: HTML5

Today lets see how autocomplete attribute of HTML5 works.

autocomplete-html5-form

Here we take 3 input fields and individually enable and disable the autocomplete feature by specifying it’s values: ON and OFF.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< !DOCTYPE HTML>
<html>
<head>
<title>Form, autocomplete: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
First Name: <input type="text" name="fname" autocomplete="on"/> <br /><br />
Second Name: <input type="text" name="lname" autocomplete="on"/><br />
Email: <input type="text" name="email" autocomplete="off"/><br />
<input type="submit"/>
</form>
 
</body>
</html>

Here we have 3 input fields with autocomplete turned ON for first 2 and turned off for the last.

autocomplete Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=XNjUfwDmHGc]

YouTube Link: https://www.youtube.com/watch?v=XNjUfwDmHGc [Watch the Video In Full Screen.]



Note:
To make autocomplete feature to work
1. Turn ON the autocomplete feature for form, in your browser.
2. Make sure to name all your input fields. Without naming, autocomplete feature may not work.
3. If not specified, tags will inherit autocomplete feature from its parent tag. If not turned OFF, browser will have autocomplete turned ON by default, once it is enabled in browser settings.

autocomplete=”off”
Turn off autocomplete to password fields, debit card, credit card, account number fields.

autofocus Attribute of Form Field: HTML5

Quick video to illustrate autofocus attribute of HTML5 form fields.

autofocus-html5-form

Here we take 3 input fields, and one field is set with autofocus attribute.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< !DOCTYPE HTML>
<html>
<head>
<title>Form, Autofocus: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" />
<input type="text" />
<input type="text" autofocus/>
<button>Done</button>
</form>
 
 
</body>
</html>

In above case, the third input field gets the autofocus.

autofocus Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=E1L5-5ZhZaE]

YouTube Link: https://www.youtube.com/watch?v=E1L5-5ZhZaE [Watch the Video In Full Screen.]



Note: You can also apply autofocus to the buttons, so that user can directly hit OK or CANCEL by pressing Enter key of their keyboard! – whichever is most desired.

Access Specifiers: PHP OOP

Controlling Access with public, private and protected access modifiers.
These access specifiers can be used on both variables/attributes and methods.

In this video tutorial, we’ll demonstrate it using attributes.

Access Specifiers:
1. public
2. private
3. protected

Class With Attributes

1
2
3
4
5
6
7
8
9

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
?>

var $a is similar to writing public $a

We shall extend class container to another class called contains.
Extending class is an inheritance property, and we shall discuss inheritance in another article. For now, know that, with extends keyword, all the properties and methods with public / protected access are inherited.

Extends

1
2
3
4
5
6
7
8
9
10
11
12
13

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
?>

Here, contents of class container is extended by class contains.

Object of class container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
 
 $obj1 = new container();
         echo $obj1->a;
         echo $obj1->b;
?>

This outputs: 10 and 20 respectively.

Object of class contains

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
 
 $obj2 = new contains();
         echo $obj2->a;
         echo $obj2->b;
?>

This outputs: 10 and 20 respectively.
i.e., public attributes are inherited

Accessing private / protected attributes outside class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
 
 $obj1 = new container();
         echo $obj1->c;
         echo $obj1->d;
?>

It through’s error, since you cannot access, private and protected variables/attributes outside the class.

Now lets check if private and protected variables are actually inherited:

Inheriting private attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 function __construct()
{
echo $this->c;
}
 }
 
 $obj1 = new contains();
?>

This through’s error, because $c is not inherited to class contains and thus not present inside class contains. Which means, private variables and methods cannot be inherited.

Inheriting protected attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 function __construct()
{
echo $this->d;
}
 }
 
 $obj1 = new contains();
?>

Output’s 40.
This means, protected variables and methods are inherited.

Access Specifiers: PHP OOP


[youtube https://www.youtube.com/watch?v=2Ow_cgBEGmk]

YouTube Link: https://www.youtube.com/watch?v=2Ow_cgBEGmk [Watch the Video In Full Screen.]



Conclusion
public attributes and methods are inherited and can be accessed outside the class.
private attributes and methods cannot be inherited and cannot be accessed outside the class.
protected attributes and methods can be inherited but cannot be accessed outside the class.