Daily Video Blog with Anik || CSS Forms || CSS Properties in 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. The code is as follows -
HTML File -
<html>
<head> <title> CSS Forms </title>
<link rel="stylesheet" href="cssforms.css">
</head>
<body>
<form action="" method="">
<table>
<tr> <th> First Name </th>
<td> <input type="text" name="fname" placeholder="Enter your first name" </td>
</tr>
<tr> <th> Last Name </th>
<td> <input type="text" name="lname" placeholder="Enter your last name" </td>
</tr>
<tr> <th> Mobile Number </th>
<td> <input id="m1" type="number" name="mob" placeholder="Enter your number" </td>
</tr>
<tr> <th> <label for="e1"> Email </label> </th>
<td> <input id="e1" type="email" name="email" placeholder="Enter your email" </td>
</tr>
<tr>
<th colspan=2> <input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</th>
</tr>
</table>
</body>
</html>
CSS File -
table {
width: 400px;
height: 300px;
border: 1px solid black;
border-collapse: collapse;
}
input[type=text] {
width: 200px;
background-color: lightgreen;
}
body {
background-color: lightblue;
}
#m1 {
background-color: lightpink;
border: 4px solid gray;
}
#e1 {
padding: 10px 20px;
margin: 5px 5px;
border: 3px solid green;
box-sizing: border-box;
background-color: lightgreen;
}
#e1:focus{
border: 2px solid yellow;
background-color: lightpink;
color: red;
}
input[type=submit] {
background-color: cyan;
}
input[type=reset] {
background-color: cyan;
}
HTML File -
<html>
<head> <title> CSS Forms </title>
<link rel="stylesheet" href="cssforms.css">
</head>
<body>
<form action="" method="">
<table>
<tr> <th> First Name </th>
<td> <input type="text" name="fname" placeholder="Enter your first name" </td>
</tr>
<tr> <th> Last Name </th>
<td> <input type="text" name="lname" placeholder="Enter your last name" </td>
</tr>
<tr> <th> Mobile Number </th>
<td> <input id="m1" type="number" name="mob" placeholder="Enter your number" </td>
</tr>
<tr> <th> <label for="e1"> Email </label> </th>
<td> <input id="e1" type="email" name="email" placeholder="Enter your email" </td>
</tr>
<tr>
<th colspan=2> <input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</th>
</tr>
</table>
</body>
</html>
CSS File -
table {
width: 400px;
height: 300px;
border: 1px solid black;
border-collapse: collapse;
}
input[type=text] {
width: 200px;
background-color: lightgreen;
}
body {
background-color: lightblue;
}
#m1 {
background-color: lightpink;
border: 4px solid gray;
}
#e1 {
padding: 10px 20px;
margin: 5px 5px;
border: 3px solid green;
box-sizing: border-box;
background-color: lightgreen;
}
#e1:focus{
border: 2px solid yellow;
background-color: lightpink;
color: red;
}
input[type=submit] {
background-color: cyan;
}
input[type=reset] {
background-color: cyan;
}
Comments
Post a Comment