Form Data with OO PHP

Helo Friends , How are you?

I am ready to inform you how to use form data using PHP Class.

First of all, make a class named “myData”. Then follow the code here-

<?php
class myData{
    public $name;
    public $age;
    public $sex;

    public function setData($x, $y, $z)
    {
        $this->name = $x;
        $this->age = $y;
        $this->sex= $z;
    }

}

?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<?php

    if($_POST['submit'])
    {
        $mName=$_POST['myname'];
        $mAge=$_POST['myage'];
        $mSex=$_POST['mysex'];

        //creating object now
        $data= new myData();

        $data->setData($mName,$mAge,$mSex);

        echo "Hello ".$data->name.". Your are ".$data->age." years old. You are a ";
        if($data->sex==1)
        {
            echo "Male.";
        }
        else
        {
            echo "Female.";
        }

    }

?>

    <form name="" method="post">
        Name: <input type="text" name="myname" required 
placeholder="i.e. Mr. Suchi"/><br/>
        Age: <input type="text" name="myage" required 
placeholder="i.e. 22" /><br/>
        You are: <input type="radio" name="mysex" value="1" /> 
Male <input type="radio" name="mysex" value="2" />Female<br/>

        <input type="submit" name="submit" value="Show My Data"/>

    </form>

</body>
</html>

Here is the code to access form data with object oriented PHP class.

Thanks for reading

Advertisements

Css3 text shadow effects

Hello Friends,

Now I am ready to introduce some css3 text shadow effect.

Css3 can spice up your design in simple and easy way . You can achieve a lot of the effects that needed java scripts and image with css3 easily with few lines . In this post I will show how to create some cool effects using text-shadow only .

Let’s Start

The property text-shadow add one or more shadow to a text .It’s included into Css3 text module .

Syntax

  • The vertical and horizontal distance can have + or – values . They also can have the value 0.
  • Blur radius : Represents the size of the blur effect if the value is zero or it wasn’t represented then the shadow won’t be blurred .
  • Color:is the Shadow color . If it is not represented then the shadow color will use the text color instead .

Browser Support :

  • Opera 9.5+( Although I’ve noticed that color: transparent was not supported )
  • Firefox 3.5+
  • Safari 1.0+
  • Google Chrome

 

1. Glow and extra glow

To achieve the glow effect

.glow {color:#FFFFFF ;

text-shadow:0 0 20px yellow ;

}

Try experimenting …change the radius value to get different effects .

Using the previous cc will add some glow but not as intense as sometimes you might need the solution is to add multiple shadows with different radius values .

.extraGlow {color:white;

text-shadow:0 0 30px yellow , 0 0 70px yellow ;

}

We’ve added 2 shadows with 30 and 70 radius values with the same yellow color .

2. Apple style

Pretty simple .. That’s why I love css3

applestyle{background:#666

color: #000;

text-shadow: 0px 1px 1px #fff;

}

3. Photoshop Emboss

.Emboss  {background:#ccc ;

color:#ccc;

text-shadow: -1px -1px white, 1px 1px #333;

}

I used multiple shadows here to achieve the effect one to the top/right other to the bottom/left .One down side to this is that if the browser doesn’t support text-shadow (you know what and who I’m talking about ?! :) ) then you’ll end up with unreadable text .

4. Photoshop Pillow emboss

.PillowEmboss {background:#ccc;

color:#ddd;

text-shadow: 1px 1px white,

-1px -1px #444;

}

Again multiple shadows used here .

5. Blurry text

I found this at Simurai Website. Which is a cleaver trick to make the text color transparent and add a blurred shadow to achieve a blurred text effect.Changing the radius value will change the blur value the higher the value the more blurred text you’ll get.

.blurytext {color: transparent;

text-shadow: #fff 0 0 10px;

}

6. Inset text

I found this trick at StylizedWeb .This a very light and elegant effect it adds a nice touch to the text .

.insettext{color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}

The shadow color and the background color are the same .

7. Stroke text

I will admit this is not a very neat effect and needs little improvement to have “realistic” look stroke ..but thought I’ll add it any way .

.Stroke{color:red;

font-weight: bold;

text-shadow: 1px 1px 0px #000,

-1px -1px 0px #000;

}

By adding 2 shadows in the opposite directions you can have what looks like a stroked text.

8.  3D effect

I love this .. I can’t think of much uses for it but I still love it .Found this on Css-trick and thought it’s really cool .By adding multiple shadows with the same color you can achieve what looks like a 3d text .

.effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}

Thanks to you for reading this article.

HTML5 new elements for Newbe

Hello Learners.

Hope you are very well in health. Now I am ready to inform you the elements of HTML5. Lest see the elements of that.

New elements for better structure:

Tag Description
<article> Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.
<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content
<bdi> For text that should not be bound to the text-direction of its parent elements
<command> A button, or a radiobutton, or a checkbox
<details> For describing details about a document, or parts of a document
<summary> A caption, or summary, inside the details element
<figure> For grouping a section of stand-alone content, could be a video
<figcaption> The caption of the figure section
<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header> For an introduction of a document or section, could include navigation
<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark> For text that should be highlighted
<meter> For a measurement, used only if the maximum and minimum values are known
<nav> For a section of navigation
<progress> The state of a work in progress
<ruby> For ruby annotation (Chinese notes or characters)
<rt> For explanation of the ruby annotation
<rp> What to show browsers that do not support the ruby element
<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time> For defining a time or a date, or both
<wbr> Word break. For defining a line-break opportunity.


New Media Elements

HTML5 provides a new standard for media content:

Tag Description
<audio> For multimedia content, sounds, music or other audio streams
<video> For video content, such as a movie clip or other video streams
<source> For media resources for media elements, defined inside video or audio elements
For embedded content, such as a plug-in
<track> For text tracks used in mediaplayers


The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description
<canvas> For making graphics with a script


New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description
<datalist> A list of options for input values
<keygen> Generate keys to authenticate users
<output> For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for better input control before sending it to the server:

Type Description
tel The input value is of type telephone number
search The input field is a search field
url The input value is a URL
email The input value is one or more email addresses
datetime The input value is a date and/or time
date The input value is a date
month The input value is a month
week The input value is a week
time The input value is of type time
datetime-local The input value is a local date/time
number The input value is a number
range The input value is a number in a given range
color The input value is a hexadecimal color, like #FF8800
placeholder Specifies a short hint that describes the expected value of an input field
That's enough for today now. Be safe until next tutorial.

Bye