html Log in form and css tag এইসটিএমএল লগইন ফর্ম
Designing a Login Form using HTML and CSS
Before proceeding, let's revisit the basics of HTML and CSS. In today's CSS discussion, we will explore another new topic. In CSS, we can style HTML tags similar to using classes and IDs. For example:
<!DOCTYPE html><html><head></head><body><form action="https://agileposts.blogspot.com"><input type="text" placeholder="Email" autocomplete="on" name="email"><br><br><input type="password" autocomplete="on" placeholder="Password" name="password"><br><br><input type="submit" value="Log In"><br><br><form></body></html>
Now, let's design this using CSS. Instead of using a `div`, we can directly apply styles as follows:
<!DOCTYPE html><html><head><style>input {margin-bottom: 10px;border: solid 1px #999;box-sizing: border-box;padding: 12px 8px;width: 250px;}</style></head><body><form action="https://agileposts.blogspot.com"><input type="text" placeholder="Email" autocomplete="on" name="email"><br><br><input type="password" autocomplete="on" placeholder="Password" name="password"><br><br><input type="submit" value="Log In"><br><br><form></body></html>
These two code snippets can be combined as follows:
<!DOCTYPE html><html lang="en"><head><meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/><meta charset="utf-8"><title>agileposts.blogspot.com</title><style>input {margin-bottom: 10px;border: solid 1px #999;box-sizing: border-box;padding: 12px 8px;width: 250px;border-radius: 15px;}input[type=submit] {background-color: #1002BA;border: 1px solid #365899;color: white;font-size: 14px;height: 44px;line-height: 44px;padding: 0 19px;}</style></head><body><center><br><br><br><br><form action="https://agileposts.blogspot.com"><input type="text" placeholder="Email" autocomplete="on" name="email"><br><br><input type="password" autocomplete="on" placeholder="Password" name="password"><br><br><input type="submit" value="Log In"><br><br></form></center></body></html>
Explaination:
- `height`: This refers to the height of an HTML element, such as an image, a div, or a paragraph. It determines how tall the element is displayed.
- `width`: Similar to height, this attribute controls the width of an HTML element, defining its horizontal size.
- `align`: This attribute determines the alignment of inline elements, like images or text, with respect to the surrounding content. It can take values like "left", "right", "center", and "justify".
Remember that these attributes can be used to control the appearance and layout of various HTML elements. Additionally, there are many other attributes like `border`, `color`, `padding`, `background-color`, `font-size`, etc., each serving different purposes depending on your design needs.