Daily Video Blog on Anik || Exercises on CSS Forms
In this video,I explained the CSS Forms. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -
HTML File -
<html>
<head> <title> Exercises 10 </title>
<link rel="stylesheet" href="exercises10.css">
</head>
<body>
<form action="" method="">
<table align=center>
<caption> Enter Your Details </caption>
<tr> <th> <label for="fn"> First Name </label> </th>
<td> <input id="fn" type="text" name="fname"> </td>
</tr>
<tr> <th> <label for="ln"> Last Name </label> </th>
<td> <input id="ln" type="text" name="lname"> </td>
</tr>
<tr> <th> <label for="dob"> Date of Birth </label> </th>
<td> <input id="dob" type="date" name="dob"> </td>
</tr>
<tr> <th> <label for="mob"> Mobile Number </label> </th>
<td> <input id="mob" type="number" name="mob"> </td>
</tr>
<tr> <th> <label for="e"> Email </label> </th>
<td> <input id="e" type="email" name="e"> </td>
</tr>
<tr> <th> <label for="pass"> Password </label> </th>
<td> <input id="pass" type="password" name="pass"> </td>
</tr>
<tr> <th> <label for="repass"> Retype Password </label> </th>
<td> <input id="repass" type="password" name="repass"> </td>
</tr>
<tr> <th> <label for="g"> Gender </label> </th>
<td> <input id="g" type="radio" name="g"> Male
<input id="g" type="radio" name="g"> Female
</td>
</tr>
<tr> <th> <label for="ps"> Programs Interested </label> </th>
<td> <input id="ps" type="checkbox" name="ps"> B.Tech
<input id="ps" type="checkbox" name="ps"> BBA
<input id="ps" type="checkbox" name="ps"> BCA
</td>
</tr>
<tr> <th> <label for="add"> Address </label> </th>
<td> <textarea id="add"> </textarea> </td>
</tr>
<tr> <th> <label for="country"> Country </label> </th>
<td> <select id="country">
<option> </option>
<option> India </option>
<option> Japan </option>
<option> US </option>
</td>
</tr>
<tr> <th colspan=2> <input type="submit" value="Submit">
<input type="reset" value="Reset">
</th>
</tr>
</table>
</body>
</html>
CSS File -
table {
border: 1px solid black;
background-color: lightblue;
}
body {
background-color: lightpink;
}
caption {
font-size: 20px;
color: red;
}
#fn, #ln, #dob, #mob, #e, #pass, #repass, #add {
padding: 10px 20px;
margin: 7px 7px;
border: 2px solid lightblue;
box-sizing: border-box;
}
textarea {
resize: none;
}
input[type=submit] {
background-color: cyan;
color:red;
}
input[type=reset] {
background-color: cyan;
color:red;
}
HTML File -
<html>
<head> <title> Exercises 10 </title>
<link rel="stylesheet" href="exercises10.css">
</head>
<body>
<form action="" method="">
<table align=center>
<caption> Enter Your Details </caption>
<tr> <th> <label for="fn"> First Name </label> </th>
<td> <input id="fn" type="text" name="fname"> </td>
</tr>
<tr> <th> <label for="ln"> Last Name </label> </th>
<td> <input id="ln" type="text" name="lname"> </td>
</tr>
<tr> <th> <label for="dob"> Date of Birth </label> </th>
<td> <input id="dob" type="date" name="dob"> </td>
</tr>
<tr> <th> <label for="mob"> Mobile Number </label> </th>
<td> <input id="mob" type="number" name="mob"> </td>
</tr>
<tr> <th> <label for="e"> Email </label> </th>
<td> <input id="e" type="email" name="e"> </td>
</tr>
<tr> <th> <label for="pass"> Password </label> </th>
<td> <input id="pass" type="password" name="pass"> </td>
</tr>
<tr> <th> <label for="repass"> Retype Password </label> </th>
<td> <input id="repass" type="password" name="repass"> </td>
</tr>
<tr> <th> <label for="g"> Gender </label> </th>
<td> <input id="g" type="radio" name="g"> Male
<input id="g" type="radio" name="g"> Female
</td>
</tr>
<tr> <th> <label for="ps"> Programs Interested </label> </th>
<td> <input id="ps" type="checkbox" name="ps"> B.Tech
<input id="ps" type="checkbox" name="ps"> BBA
<input id="ps" type="checkbox" name="ps"> BCA
</td>
</tr>
<tr> <th> <label for="add"> Address </label> </th>
<td> <textarea id="add"> </textarea> </td>
</tr>
<tr> <th> <label for="country"> Country </label> </th>
<td> <select id="country">
<option> </option>
<option> India </option>
<option> Japan </option>
<option> US </option>
</td>
</tr>
<tr> <th colspan=2> <input type="submit" value="Submit">
<input type="reset" value="Reset">
</th>
</tr>
</table>
</body>
</html>
CSS File -
table {
border: 1px solid black;
background-color: lightblue;
}
body {
background-color: lightpink;
}
caption {
font-size: 20px;
color: red;
}
#fn, #ln, #dob, #mob, #e, #pass, #repass, #add {
padding: 10px 20px;
margin: 7px 7px;
border: 2px solid lightblue;
box-sizing: border-box;
}
textarea {
resize: none;
}
input[type=submit] {
background-color: cyan;
color:red;
}
input[type=reset] {
background-color: cyan;
color:red;
}
Comments
Post a Comment