1. Form using Inline CSS in HTML
<!doctype html>
<html>
<head>
<title>Inline Login Form</title>
</head>
<body>
<div>
<h2 style="text-decoration:underline">Login Form</h2>
<div style="width:300px;">
<form name="myform" action="" method="POST">
<div style="border:1px solid black;padding:5px;">
<span style="border-right:1px solid black;padding:7px 30px 7px 7px;">Email:</span>
<span><input type="text" name="email"> </span>
</div>
<div style="border:1px solid black;padding:5px;">
<span style="border-right:1px solid black;padding:7px;"> Password:</span>
<span><input type="password" name="pass"></span>
</div>
<div style="border:1px solid black;padding:5px">
<span style="border-right:1px solid black;padding:7px 69px 7px 7px;"> </span>
<span>
<input type="submit" name="submit" value="Submit">
<input type="reset" value="Reset">
</span>
</div>
</form>
</div>
</div>
</body>
</html>
*****************************************************
2,.Form using Internal CSS in HTML
<!doctype html>
<html>
<head>
<title>Internal Login Form</title>
<style>
h2{
text-decoration:underline;
}
div.border{
border:1px solid black;
padding:5px;
}
.span1{
border-right:1px solid black;
padding:7px 30px 7px;
}
.span2{
border-right:1px solid black;
padding:7px 19px;
}
.span3{
border-right:1px solid black;
padding: 7px 50px;
}
</style>
</head>
<body>
<h2>Login Form</h2>
<div style="width:300px;">
<form name="myform" action="" method="POST">
<div class="border">
<span class="span1">Email:</span>
<input type="text" name="email">
</div>
<div class="border">
<span class="span2"> Password:</span>
<input type="password" name="pass">
</div>
<div class="border">
<span class="span3"> </span>
<input type="submit" name="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</div>
</body>
</html>
**********************************************************
3.Form Using External CSS in HTML
<!DOCTYPE html>
<html>
<head>
<title>External Registration Form</title>
<link rel="stylesheet" type="text/css" href="externalform.css">
</head>
<body>
<form name="myForm" action="" method="POST" autocomplete="off" enctype="multipart/form-data">
<h2 >Registration Form</h2>
<p> Username:<span class="span1">*</span><input type="text" placeholder="Enter username" required><p>
<p>Password:<span class="span2">*</span><input type="text" placeholder="Enter password"required></p>
<p> Gender:<span class="span3">*</span><input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<input type="radio" name="gender" value="Other">Other
</p>
<p>Program:<span class="span4">*</span> <select name="program" >
<option value="" selected>--Select--</option>
<option value="se" >Software Engineering</option>
<option value="it" >IT-Engineering</option>
<option value="ce">Computer Engineering</option>
</select>
</p>
<p>
Photo:<input type="file" name="myFile" multiple="multiple" >
</p>
< <input type="submit" class="button" value="Submit">
<input type="reset" class="button" value="Reset">
</form>
</body>
</html>
///External CSS Code/////////////////////////
h2{
text-decoration:underline;
}
span.span1,.span2,.span3,.span4{
color:red;
}
.button {
background-color:red;
}
.button:hover {
background-color:black;
color:white;
}
************************************************************
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>External Registration Form</title>
<link rel="stylesheet" type="text/css" href="externalformbycss.css">
</head>
<body>
<form name="myForm" action="" method="POST" autocomplete="off" enctype="multipart/form-data">
<div>
<p>First name <span>*</span>   <input type="text" size="20" name="firstname"></p>
<p>Last name <span>*</span>  <input type="text" name="lastname"> </p>
<p>Password <span>*</span>  <input type="password" name="psw"></p>
<p> Confirm Password <span>*</span> <input type="password" name="psw"></p>
<p>Email <span>*</span> <input type="text" name="email" placeholder="abc@gmail.com"> </p>
<p>Roll Number <span>*</span><input type="text" name="roll"/> </p>
<p>Mobile Number <span>*</span><input type="text" name="mobile number"/> </p>
<p>
Gender <span>*</span> <input type="radio" name="gender" value="male" > Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</p>
<p>
Upload Photo <span>*</span> <input type="file" name="myFile" multiple="multiple" >
</p>
<p>
Program <span>*</span><select name="program" >
<option value="">--Select--</option>
<option value="se" >Software Engineering</option>
<option value="it" >IT-Engineering</option>
<option value="ce">Computer Engineering</option>
</select>
</p>
<p>
Registration Year <span>*</span> <input type="date" name="registration"/>
</p>
<p>
Message <span>*</span> <textarea name="message" rows="3" cols="20">Message Us
</textarea>
</p>
</div>
<input type="submit" class="button" value="Submit">
<input type="reset" class="button" value="Reset">
</form>
</body>
</html>
CSS Code
body
{
margin-bottom:50px;
padding:10px 100px;
}
div p span {
color:red;
}
.button {
background-color:rgb(187, 170, 233);
}
.button:hover {
background-color:black;
color:white;
}
Comments
Post a Comment