Create Dynamic input text fields in html using PHP

      Sometimes we need to create input fields in the form according to the need of users. Let it be dynamic,If you don't know the no.of fields required exactly. In this tutorial we see how to generate a dynamic input field  & how to print those values in a for loop using php.
Grab latest version php.net.

Get the Number of text fields to generate & pass it to main.php

   <form action="main.php" method="post">
        No.of Text fields <input type="text" name="nos" />
       <input type="submit" value="Submit" />
   </form>

• $nos going to be no.of times the for loop iterate.

Get dynamic variable & print in PHP

In this tutorial we will see how to get N number of dynamic variables and print it using php. Each value is accessed using a for loop.

if(isset())

•    It is used to check for null values
•    $nos is no.of text fields generated,so for loop used to get values of generated fields.
•    'c'.$i  ->  become c1 at 1st iteration and c2,c3,c4 ...and so on.

     <?php

            if(isset($_POST['nos']))
               $nos = $_POST['nos'];

            $techie=0;
            for($i=1;$i<= $nos;$i++)
                 {
                    $techie = $_POST['c'.$i] ;
                     echo "$techie";
    
                 }

        ?>




_________________________________________________________________________________

FB popup window in Html/Css

Facebook popup window design in html & css. css for attractive pop up window


HTML code:

<div class="fbone">
<div class="fbhe">Pradeesh</div>
<div class="fbtwo">

<br><br>
Hi, this a popup window<br>
Techie touch

</div>
<div class="fbbot"></div>
</div>

CSS code:

.fbone{

width:350px;

height:200px;

border:8px solid #6E6E6E;

opacity:0.6;

border-radius:5px;

}

.fbhe{

background-color:#4682B4;

height:40px;

padding:0px;

margin:0px;

color:white;

font-size:24px;

}

.fbtwo

{

padding:0 10px;

background-color:#fff;

height:119px;

}

.fbbot{

height:40px;

background-color:#E0E0E0;

border-top:1px solid #CCCCCC;

}

Attractive fonts in Html/Css

font-face in css to use large collection to attractive cool fonts. Download open type or true type fonts and use is it in your website.

code :


<style>


@font-face {
    font-family:'Di';
    src:url('fonts/Di.woff') format('woff');
src:url('fonts/Di.ttf') format('truetype'),
('fonts/Di.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family:'Action';
    src:url('fonts/Action.ttf') format('truetype');
src:url('fonts/Action.woff') format('woff');
 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'amadeus';
    src:url('fonts/amadeus/amadeus.woff') format('woff');
src:url('fonts/amadeus/amadeus.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'anagram';
    src:url('fonts/anagram/anagram.woff') format('woff');
src:url('fonts/anagram/anagram.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family:'alphaecho';
    src:url('fonts/alphaecho/alphaecho.woff') format('woff');
src:url('fonts/alphaecho/alphaecho.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'alusine';
    src:url('fonts/alusine/alusine.woff') format('woff');
src:url('fonts/alusine/alusine.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'alfa-slab';
    src:url('fonts/alfa-slab/alfa-slab.woff') format('woff');
src:url('fonts/alfa-slab/alfa-slab.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family:'after-shock';
    src:url('fonts/after-shock/after-shock.woff') format('woff');
src:url('fonts/after-shock/after-shock.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'alex-brush';
    src:url('fonts/alex-brush/alex-brush.woff') format('woff');
src:url('fonts/alex-brush/alex-brush.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family:'burnstown_dam';
    src:url('fonts/burnstown_dam/burnstown_dam.woff') format('woff');
src:url('fonts/burnstown_dam/burnstown_dam.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'bigfish';
    src:url('fonts/bigfish/bigfish.woff') format('woff');
src:url('fonts/bigfish/bigfish.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
font-family: League-Gothic;
src: url("fonts/League-Gothic.otf") format("opentype");
}
@font-face {
font-family: Museo;
src: url("fonts/Museo300-Regular.otf") format("opentype");
}

h4 {
font-family:'Action';
font-size:22px;
}
h5 {
font-family:'Di';
font-size:22px;
}
h4.amadeus{
font-family:'amadeus';
font-size:26px;
}
h4.anagram{
font-family:'anagram';
font-size:26px;
}
h4.alphaecho{
font-family:'alphaecho';
font-size:40px;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}

h4.alusine{
font-family:'alusine';
font-size:26px;
}
h4.alfa-slab{
font-family:'alfa-slab';
font-size:26px;
}


h4.after-shock{
font-family:'after-shock';
font-size:26px;
color:black;
 background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h4.alex-brush{
font-family:'alex-brush';
font-size:30px;
}


h4.burnstown_dam{
font-family:'burnstown_dam';
font-size:44px;
color:orange;
}
h4.bigfish{
font-family:'bigfish';
font-size:30px;

}
h2.shdow
{
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */
font-family:'Myriad Pro', Verdana, Arial, Helvetica, sans-serif; font-size:50px; color:#98F5FF; letter-spacing:5px; text-align:center; line-height:110px;
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */

    -moz-transition: all 0.12s ease-out; /* Firefox */

  -o-transition: all 0.12s ease-out; /* Opera */


}
h2.shdow:hover  {



  /* Scaling Effect */

  -webkit-transform: scale(1.1);     /* Safari & Chrome */

  -moz-transform: scale(1.1); /* Firefox */

  -o-transform: scale(1.1);     /* Opera */

 

}
#neon {
 padding: 10px;
}

#neon h1 {
text-align: center;
margin: 50px auto;
font-family: "Museo";
font-size: 80px; text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
#inset {
padding: 10px; background: #474747;
}

#inset h1 {
text-align: center;
margin: 50px auto;
font-family: "League-Gothic", Courier;
font-size: 80px; text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;

}


button.blue-pill {
  background-color: #a5b8da;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
  background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
  background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
  background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
  background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
  background-image: linear-gradient(top, #a5b8da, #7089b3);
  border-top: 1px solid #758fba;
  border-right: 1px solid #6c84ab;
  border-bottom: 1px solid #5c6f91;
  border-left: 1px solid #6c84ab;
  border-radius: 18px;
  -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
  box-shadow: inset 0 1px 0 0 #aec3e5;
  color: #fff;
  font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #64799e;
  text-transform: uppercase;
  width: 350px; }
  button.blue-pill:hover {
    background-color: #9badcc;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9badcc), color-stop(100%, #687fa6));
    background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);
    background-image: -moz-linear-gradient(top, #9badcc, #687fa6);
    background-image: -ms-linear-gradient(top, #9badcc, #687fa6);
    background-image: -o-linear-gradient(top, #9badcc, #687fa6);
    background-image: linear-gradient(top, #9badcc, #687fa6);
    border-top: 1px solid #6d86ad;
    border-right: 1px solid #647a9e;
    border-bottom: 1px solid #546685;
    border-left: 1px solid #647a9e;
    -webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
    box-shadow: inset 0 1px 0 0 #a5b9d9;
    cursor: pointer; }
  button.blue-pill:active {
    border: 1px solid #546685;
    -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }

</style>
</head>
<body>

<h5>1.THis is to Action font -Techie Touch </h5>
<h4>2.THis it Di Fonts -Techie Touch </h4>
<h4 class="amadeus">3.THis it amadeus Fonts -Techie Touch </h4>
<h4 class="anagram">4.THis it Anagram Fonts -Techie Touch </h4>
<h4 class="alphaecho">5.THis it Aalphaecho Fonts -Techie Touch </h4>

<h4 class="alfa-slab">7.THis it Alfa-slab Fonts -Techie Touch </h4>

<h4 class="after-shock">8.THis it Aafter-shock Fonts -Techie Touch </h4>
<h4 class="alex-brush">9.THis it Aalex-brush Fonts -Techie Touch </h4>

<h4 class="burnstown_dam">10.THis it burnstown_dam Fonts -Techie Touch </h4>
<h4 class="bigfish">11.THis it A bigfish Fonts -Techie Touch </h4>
<h2 class="shdow">12.3D CSS Shadow Text  -Techie Touch </h4>

<div id="neon">
<h1>13.Neon -Techie Touch</h1>
</div>
<div id="inset">
<h1>14.Inset Techie Touch</h1>
</div><br>
 <button class="blue-pill"><h4 class="alphaecho">Place An Order</h4></button>

change the colour of input text field in Html/Css

tutorial to create a colourful text field in html5 /css . (Colorful form fields)
Are you Bored with the old white text field in html , let add some colour to text field using CSS. Make your form more attractive.
                         
                                                     DEMO

CSS : 


.input {
   
    outline:none;
     border:2px solid #D2B48C;
    background:#FFE7BA;
    border-radius:6px;
    font-size:14px;
    padding:5px;
    margin-bottom:10px; 
}

.input:hover {
 
    background: #EEEED1;
border-color:#9ecaed;
    box-shadow:0 0 8px #9ecaed;

}


HTML :
<input type="email" size="30" class="input" name="email" required="required" autocomplete="on">





RELATED POSTS:

   HTML, CSS Menu Navigation Bar Example code

   Attractive,colorful Dropdown list box in Html,Css 


_________________________________________________________________________________ 

Marquee tag in html Flying/Moving text

How to get a moving/fly text using marquee tag in html- tutorial + sample code.

marquee tag is used in html to make moving text

 <marquee>your text goes here </marquee> your text goes here 

 Marquee tag comes with some attributes like :
 
        direction -  specify the direction in which the text scroll
    
              behavior -  specifies the type of scrolling. Example- scroll, slid and alternate.

         loop       -  specifies the number of time text/image will scroll.


upwards:

<marquee direction="up">Techie-Touch</marquee>

Techie-Touch
Right:

    <marquee direction="right">Techie-Touch</marquee>

Techie-Touch

Alternate:

    <marquee direction="alternate">Techie-Touch</marquee>

Techie-Touch

Down:

    <marquee direction=down">Techie-Touch</marquee>

Techie-Touch

Menu Navigation bar tutorial with code

simple tutorial for understanding drop down menu bar with example source code.

CSS code :

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }

#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
#buttongm {
padding:7px 5px;
background-color:#1E90FF;
color:white;
border:none;
font:14px sans-serif;
font-weight:bold;

}
#buttongm:hover {
background-color:#1C86EE;

}

HTML :


<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Techie touch</a></li></ul>
</li>
       <li><a href="#">Item Two</a><ul>
<li><a href="#">1 Under Item two </a></li>
<li><a href="#">2 Under Item two</a></li>
<li><a href="#">3 Pradeesh</a></li></ul>
</li>
<!-- ... and so on ... -->
</ul>



Related Post:


Drop-down  Navigation bar

Colorful table in Html/Css Tutorial

Attractive table creation tutorial in Html . Sample code for top rated tables

simple html table:

<table border=1 cellpadding=0 cellspacing=0>
<tr><th>S.no</th><th>Products<th></th></tr>
<tr><td>1</td><td>Item.1<td></tr>
<tr ><td>2</td><td>Item.2<td></tr>
<tr ><td>3</td><td>Item.3<td></tr>
</table>

S.no	Products
1	Item.1
2	Item.2
3	Item.3

                                  tr - table row
                                  th - table heading
                                  td - table data

Colorful table with css:
          Using css ,html tables can be made attractive which give a rich look to your website.

css:

   #tablehome {
    border:1px solid #D9D5BE;
    border-collapse:collapse;
    text-align:center;
   
}
#tablehome td {
      border:1px solid #D9D5BE;
      padding: 2px 0px;
      }    

html:

   <table id="tablehome" >
<tr bgcolor=#8B6914 style="color:white;"><th>S.no</th><th>Products<th></th></tr>
<tr bgcolor=#EED5B7><td>1</td><td>Item.1<td></tr>
<tr bgcolor=#EEB422><td>2</td><td>Item.2<td></tr>
<tr bgcolor=#EED5B7><td>3</td><td>Item.3<td></tr>
<tr bgcolor=#EEB422><td>4</td><td>Item.4<td></tr>
</table>

                           

HTML image map/Hotspot creation

To link a part of image in html. rectangular,circle hotspot. Imagemap define a one or more clickable area in an image, the area can be specified using the co-ordinates of shape.

                                         Demo1              Demo2

Html :

car.html

<html>
<body>
<img  src="car.jpg" usemap="#car" >
<map name="car">
<area shape="rect " coords="240,226,300,300" href=wheel.html>
<area shape="rect " coords="470,221,511,580" href=wheel.html>
</map>
</body>
</html>

wheel.html

 <center><img align="centre" src="wheel.jpg">
 <h3>wheel </h3>
Durability <br><br>
Size : --
</center>

      Live Demo: 
                  Demo1              Demo2

Attractive,colorful Dropdown list box in Html,Css

To change the background color of drop-down menu box i.e Select tag  in html

Are you bored to default drop-down box in html,Lets make it colorful using CSS.

      Lets see a sample program to create a colorful drop-down box.

                        

  Html:

 <select name="state" id="state" >
            <option value="">Select state....!</option>
            <option value="">Option 1</option>
            <option value="">Option 2</option>
            <option value="">Option 3</option>
            <option value="">Pradeesh</option>
         
            </select>

  CSS :

       select {
  width: 158px;
  height: 24px;
  color: #fff;
  font: 14px arial,sans-serif;
  background-color:#5e8ce9;
       }
select:hover {
  background-color:#8db3ff;
  color: black;
}
select option:nth-child(odd) {
            color:black;
            background:#5e8ce9;
        }
 select option:nth-child(even) {
            color:black;
            background:#5e8ce9;
        }

  Ex:2  Background color of each item in select tag can be changed, in the below code the "odd" items & "even " items in the list are differentiated.

 <style>

select {
  width: 158px;
  height: 24px;
  color: #fff;
  font: 15px Timesnewroman;
  background-color:#53868B;
}
select option:nth-child(odd) {
            color:black;
            background:#9BCD9B;
        }
 select option:nth-child(even) {
            color:black;
            background:#66CDAA;
        }
</style>


Read more about simple drop down box & their attributes in w3schools .

Drop-Down Navigation menu bar in Html/Css code

Attractive drop down navigation menu for websites.Drop down menu tutorial.
Navigation bar helps the visitor to navigate the web site.It also help in search engine optimization.

HTML:

<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
       <li><a href="#">Item Two</a><ul>
<li><a href="#">1 Under Item two </a></li>
<li><a href="#">2 Under Item two</a></li>
<li><a href="#">3 Under Item two</a></li></ul>
</li>
<!-- ... and so on ... -->
</ul>

CSS:

#navbar {

margin: 0;

padding: 0;

height: 1em; }

#navbar li {

list-style: none;

float: left; }

#navbar li a {

display: block;

padding: 3px 8px;

background-color: #5e8ce9;

color: #fff;

text-decoration: none; }

#navbar li ul {

display: none; 

width: 10em; /* Width to help Opera out */

background-color: #69f;}

#navbar li:hover ul {

display: block;

position: absolute;

margin: 0;

padding: 0; }

#navbar li:hover li {

float: none; }

#navbar li:hover li a {

background-color: #69f;

border-bottom: 1px solid #fff;

color: #000; }

#navbar li li a:hover {

background-color: #8db3ff; }

More animated flash navigation menu bars.
_______________________________________________________________________________

HTML, CSS Menu Navigation Bar Example code

Professional attractive Html, CSS  Menu Navigation Bar Example with source code tutorial
Beautiful hover effect menu bar, with css transition effects sample code.
                                         sample end result :-

HTML, CSS  Menu Navigation Bar Source code

                                         Drop-down  Navigation bar
                                         Navigation bar tutorial with simple example code
Example 1 

HTML  Code :

<div >
  <ul id="button">
    <li><a href="#" >Home</a></li>
    <li><div class="gap"></div></li>
    <li><a href="#">About</a></li>
    <li><div class="gap"></div></li>
    <li><a href="#">Services</a></li>
    <li><div class="gap"></div></li>
    <li><a href="#">F.A.Q</a></li>
     <li><div class="gap"></div></li>
    <li><a href="#">Help</a></li>
    <li><div class="gap"></div></li>  
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

CSS Code :

#button { padding: 0;      }
#button li {
display: inline;
      -moz-border-radius-topleft: 12px;
      -webkit-border-top-left-radius:12px;
      }
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
   width:;
   height:20px;
padding: 10px;
color: #fff;

     

HTML/Css code for Login forms

Tutorial to create a login page.Top 10 design.
Attractive Registration form html/css page tutorial with source code .  

1. Blue Login Box -Techie Touch
HTML

<!Doctype html>
<html>
<div class="fbone">
<div class="ini">
<br>
Name:<br><input type="text"  class="input" name="name" /><br>
Password: <br><input type="password" class="input" name="psw" />
<br>
<input type="submit" id="but" value="Login" />
</div></div>

</html>

CSS:


  .ini{
      background-color:#4682B4;
          }

.fbone{
       width:350px;
       height:200px;
      border:8px solid #6E6E6E;
     border-radius:5px;
}

#but{
       padding:7px 5px;
       margin:25px 0 0 50px;
       background-color:#1E90FF;
       color:white;
       border:none;
       font:14px sans-serif;
       font-weight:bold;
      -moz-box-shadow:    1px 1px 2px 1px #ccc;
     -webkit-box-shadow: 1px 1px 2px 1px #ccc;
       box-shadow: 1px 1px 2px 1px #ccc;
       text-decoration:none;
}
.input {   
     border:2px solid #dadada;
    background: #ffc; 
    border-radius:6px;
    font-size:14px;
    padding:5px;
    margin-bottom:10px;
             }
   .input:hover {
    background: #ff6;
   border-color:#9ecaed;
    box-shadow:0 0 8px #9ecaed;
            }

2.




________________________________________________________________________________