Skip to content

Commit 79e154f

Browse files
ajay-dhangarajay-dhangar
committed
Complited form content
1 parent 580f749 commit 79e154f

File tree

4 files changed

+389
-0
lines changed

4 files changed

+389
-0
lines changed

‎docs/_assets/client-server-side.png

16.2 KB
Loading

‎docs/working-with-forms/form-handlers.mdx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
5+
# 🙋🏻 HTML Form Handling
6+
7+
Form handlers are crucial for processing the data submitted by users in web forms. This guide provides an overview of client-side and server-side form handling, highlighting best practices for capturing and processing user input.
8+
9+
![Client Server Side](../_assets/client-server-side.png)
10+
11+
## 🖥 Client-side Form Handling
12+
Client-side form handling is often managed using JavaScript to validate data before sending it to the server.
13+
14+
### Example: Capturing Form Data with JavaScript
15+
```html title="form-handler-example.html"
16+
<form id="userForm">
17+
<label for="username">Username:</label>
18+
<input type="text" id="username" name="username" required>
19+
<button type="submit">Submit</button>
20+
</form>
21+
22+
<script>
23+
document.getElementById('userForm').addEventListener('submit', function(event) {
24+
event.preventDefault(); // Prevents form from submitting normally
25+
const formData = new FormData(event.target);
26+
const username = formData.get('username');
27+
console.log('Submitted Username:', username);
28+
});
29+
</script>
30+
```
31+
32+
### Benefits of Client-side Handling:
33+
- Reduces server load by validating and handling data locally.
34+
- Provides immediate feedback to users.
35+
36+
## 🌐 Server-side Form Handling
37+
Server-side form handling involves processing form submissions on a server using languages such as Node.js, PHP, Python, or others.
38+
39+
### Example: Simple Node.js Form Handler
40+
```javascript title="server.js"
41+
const express = require('express');
42+
const app = express();
43+
app.use(express.urlencoded({ extended: true }));
44+
45+
app.post('/submit-form', (req, res) => {
46+
const { username } = req.body;
47+
console.log('Received Username:', username);
48+
res.send(`Form received with username: ${username}`);
49+
});
50+
51+
app.listen(3000, () => {
52+
console.log('Server is running on http://localhost:3000');
53+
});
54+
```
55+
56+
### Benefits of Server-side Handling:
57+
- Ensures data security and integrity.
58+
- Processes and stores user input for long-term use.
59+
60+
## 🔒 Best Practices for Secure Form Handling
61+
1. **Sanitize and Validate User Input**: Always clean and validate input data on the server to prevent SQL injection, XSS, and other vulnerabilities.
62+
2. **Use HTTPS**: Ensure your site uses HTTPS to encrypt data transmitted between the client and server.
63+
3. **Limit Data Exposure**: Avoid sending sensitive data in query parameters.
64+
65+
## 🔗 Further Reading
66+
- [MDN Web Docs: Sending Form Data](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data)
67+
- [Express.js Guide: Handling Form Inputs](https://expressjs.com/en/guide/routing.html#form-handling)
68+
69+
Understanding form handlers and applying best practices ensures robust and secure user data processing.
70+
71+
## 📝 Summary
72+
73+
Client-side and server-side form handling are essential for processing user input securely. By combining client-side validation with server-side processing, web developers can create reliable and secure web forms.

‎docs/working-with-forms/form-validation.mdx

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
sidebar_position: 5
3+
---
4+
5+
# 🙋🏻 HTML Form Validation
6+
7+
HTML form validation ensures that user input meets specific criteria before the form can be submitted. This guide outlines the built-in validation attributes, JavaScript techniques, and best practices for validating user input in HTML forms.
8+
9+
## 📜 Built-in HTML Validation Attributes
10+
HTML provides several built-in attributes for form validation:
11+
12+
### 1. `required`
13+
Ensures that the input field is not empty before form submission.
14+
15+
```html title="required-example.html"
16+
<form>
17+
<label for="email">Email:</label>
18+
<input type="email" id="email" name="email" required>
19+
<button type="submit">Submit</button>
20+
</form>
21+
```
22+
23+
<BrowserWindow url="http://.../required-example.html">
24+
<>
25+
<form>
26+
<label for="email">Email:</label>
27+
<input type="email" id="email" name="email" required />
28+
<button type="submit">Submit</button>
29+
</form>
30+
</>
31+
</BrowserWindow>
32+
33+
### 2. `pattern`
34+
Specifies a regular expression that the input must match.
35+
36+
```html title="pattern-example.html"
37+
<form>
38+
<label for="username">Username:</label>
39+
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,}" title="Must be at least 5 alphanumeric characters">
40+
<button type="submit">Submit</button>
41+
</form>
42+
```
43+
44+
<BrowserWindow url="http://.../pattern-example.html">
45+
<>
46+
<form>
47+
<label for="username">Username:</label>
48+
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,}" title="Must be at least 5 alphanumeric characters" />
49+
<button type="submit">Submit</button>
50+
</form>
51+
</>
52+
</BrowserWindow>
53+
54+
### 3. `min` and `max`
55+
Set the minimum and maximum values for number or date input fields.
56+
57+
```html title="min-max-example.html"
58+
<form>
59+
<label for="age">Age:</label>
60+
<input type="number" id="age" name="age" min="18" max="100" required>
61+
<button type="submit">Submit</button>
62+
</form>
63+
```
64+
65+
<BrowserWindow url="http://.../min-max-example.html">
66+
<>
67+
<form>
68+
<label for="age">Age:</label>
69+
<input type="number" id="age" name="age" min="18" max="100" required />
70+
<button type="submit">Submit</button>
71+
</form>
72+
</>
73+
</BrowserWindow>
74+
75+
### 4. `minlength` and `maxlength`
76+
Define the minimum and maximum number of characters allowed in text-based inputs.
77+
78+
```html title="minlength-maxlength-example.html"
79+
<form>
80+
<label for="password">Password:</label>
81+
<input type="password" id="password" name="password" minlength="8" maxlength="16" required>
82+
<button type="submit">Submit</button>
83+
</form>
84+
```
85+
86+
<BrowserWindow url="http://.../minlength-maxlength-example.html">
87+
<>
88+
<form>
89+
<label for="password">Password:</label>
90+
<input type="password" id="password" name="password" minlength="8" maxlength="16" required />
91+
<button type="submit">Submit</button>
92+
</form>
93+
</>
94+
</BrowserWindow>
95+
96+
### 5. `type`
97+
Using the appropriate input type (`email`, `url`, `number`, etc.) enables browser-based validation.
98+
99+
```html title="type-validation-example.html"
100+
<form>
101+
<label for="website">Website:</label>
102+
<input type="url" id="website" name="website" required>
103+
<button type="submit">Submit</button>
104+
</form>
105+
```
106+
107+
<BrowserWindow url="http://.../type-validation-example.html">
108+
<>
109+
<form>
110+
<label for="website">Website:</label>
111+
<input type="url" id="website" name="website" required />
112+
<button type="submit">Submit</button>
113+
</form>
114+
</>
115+
</BrowserWindow>
116+
117+
## ⚙️ JavaScript Custom Validation
118+
For more complex validation logic, JavaScript provides flexibility to create custom validation.
119+
120+
### Example: Custom Validation with JavaScript
121+
```html title="custom-validation-example.html"
122+
<form id="signupForm">
123+
<label for="username">Username:</label>
124+
<input type="text" id="username" name="username" required>
125+
<span id="error-message" style="color: red;"></span>
126+
<button type="submit">Submit</button>
127+
</form>
128+
129+
<script>
130+
document.getElementById('signupForm').addEventListener('submit', function(event) {
131+
const username = document.getElementById('username').value;
132+
const errorMessage = document.getElementById('error-message');
133+
134+
if (username.length < 5) {
135+
event.preventDefault();
136+
errorMessage.textContent = 'Username must be at least 5 characters long';
137+
} else {
138+
errorMessage.textContent = '';
139+
}
140+
});
141+
</script>
142+
```
143+
144+
## 🛡 Best Practices for Form Validation
145+
- **Combine HTML and JavaScript validation**: Rely on HTML for basic validation and JavaScript for advanced, custom checks.
146+
- **Provide user feedback**: Show helpful error messages to guide users in correcting their input.
147+
- **Ensure accessibility**: Make sure error messages are accessible to screen readers.
148+
- **Validate on both client and server sides**: Client-side validation enhances user experience, while server-side validation ensures security and data integrity.
149+
150+
## 📝 Summary
151+
HTML's built-in attributes, combined with custom JavaScript, create robust and user-friendly form validation. Implementing these best practices ensures forms are both functional and secure.

‎docs/working-with-forms/input-attributes.mdx

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# 🙋🏻 HTML Input Attributes
6+
7+
HTML input attributes help refine and control user input by adding constraints and additional behaviors to form fields. This guide provides an overview of essential input attributes and their practical applications.
8+
9+
## 🏷 Commonly Used Input Attributes
10+
11+
### 1. `placeholder`
12+
Provides a short hint that describes the expected value of the input field.
13+
14+
```html title="placeholder-example.html"
15+
<input type="text" placeholder="Enter your name">
16+
```
17+
18+
<BrowserWindow url="http://.../placeholder-example.html" minHeight="300px">
19+
<input type="text" placeholder="Enter your name" />
20+
</BrowserWindow>
21+
22+
### 2. `required`
23+
Specifies that the input field must be filled out before submitting the form.
24+
25+
```html title="required-example.html"
26+
<input type="email" required>
27+
```
28+
29+
### 3. `disabled`
30+
Disables the input field, preventing user interaction.
31+
32+
```html title="disabled-example.html"
33+
<input type="text" value="Read-only field" disabled>
34+
```
35+
36+
<BrowserWindow url="http://.../disabled-example.html" minHeight="300px">
37+
<input type="text" value="Read-only field" disabled />
38+
</BrowserWindow>
39+
40+
### 4. `readonly`
41+
Makes the input field non-editable, but its value can still be copied.
42+
43+
```html title="readonly-example.html"
44+
<input type="text" value="This is readonly" readonly>
45+
```
46+
47+
<BrowserWindow url="http://.../readonly-example.html" minHeight="300px">
48+
<input type="text" value="This is readonly" readonly />
49+
</BrowserWindow>
50+
51+
### 5. `maxlength`
52+
Limits the number of characters allowed in the input field.
53+
54+
```html title="maxlength-example.html"
55+
<input type="text" maxlength="10" placeholder="Max 10 characters">
56+
```
57+
58+
<BrowserWindow url="http://.../maxlength-example.html" minHeight="300px">
59+
<input type="text" maxlength="10" placeholder="Max 10 characters" />
60+
</BrowserWindow>
61+
62+
### 6. `min` and `max`
63+
Defines the minimum and maximum values for numeric, date, or range input types.
64+
65+
```html title="min-max-example.html"
66+
<input type="number" min="1" max="100">
67+
<input type="date" min="2023-01-01" max="2024-12-31">
68+
```
69+
70+
<BrowserWindow url="http://.../min-max-example.html" minHeight="300px">
71+
<>
72+
<input type="number" min="1" max="100" />
73+
<input type="date" min="2023-01-01" max="2024-12-31" />
74+
</>
75+
</BrowserWindow>
76+
77+
### 7. `pattern`
78+
Specifies a regular expression that the input value must match.
79+
80+
```html title="pattern-example.html"
81+
<input type="text" pattern="[A-Za-z]{3,}" title="Enter at least 3 letters">
82+
```
83+
84+
<BrowserWindow url="http://.../pattern-example.html" minHeight="300px">
85+
<input type="text" pattern="[A-Za-z]{3,}" title="Enter at least 3 letters" />
86+
</BrowserWindow>
87+
88+
### 8. `autofocus`
89+
Automatically focuses the input field when the page loads.
90+
91+
```html title="autofocus-example.html"
92+
<input type="text" autofocus>
93+
```
94+
95+
<BrowserWindow url="http://.../autofocus-example.html" minHeight="300px">
96+
<input type="text" autofocus />
97+
</BrowserWindow>
98+
99+
### 9. `step`
100+
Defines the increment step for `number`, `date`, `time`, and `range` input types.
101+
102+
```html title="step-example.html"
103+
<input type="number" min="0" max="100" step="5">
104+
```
105+
106+
<BrowserWindow url="http://.../step-example.html" minHeight="300px">
107+
<input type="number" min="0" max="100" step="5" />
108+
</BrowserWindow>
109+
110+
## 🛠 Advanced Input Attributes
111+
112+
### 1. `list`
113+
Specifies a list of predefined options suggested to the user while typing. This attribute works with the `<datalist>` element.
114+
115+
```html title="list-datalist-example.html"
116+
<input type="text" list="browsers" placeholder="Choose a browser">
117+
<datalist id="browsers">
118+
<option value="Chrome">
119+
<option value="Firefox">
120+
<option value="Safari">
121+
<option value="Edge">
122+
</datalist>
123+
```
124+
125+
<BrowserWindow url="http://.../list-datalist-example.html" minHeight="300px">
126+
<>
127+
<input type="text" list="browsers" placeholder="Choose a browser" />
128+
<datalist id="browsers">
129+
<option value="Chrome" />
130+
<option value="Firefox" />
131+
<option value="Safari" />
132+
<option value="Edge" />
133+
</datalist>
134+
</>
135+
</BrowserWindow>
136+
137+
### 2. `multiple`
138+
Allows the user to select multiple options in input types like `email` and `file`.
139+
140+
```html title="multiple-example.html"
141+
<input type="email" multiple placeholder="Enter multiple emails">
142+
<input type="file" multiple>
143+
```
144+
145+
<BrowserWindow url="http://.../multiple-example.html" minHeight="300px">
146+
<>
147+
<input type="email" multiple placeholder="Enter multiple emails" />
148+
<input type="file" multiple />
149+
</>
150+
</BrowserWindow>
151+
152+
### 3. `size`
153+
Sets the width of the input field in terms of character count.
154+
155+
```html title="size-example.html"
156+
<input type="text" size="30">
157+
```
158+
159+
<BrowserWindow url="http://.../size-example.html" minHeight="300px">
160+
<input type="text" size="30" />
161+
</BrowserWindow>
162+
163+
## 📝 Summary
164+
165+
Using the right input attributes in your HTML forms ensures better user experience, validation, and input control. Understanding these attributes allows developers to create more interactive and reliable web forms.

0 commit comments

Comments
 (0)