Input boxes and buttons
You all have seen the login pages and
signup pages. Usually these pages contains input boxes and the submit and
cancel button.
In this post you will learn to create
input boxes and boxes . Input box is the area where you type the information
and get stored In the server. We use php forms to use this data .
There is also an option tag which allows
you to select things.
Buttons have some special functions like
onclick which performs some special action on the click of button.
//** HTML code for input boxes **//
<!DOCTYPE html>
<html>
<head>
<title>Intoduction</title>
<link
rel="stylesheet" type="text/css" href="style/intro.css">
</head>
<body>
<header
id="head"><h2>Coder99</h2></header>
<div class="loginbox">
<h3>Login</h3><hr><br>
Username
<input type="text" name="name"><br>
Password
<input type="Password" name="Password"><br>
Age
<select>
<option>select</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select><br><br>
<button>Submit</button>
</div>
</body>
</html>
Check out For Better understanding
//** CSS file saved as intro.css **//
body
{
margin:
0px;
background
: grey;
}
#head
{
background
:black;
color:
white;
padding:
.5em;
margin-bottom:
2px;
}
.loginbox
{
height:
14em;
width:
21em;
background-color:
lightyellow;
padding:
.3em;
text-align:
center;
border:
3px solid black;
border-radius:
1em;
position:
fixed;
margin-left:
17em;
margin-top:
5em;
}
button
{
height:
4em;
width:
6em;
background-color:
black;
color:
white;
border:
none;
border-radius:
1.6em;
}
input
{
margin-bottom:
2px;
}
//** This is just the front end view to
use it for real login use need to learn php. For that just wait for next
lesson. **//
Comments
Post a Comment