started form content

Author: ajay-dhangar

docs/_scripts/creating-forms.js

@@ -0,0 +1,21 @@
+const CreatingForms = () => {
+  return (
+    <div>
+      <h1>Contact Us</h1>
+      <form action="/submit" method="post">
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required />
+        <br />
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required />
+        <br />
+        <label for="message">Message:</label>
+        <textarea id="message" name="message" rows="4" required></textarea>
+        <br />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default CreatingForms;

docs/working-with-forms/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "👩🏻‍💻 Working With Forms",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn how to create forms and collect user input."
+  }
+}

docs/working-with-forms/form-and-input.mdx

@@ -0,0 +1,142 @@
+---
+sidebar_position: 1
+---
+
+# 🙋🏻 HTML Form and Inputs
+
+Forms in HTML are a fundamental way to collect user input on web pages. They enable interaction between the user and the web server, allowing users to submit data, search, and perform various tasks. This guide covers the essential concepts of forms and inputs in HTML, including form structure, attributes, and basic usage.
+
+## 📋 What is an HTML Form?
+
+An HTML form is defined using the `<form>` element, which acts as a container for various input controls, such as text fields, radio buttons, checkboxes, and submit buttons. The form itself can be configured to handle data submission via different methods and actions.
+
+```html title="basic-form.html"
+<form action="/submit-form" method="post">
+  <label for="username">Username: </label>
+  <input type="text" id="username" name="username" required>
+  <input type="submit" value="Submit">
+</form>
+```
+
+### Explanation:
+- **`<form>`**: The main element that contains form controls.
+- **`action` attribute**: Specifies the URL where form data will be sent.
+- **`method` attribute**: Specifies the HTTP method (`get` or `post`).
+
+## 🔘 Common Form Elements
+
+### 1. Input Fields
+The `<input>` element is one of the most versatile elements in HTML forms. It can be used for various types of input, specified by the `type` attribute.
+
+```html title="input-elements.html"
+<form>
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" required>
+
+  <label for="password">Password:</label>
+  <input type="password" id="password" name="password" required>
+
+  <label for="age">Age:</label>
+  <input type="number" id="age" name="age" min="0" max="120">
+
+  <input type="submit" value="Register">
+</form>
+```
+
+### 2. Textarea
+The `<textarea>` element is used for multi-line text input.
+
+```html title="textarea-example.html"
+<form>
+  <label for="comments">Comments:</label>
+  <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
+  <input type="submit" value="Submit">
+</form>
+```
+
+### 3. Select (Dropdown)
+The `<select>` element creates a dropdown list for users to choose from predefined options.
+
+```html title="select-example.html"
+<form>
+  <label for="options">Choose an option:</label>
+  <select id="options" name="options">
+    <option value="option1">Option 1</option>
+    <option value="option2">Option 2</option>
+    <option value="option3">Option 3</option>
+  </select>
+  <input type="submit" value="Submit">
+</form>
+```
+
+### 4. Buttons
+Buttons can be defined using the `<button>` or `<input type="button">` elements.
+
+```html title="button-example.html"
+<form>
+  <button type="submit">Submit</button>
+  <button type="reset">Reset</button>
+</form>
+```
+
+## ✏️ Attributes of Input Elements
+
+### Commonly Used Attributes:
+- **`required`**: Ensures that the field must be filled before submission.
+- **`placeholder`**: Provides a hint to the user about what to enter.
+- **`value`**: Specifies the default value.
+- **`disabled`**: Disables the input, making it uneditable.
+- **`readonly`**: Makes the input read-only.
+
+```html title="input-attributes.html"
+<input type="text" placeholder="Enter your name" required>
+<input type="email" placeholder="Enter your email" value="example@example.com" readonly>
+```
+
+## 🌐 Form Submission
+
+The `method` attribute of the `<form>` tag can be set to:
+- **`get`**: Appends the form data to the URL. Typically used for non-sensitive data.
+- **`post`**: Sends data as a request body. Preferred for sensitive or large amounts of data.
+
+### Example:
+```html title="form-methods.html"
+<form action="/search" method="get">
+  <label for="query">Search:</label>
+  <input type="text" id="query" name="query">
+  <input type="submit" value="Search">
+</form>
+
+<form action="/submit-form" method="post">
+  <label for="feedback">Feedback:</label>
+  <textarea id="feedback" name="feedback"></textarea>
+  <input type="submit" value="Submit">
+</form>
+```
+
+## ✅ Form Best Practices
+- **Use labels** to associate text descriptions with input elements for accessibility.
+- **Group related fields** using the `<fieldset>` and `<legend>` tags.
+- **Provide feedback** to users for better form interaction.
+- **Validate inputs** both on the client-side using HTML attributes and JavaScript, and on the server-side for security.
+
+```html title="fieldset-example.html"
+<form>
+  <fieldset>
+    <legend>Personal Information</legend>
+    <label for="firstname">First Name:</label>
+    <input type="text" id="firstname" name="firstname" required>
+
+    <label for="lastname">Last Name:</label>
+    <input type="text" id="lastname" name="lastname" required>
+  </fieldset>
+
+  <input type="submit" value="Submit">
+</form>
+```
+
+By following these guidelines, you can create well-structured and user-friendly forms that improve the user experience and ensure reliable data collection.
+
+## 🚀 Summary
+
+This guide covered the basics of HTML forms and input elements, including form structure, common input types, attributes, and best practices. By understanding these concepts, you can create interactive web forms that enhance user engagement and data collection on your website.

docs/working-with-forms/form-elements.mdx

@@ -0,0 +1,144 @@
+---
+sidebar_position: 2
+---
+
+# 🙋🏻 HTML Form elements
+
+Forms in HTML consist of various elements that help gather user input efficiently. This guide covers the most commonly used form elements, explaining their attributes, usage, and examples to help you build user-friendly web forms.
+
+## 🔤 Text Input Elements
+
+### Single-line Text Input
+The `<input type="text">` element is used for basic, single-line text fields.
+
+```html title="text-input.html"
+<form>
+  <label for="username">Username:</label>
+  <input type="text" id="username" name="username" placeholder="Enter your username" required>
+</form>
+```
+
+### Password Input
+The `<input type="password">` element masks user input, ideal for password fields.
+
+```html title="password-input.html"
+<form>
+  <label for="password">Password:</label>
+  <input type="password" id="password" name="password" required>
+</form>
+```
+
+### Email Input
+The `<input type="email">` element ensures that the input matches the standard email format.
+
+```html title="email-input.html"
+<form>
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" placeholder="example@example.com" required>
+</form>
+```
+
+### Number Input
+The `<input type="number">` element is for numeric input and can include attributes like `min`, `max`, and `step`.
+
+```html title="number-input.html"
+<form>
+  <label for="age">Age:</label>
+  <input type="number" id="age" name="age" min="1" max="120">
+</form>
+```
+
+## 📝 Multi-line Text Input
+The `<textarea>` element allows users to input multiple lines of text.
+
+```html title="textarea-example.html"
+<form>
+  <label for="comments">Comments:</label>
+  <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments here..."></textarea>
+</form>
+```
+
+## 🔘 Radio Buttons and Checkboxes
+
+### Radio Buttons
+Radio buttons are used when only one option from a set is needed.
+
+```html title="radio-buttons.html"
+<form>
+  <p>Choose your favorite color:</p>
+  <input type="radio" id="red" name="color" value="red">
+  <label for="red">Red</label><br>
+
+  <input type="radio" id="blue" name="color" value="blue">
+  <label for="blue">Blue</label><br>
+
+  <input type="radio" id="green" name="color" value="green">
+  <label for="green">Green</label>
+</form>
+```
+
+### Checkboxes
+Checkboxes allow users to select multiple options.
+
+```html title="checkboxes.html"
+<form>
+  <p>Select your hobbies:</p>
+  <input type="checkbox" id="sports" name="hobby" value="sports">
+  <label for="sports">Sports</label><br>
+
+  <input type="checkbox" id="reading" name="hobby" value="reading">
+  <label for="reading">Reading</label><br>
+
+  <input type="checkbox" id="music" name="hobby" value="music">
+  <label for="music">Music</label>
+</form>
+```
+
+## 🔽 Dropdown Lists
+The `<select>` element is used to create a dropdown list.
+
+```html title="dropdown-example.html"
+<form>
+  <label for="country">Choose your country:</label>
+  <select id="country" name="country">
+    <option value="usa">United States</option>
+    <option value="canada">Canada</option>
+    <option value="uk">United Kingdom</option>
+  </select>
+</form>
+```
+
+## 📅 Date and Time Inputs
+
+### Date Input
+The `<input type="date">` element lets users pick a date from a calendar.
+
+```html title="date-input.html"
+<form>
+  <label for="dob">Date of Birth:</label>
+  <input type="date" id="dob" name="dob">
+</form>
+```
+
+### Time Input
+The `<input type="time">` element is for selecting time.
+
+```html title="time-input.html"
+<form>
+  <label for="appt">Select a time:</label>
+  <input type="time" id="appt" name="appt">
+</form>
+```
+
+## 🖱 Buttons
+Buttons can be created using the `<button>` element or `<input>` with `type="button"`, `submit`, or `reset`.
+
+```html title="buttons-example.html"
+<form>
+  <button type="submit">Submit</button>
+  <button type="reset">Reset</button>
+</form>
+```
+
+## 📝 Summary
+HTML provides a wide range of elements to create forms, each suited for different types of user input. Understanding how to use these elements effectively helps in building interactive and accessible forms.