Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev 3 #4602

Merged
merged 2 commits into from
Jan 18, 2025
+816 −29
Merged

Dev 3 #4602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2934d6e
added new content
ajay-dhangar Jan 17, 2025
83721a2
added new content
ajay-dhangar Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions Learn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ Visit our website [CodeHarbourHub](https://www.codeharborhub.live/)

## Table of Contents

- [Introduction](#introduction)
- [Features](#features)
- [Contributing Guidelines](#contributing-guidelines)
- [Code of Conduct](#code-of-conduct)
- [Socials](#socials)
- [CodeHarbourHub](#codeharbourhub)
- [Table of Contents](#table-of-contents)
- [Introduction](#introduction)
- [Features](#features)
- [Contributing Guidelines](#contributing-guidelines)
- [Code of Conduct](#code-of-conduct)
- [Socials](#socials)

## Introduction

Expand All @@ -16,16 +18,16 @@ We're the exclusive platform offering a comprehensive tech curriculum, taught by

## Features
- **In-Depth Tutorials**: Dive into comprehensive tutorials covering a wide range of programming languages like C++, Java, Python, JavaScript and Typescript and frameworks like ReactJS along with Data Structures and Algorithms.
![](/assets/Tutorials.png)
<!-- ![](/assets/Tutorials.png) -->

- **Courses for Mastery**: Enroll in structured courses designed to take your skills to the next level. They range from learning a particular language and implementing them hands-on as projects to enhance learning.
![](/assets/Courses.png)
<!-- ![](/assets/Courses.png) -->

- **Inspiring Showcases**: Explore inspiring showcases of real-world projects and innovative web solutions.
![](/assets/Showcase.png)
<!-- ![](/assets/Showcase.png) -->

- **Engaging Community**: Connect with a vibrant community of developers, share knowledge, and collaborate on projects.
![](/assets/Community.png)
<!-- ![](/assets/Community.png) -->

## Contributing Guidelines

Expand Down
39 changes: 39 additions & 0 deletions community/Learn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
id: learn
title: Welcome to CodeHarbourHub
sidebar_label: Learn
sidebar_position: 6
---

Visit our website [CodeHarbourHub](https://codeharborhub.github.io/)

## Introduction

Welcome to "CodeHarbourHub" - Our mission at CodeHarbourHub to provide accessible and comprehensive educational resources to learners of all levels, from Beginners learners to Advanced professionals.
We're the exclusive platform offering a comprehensive tech curriculum, taught by industry masters, completely free. Join our vibrant community, master in-demand skills, and launch your dream tech career.

## Features
- **In-Depth Tutorials**: Dive into comprehensive tutorials covering a wide range of programming languages like C++, Java, Python, JavaScript and Typescript and frameworks like ReactJS along with Data Structures and Algorithms.
<!-- ![](/assets/Tutorials.png) -->

- **Courses for Mastery**: Enroll in structured courses designed to take your skills to the next level. They range from learning a particular language and implementing them hands-on as projects to enhance learning.
<!-- ![](/assets/Courses.png) -->

- **Inspiring Showcases**: Explore inspiring showcases of real-world projects and innovative web solutions.
<!-- ![](/assets/Showcase.png) -->

- **Engaging Community**: Connect with a vibrant community of developers, share knowledge, and collaborate on projects.
<!-- ![](/assets/Community.png) -->

## Contributing Guidelines

For the enthusiasts who want to contribute to CodeHarbourHub, please refer to our [Contributing Guildelines](https://github.com/CodeHarborHub/codeharborhub/blob/main/CONTRIBUTING.md)

## Code of Conduct

For all the enthusiastic contributers, please refer to the [Code of Conduct](https://github.com/CodeHarborHub/codeharborhub/blob/main/CODE_OF_CONDUCT.md)

## Socials
Stay updated with the latest news and announcements:
- [LinkedIn](https://www.linkedin.com/groups/14232119/)
- [Twitter](https://twitter.com/CodesWithAjay)
11 changes: 9 additions & 2 deletions courses/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,16 @@ Our courses are designed to help you learn new skills and advance your career. W

Explore our courses to find the one that suits your interests and goals. Whether you are looking to learn a new programming language, build a web application, analyze data, or improve your project management skills, we have a course for you. Start your learning journey today!

import courses from '@site/src/data/courses';
<!-- import courses from '@site/src/data/courses'; -->

<Courses courses={courses} />
<!-- <Courses courses={courses} /> -->

<!-- ====== OR ============= -->

<!--
import courses from '@site/src/database/courses';

<Courses courses={courses} /> -->

To get started, select a course from the list above or explore our recommended courses below. If you have any questions or need help, feel free to reach out to us.

Expand Down
15 changes: 0 additions & 15 deletions courses/recommend.md
View file
Open in desktop

This file was deleted.

217 changes: 216 additions & 1 deletion docs/html/forms/building-form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,218 @@
---
id: building-forms
title: Building Forms in HTML
sidebar_label: Building Forms
sidebar_position: 1
tags: [html, web-development, forms, user-input, front-end-development, web-design]
description: Learn how to create forms in HTML to collect user input effectively, with detailed examples and best practices.
---

Forms are an essential part of any website or web application. They allow users to interact with the website by providing input, such as text, selections, and buttons. Forms are used for various purposes, such as user registration, login, search, feedback, and more.

<AdsComponent />

In this tutorial, you will learn how to create forms in HTML to collect user input effectively.

## Creating a Simple Form

To create a form in HTML, you need to use the `<form>` element. The `<form>` element is used to define an HTML form that collects user input. Here's an example of a simple form that collects the user's name and email address:

```html title="index.html" showLineNumbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form</title>
</head>
<body>
<h1>Simple Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
```

In the example above:
- We have created a simple form that collects the user's name and email address.
- The `<form>` element contains two `<input>` elements for the name and email fields.
- The `type="text"` attribute specifies that the input field is a text field.
- The `type="email"` attribute specifies that the input field is an email field, which helps in validating the email address.
- The `required` attribute specifies that the input field is required and must be filled out before submitting the form.
- The `<button>` element with `type="submit"` is used to submit the form.

When the user submits the form by clicking the "Submit" button, the form data is sent to the server for processing. You can handle the form submission using JavaScript or server-side technologies like PHP, Node.js, etc.

<AdsComponent />

## Form Elements

HTML provides various form elements that you can use to collect different types of user input. Some commonly used form elements include:

### `<input>` Element

The `<input>` element is used to create input fields within a form. It can be used to create text fields, checkboxes, radio buttons, buttons, and more. The `type` attribute of the `<input>` element specifies the type of input field to be created.

Here are some common input types:

1. **text:** Creates a single-line text input field.

For example:
```html title="index.html"
<input type="text" name="username">
```

2. **password:** Creates a password input field where the entered text is masked.

For example:
```html title="index.html"
<input type="password" name="password">
```

3. **email:** Creates an email input field that validates the input as an email address.

For example:
```html title="index.html"
<input type="email" name="email">
```

4. **checkbox:** Creates a checkbox input field that allows the user to select multiple options.

For example:
```html title="index.html"
<input type="checkbox" name="interest" value="coding"> Coding
<input type="checkbox" name="interest" value="design"> Design
```

5. **radio:** Creates a radio button input field that allows the user to select a single option from a list.

For example:
```html title="index.html"
<input type="radio" name="major" value="cs"> Computer Science
<input type="radio" name="major" value="eng"> Engineering
```

6. **submit:** Creates a submit button that submits the form data to the server.

For example:
```html title="index.html"
<input type="submit" value="Submit">
```

7. **button:** Creates a button that can be used to trigger JavaScript functions.

For example:
```html title="index.html"
<button type="button" onclick="alert('Hello!')">Click Me</button>
```

<AdsComponent />

### `<select>` Element

The `<select>` element is used to create a dropdown list within a form. It allows the user to select one or more options from a list of predefined options.

Here's an example of a `<select>` element with multiple options:

```html title="index.html"
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
```

### `<textarea>` Element

The `<textarea>` element is used to create a multi-line text input field within a form. It allows users to enter multiple lines of text, such as comments or feedback.

Here's an example of a `<textarea>` element:

```html title="index.html"
<textarea name="comments" rows="4" cols="50"></textarea>
```

In the example above, the `rows` and `cols` attributes specify the number of rows and columns of the textarea, respectively.

## Form Validation

Form validation is an essential part of creating forms to ensure that the user input is correct and complete. HTML provides built-in form validation features that can be used to validate user input without writing custom JavaScript code.

Here are some common form validation attributes that can be added to form elements:

- **required:** Specifies that the input field is required and must be filled out.
- **minlength:** Specifies the minimum length of the input field.
- **maxlength:** Specifies the maximum length of the input field.
- **pattern:** Specifies a regular expression pattern that the input field must match.
- **type:** Specifies the type of input field (e.g., email, number, date).
- **min:** Specifies the minimum value for number and date input fields.

Here's an example of a form with validation attributes:

```html title="index.html"
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="3">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="6">
<br><br>
<button type="submit">Submit</button>
</form>
```

In the example above:

- The `required` attribute specifies that both the username and password fields are required.
- The `minlength="3"` attribute specifies that the username must be at least 3 characters long.
- The `minlength="6"` attribute specifies that the password must be at least 6 characters long.

When the user submits the form, the browser will automatically validate the input fields based on the specified attributes. If the input is invalid, the browser will display an error message to the user.

<AdsComponent />

:::tip Key Components
1. **`<form>` Tag**
- Defines the start and end of a form.
- Attributes:
- `action`: URL where form data is sent.
- `method`: HTTP method (e.g., `GET` or `POST`).

2. **Input Elements**
- **Text Input (`<input type="text">`)**: Single-line text input.
- **Email Input (`<input type="email">`)**: Input validation for email addresses.
- **Textarea (`<textarea>`)**: Multi-line text input.

3. **Labels**
- The `<label>` element improves accessibility by associating text with form controls.

4. **Submit Button**
- `<button>` or `<input type="submit">` submits the form.

5. **Validation Attributes**
- `required`, `minlength`, `maxlength`, `pattern`, etc.

:::

## Best Practices for Building Forms

When building forms in HTML, it's essential to follow best practices to create user-friendly and accessible forms. Here are some best practices for building forms:

- **Use Labels**: Always use the `<label>` element to associate text with form controls. This improves accessibility and makes it easier for users to understand the purpose of each input field.
- **Provide Feedback**: Use validation attributes and error messages to provide feedback to users when they enter invalid data. This helps users correct their mistakes and complete the form successfully.
- **Group Related Fields**: Group related form fields together using fieldsets and legends. This helps users understand the relationship between different fields and improves the overall form structure.
- **Use Placeholder Text**: Use the `placeholder` attribute to provide hints or examples of the expected input in the form fields. Placeholder text disappears when the user starts typing.

By following these best practices, you can create forms that are easy to use, accessible, and user-friendly.

## Conclusion

---
In this tutorial, you learned how to create forms in HTML to collect user input effectively. You also learned about various form elements, form validation, and best practices for building forms.
Loading
Loading