Merge pull request #10 from gauravfs-14/master

[added]: More Content

docs/html-accessibility.md

@@ -0,0 +1,112 @@
+---
+sidebar_position: 18
+keywords: [html, sample html, basic html]
+---
+
+# Accessibility in HTML
+
+Ensuring accessibility is essential for making web content usable by people with disabilities. HTML provides several features and best practices to improve accessibility and ensure inclusivity for all users.
+
+## Semantic Elements
+
+Using semantic HTML elements properly helps screen readers and other assistive technologies understand the structure and context of the content.
+
+### `<header>`
+
+```html title="header.html"
+<header>
+    <h1>Welcome to My Website</h1>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+### `<main>`
+
+```html title="main.html"
+<main>
+    <article>
+        <h2>Article Title</h2>
+        <p>Article content goes here...</p>
+    </article>
+</main>
+```
+
+### `<nav>`
+
+```html title="nav.html"
+<nav>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/products">Products</a></li>
+        <li><a href="/services">Services</a></li>
+    </ul>
+</nav>
+```
+
+## ARIA Roles and Attributes
+
+The Accessible Rich Internet Applications (ARIA) specification provides additional attributes to enhance the accessibility of HTML elements.
+
+### `role` Attribute
+
+```html
+<div role="navigation">
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/products">Products</a></li>
+        <li><a href="/services">Services</a></li>
+    </ul>
+</div>
+```
+
+### `aria-label` Attribute
+
+```html
+<button aria-label="Close">X</button>
+```
+
+## Form Accessibility
+
+Forms should be accessible to users with disabilities, providing clear labels and error messages.
+
+### Labeling Inputs
+
+```html
+<label for="username">Username:</label>
+<input type="text" id="username" name="username" />
+```
+
+### Error Messages
+
+```html
+<input type="email" id="email" name="email" required aria-describedby="email-error">
+<span id="email-error" role="alert">Please enter a valid email address</span>
+```
+
+## Keyboard Accessibility
+
+Ensure all interactive elements can be accessed and operated using the keyboard alone.
+
+### Focus Styles
+
+```css
+:focus {
+    outline: 2px solid blue;
+}
+```
+
+### Tabindex Attribute
+
+```html
+<div tabindex="0">Focusable Div</div>
+```
+
+## Testing and Validation
+
+Regularly test your website with screen readers and other assistive technologies to ensure it's accessible to all users.

docs/html-form-handeling.md

@@ -0,0 +1,130 @@
+---
+sidebar_position: 16
+keywords: [html, sample html, basic html]
+---
+
+# HTML Forms Handling
+
+Handling forms in HTML involves collecting user input and submitting it to a server for processing. Understanding different attributes and methods associated with HTML forms is crucial for creating interactive and functional web applications.
+
+## Form Submission
+
+Forms can be submitted using two HTTP methods: `GET` and `POST`.
+
+### GET Method
+
+The `GET` method submits form data as URL parameters. It's suitable for small amounts of data and retrieving information.
+
+```html title="get-form.html"
+<form action="/submit-form.php" method="get">
+  <input type="text" name="username" />
+  <input type="submit" value="Submit" />
+</form>
+```
+
+### POST Method
+
+The `POST` method submits form data in the request body. It's suitable for sensitive or large amounts of data.
+
+```html title="post-form.html"
+<form action="/submit-form.php" method="post">
+  <input type="text" name="username" />
+  <input type="submit" value="Submit" />
+</form>
+```
+
+## Form Elements
+
+HTML provides various form elements to collect different types of user input.
+
+### Text Input
+
+```html
+<input type="text" name="username" />
+```
+
+### Password Input
+
+```html
+<input type="password" name="password" />
+```
+
+### Checkbox Input
+
+```html
+<input type="checkbox" name="subscribe" value="1" />
+```
+
+### Radio Input
+
+```html
+<input type="radio" name="gender" value="male" />
+<input type="radio" name="gender" value="female" />
+```
+
+### Select Dropdown
+
+```html
+<select name="country">
+  <option value="usa">United States</option>
+  <option value="uk">United Kingdom</option>
+</select>
+```
+
+### Textarea
+
+```html
+<textarea name="message"></textarea>
+```
+
+## Form Validation
+
+HTML5 introduced built-in form validation attributes to ensure data integrity and improve user experience.
+
+### Required Attribute
+
+```html
+<input type="text" name="fullname" required />
+```
+
+### Pattern Attribute
+
+```html
+<input type="text" name="zipcode" pattern="\d{5}" />
+```
+
+## Client-Side Scripting
+
+You can use JavaScript to enhance form functionality and perform client-side validation.
+
+```html
+<script>
+  function validateForm() {
+    var x = document.forms["myForm"]["email"].value;
+    if (x == "") {
+      alert("Email must be filled out");
+      return false;
+    }
+  }
+</script>
+
+<form name="myForm" onsubmit="return validateForm()">
+  <input type="email" name="email">
+  <input type="submit" value="Submit">
+</form>
+```
+
+## Server-Side Processing
+
+After form submission, the data is typically processed on the server using server-side scripting languages like PHP, Python, or Node.js.
+
+```php
+<?php
+$username = $_POST['username'];
+$password = $_POST['password'];
+
+// Process form data...
+?>
+```
+
+Understanding these concepts and techniques allows you to create robust and interactive forms that efficiently collect and process user input in web applications.