Scribd
Upload
8 views

forms explanation html

The document outlines the essential HTML tags and their functions used in creating a registration form, including declarations, structure, and input fields. It also describes CSS styles that enhance the visual presentation of the form, such as layout, colors, and hover effects. Overall, it serves as a guide for building a responsive and user-friendly registration interface.

Uploaded by

Williams Onyango
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

forms explanation html

The document outlines the essential HTML tags and their functions used in creating a registration form, including declarations, structure, and input fields. It also describes CSS styles that enhance the visual presentation of the form, such as layout, colors, and hover effects. Overall, it serves as a guide for building a responsive and user-friendly registration interface.

Uploaded by

Williams Onyango
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Tags and Their Uses:

HTML Code Functions:

1. <!DOCTYPE html>: Declares the document type and version of HTML being used
(HTML5 in this
case).
2. <html
lang="en">: The
root element that
wraps all the
content. The lang
attribute specifies
the language of
the document
(English in this
case).
3. <head>: Contains
meta-information
about the HTML
document, such as
the title, character
set, and links to
stylesheets.
4. <meta
charset="UTF-
8">: Specifies the character encoding for the HTML document (UTF-8).
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Sets the viewport properties for responsive web design, ensuring the page scales well
on different devices.
6. <title>Registration Form</title>: Sets the title of the web page, which is
displayed in the browser's title bar or tab.
7. <link rel="stylesheet" href="styles.css">: Links the external CSS file
(styles.css) to the HTML document, allowing the styles defined in the CSS file to
be applied.
8. <body>: Contains the main content of the HTML document.
9. <div class="container">: Creates a division or section of content. The
class="container" attribute assigns a class name that can be used to apply CSS
styles.
10. <h2>Registration Form</h2>: Defines a level 2 heading with the text "Registration
Form".
11. <form action="#" method="post">: Creates a form for user input. The action="#"
attribute specifies the URL where the form data will be sent (currently a
placeholder), and the method="post" attribute specifies that form data should be
sent using the POST method.
12. <label for="username">Username:</label>: Defines a label for the username
input field. The for="username" attribute associates the label with the input field
that has the ID "username".
13. <input type="text" id="username" name="username" required>: Defines an
input field for text. The type="text" attribute specifies that this is a text input field,
the id="username" attribute assigns an ID to the field, the name="username"
attribute provides a name for the field, and the required attribute indicates that
this field must be filled out before submitting the form.
14. <input type="email" id="email" name="email" required>: Defines an input
field for email. The type="email" attribute specifies that this is an email input field.
15. <input type="password" id="password" name="password" required>: Defines
an input field for the password. The type="password" attribute specifies that this is
a password input field.
16. <input type="password" id="confirm-password" name="confirm-password"
required>: Defines an input field for confirming the password. The id="confirm-
password" attribute assigns an ID to the field.
17. <button type="submit">Register</button>: Defines a button that submits the
form when clicked. The type="submit" attribute specifies that this is a submit
button.
CSS Code Functions:

1. * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial,


sans-serif; }: Applies universal styles to all elements. box-sizing: border-box
ensures that padding and border are included in the element's total width and
height. margin: 0 and padding: 0 remove default margin and padding. font-
family: Arial, sans-serif sets the default font.
2. body { background-color: #f2f2f2; display: flex; justify-content:
center; align-items: center; height: 100vh; }: Styles the <body> element.
background-color: #f2f2f2 sets the background color. display: flex; justify-
content: center; align-items: center; centers the content using Flexbox.
height: 100vh sets the height to 100% of the viewport height.
3. .container { background-color: #fff; padding: 20px; box-shadow: 0 0
10px rgba(0, 0, 0, 0.1); border-radius: 10px; width: 300px; }: Styles the
element with the class "container". background-color: #fff sets the background
color. padding: 20px adds padding inside the container. box-shadow: 0 0 10px
rgba(0, 0, 0, 0.1) adds a subtle shadow around the container. border-radius:
10px rounds the corners. width: 300px sets the container's width.
4. h2 { text-align: center; margin-bottom: 20px; }: Styles the <h2> element.
text-align: center centers the text. margin-bottom: 20px adds space below the
heading.
5. label { margin-top: 10px; display: block; font-weight: bold; }: Styles the
<label> element. margin-top: 10px adds space above each label. display: block
makes the label a block-level element. font-weight: bold makes the label text bold.
6. input[type="text"], input[type="email"], input[type="password"] {
width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 20px;
border: 1px solid #ccc; border-radius: 5px; }: Styles the text, email, and
password input fields. width: 100% makes the input fields fill the container's width.
padding: 10px adds padding inside the input fields. margin-top: 5px and margin-
bottom: 20px add space above and below the input fields. border: 1px solid #ccc
adds a border around the input fields. border-radius: 5px rounds the corners.
7. button { width: 100%; padding: 10px; background-color: #4CAF50; color:
white; border: none; border-radius: 5px; cursor: pointer; }: Styles the
<button> element. width: 100% makes the button fill the container's width.
padding: 10px adds padding inside the button. background-color: #4CAF50 sets
the button's background color. color: white sets the text color. border: none
removes the border. border-radius: 5px rounds the corners. cursor: pointer
changes the cursor to a pointer when hovering over the button.
8. button:hover { background-color: #45a049; }: Adds a hover effect to the
button. background-color: #45a049 changes the background color when the
button is hovered over.

You might also like