Program: HTML
<!DOCTYPE html>
<html>
<head>
<title>Simple input form in HTML</title>
<link rel="stylesheet" href="task2style.css">
</head>
<body>
<form id="inputform">
<h2>Personal Details</h2><br />
<table>
<tr>
<td>Name : </td>
<td><input class="demo1" type="text" name="name" placeholder="Enter name" required="required"/></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="password" placeholder="Enter password" required /></td>
</tr>
<tr>
<td>Email-ID :</td>
<td><input type="email" name="email" placeholder="Enter email" required /></td>
</tr>
<tr>
<td>Gender :</td>
<td><input type="radio" name="male" value="male"/>Male <input type="radio" name="Female" value="female"/>Female</td>
</tr>
<tr>
<td>Contact :</td>
<td><input type="text" maxlength="10" required /></td>
</tr>
</table> <br />
<h2>Educational Qualification</h2> <br />
<table>
<tr>
<td>Degree :</td>
<td><input list="degrees" placeholder="--Select Degree--" required /></td>
<datalist id="degrees">
<option value="BSC" />
<option value="BCS" />
<option value="BCA" />
<option value="BE" />
<option value="BCom" />
</datalist>
</tr>
<tr>
<td>Engineering :</td>
<td><input list="engineering" placeholder="--Select Engineering--" required /></td>
<datalist id="engineering">
<option value="Machanical" />
<option value="Computer" />
<option value="IT" />
<option value="Civil" />
<option value="ENTC" />
</datalist>
</tr>
<tr>
<td>Hobbies :</td>
<td><input type="checkbox" name="coding" />Coding <input type="checkbox" name="playing" />Playing <input type="checkbox" name="reading" />Reading</td>
</tr>
</table><br />
<h2>Address</h2> <br />
<table>
<textarea name="address" rows="10" cols="30" placeholder="Enter detail address" required></textarea><br />
Attach Resume: <input type="file" name="file" /> <br /><br>
<input id="button" type="submit" name="submit" />
</table>
</form>
</body>
</html>
CSS Program:
*{padding: 0px; margin: 0px;}
h2{color: red;}
form{text-align: center;}
#inputform{width: 400px; height: 600px; background-color: greenyellow; border-top: 1px solid red; border-bottom: 1px solid red;border-left: 5px solid black; border-right: 5px solid black;}
#button{color: white; background-color: orange; width: 100px; height: 30px; text-transform: uppercase; font-weight: bold;border-radius: 20px; box-align: center;}
Output:
<!DOCTYPE html>
<html>
<head>
<title>Simple input form in HTML</title>
<link rel="stylesheet" href="task2style.css">
</head>
<body>
<form id="inputform">
<h2>Personal Details</h2><br />
<table>
<tr>
<td>Name : </td>
<td><input class="demo1" type="text" name="name" placeholder="Enter name" required="required"/></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="password" placeholder="Enter password" required /></td>
</tr>
<tr>
<td>Email-ID :</td>
<td><input type="email" name="email" placeholder="Enter email" required /></td>
</tr>
<tr>
<td>Gender :</td>
<td><input type="radio" name="male" value="male"/>Male <input type="radio" name="Female" value="female"/>Female</td>
</tr>
<tr>
<td>Contact :</td>
<td><input type="text" maxlength="10" required /></td>
</tr>
</table> <br />
<h2>Educational Qualification</h2> <br />
<table>
<tr>
<td>Degree :</td>
<td><input list="degrees" placeholder="--Select Degree--" required /></td>
<datalist id="degrees">
<option value="BSC" />
<option value="BCS" />
<option value="BCA" />
<option value="BE" />
<option value="BCom" />
</datalist>
</tr>
<tr>
<td>Engineering :</td>
<td><input list="engineering" placeholder="--Select Engineering--" required /></td>
<datalist id="engineering">
<option value="Machanical" />
<option value="Computer" />
<option value="IT" />
<option value="Civil" />
<option value="ENTC" />
</datalist>
</tr>
<tr>
<td>Hobbies :</td>
<td><input type="checkbox" name="coding" />Coding <input type="checkbox" name="playing" />Playing <input type="checkbox" name="reading" />Reading</td>
</tr>
</table><br />
<h2>Address</h2> <br />
<table>
<textarea name="address" rows="10" cols="30" placeholder="Enter detail address" required></textarea><br />
Attach Resume: <input type="file" name="file" /> <br /><br>
<input id="button" type="submit" name="submit" />
</table>
</form>
</body>
</html>
CSS Program:
*{padding: 0px; margin: 0px;}
h2{color: red;}
form{text-align: center;}
#inputform{width: 400px; height: 600px; background-color: greenyellow; border-top: 1px solid red; border-bottom: 1px solid red;border-left: 5px solid black; border-right: 5px solid black;}
#button{color: white; background-color: orange; width: 100px; height: 30px; text-transform: uppercase; font-weight: bold;border-radius: 20px; box-align: center;}
Output:
No comments:
Post a Comment