-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample8.html
203 lines (179 loc) · 8.83 KB
/
example8.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Forms</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f9f9f9;
color: #333;
}
h1,
h2 {
color: #444;
}
pre {
background-color: #e9e9e9;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
.section {
margin-bottom: 40px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
}
.example {
background-color: #e9f7ef;
padding: 10px;
border: 1px solid #27ae60;
border-radius: 5px;
}
.form-example {
margin-top: 20px;
padding: 15px;
background-color: #f3f3f3;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>HTML Forms</h1>
<div class="section">
<h2>HTML Forms</h2>
<p>HTML forms are essential for collecting user input. Forms can contain various types of input fields, buttons, and other controls that allow users to enter data. They are typically wrapped in a <code><form></code> tag.</p>
<pre><code><form action="submit.php" method="post">
<!-- Form elements go here -->
</form></code></pre>
<div class="form-example">
<h3>Example of a Basic Form</h3>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="section">
<h2>HTML Form Attributes</h2>
<p>Forms have several attributes that control their behavior:</p>
<ul>
<li><strong>action</strong>: Specifies the URL where the form data will be sent for processing.</li>
<li><strong>method</strong>: Defines the HTTP method to be used when sending form data. Common values are <code>GET</code> and <code>POST</code>.</li>
<li><strong>enctype</strong>: Specifies how the form data should be encoded when submitting to the server.</li>
<li><strong>target</strong>: Determines where to display the response after submitting the form.</li>
<li><strong>name</strong>: Assigns a name to the form for identification in scripts.</li>
</ul>
<div class="form-example">
<h3>Example of a Form with Attributes</h3>
<form action="submit.php" method="post" name="contactForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Subscribe">
</form>
</div>
</div>
<div class="section">
<h2>HTML Form Elements</h2>
<p>HTML forms can contain various elements, including:</p>
<ul>
<li><strong><input></strong>: The most common form element for user input.</li>
<li><strong><textarea></strong>: For multi-line text input.</li>
<li><strong><select></strong>: For dropdown menus.</li>
<li><strong><button></strong>: For clickable buttons.</li>
<li><strong><fieldset></strong>: Groups related elements within a form.</li>
<li><strong><label></strong>: Associates a text label with a form element, improving accessibility.</li>
</ul>
<div class="form-example">
<h3>Example of Various Form Elements</h3>
<form action="submit_elements.php" method="post">
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4" required></textarea><br><br>
<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><br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="section">
<h2>HTML Input Types</h2>
<p>The <code><input></code> element can have various types specified using the <code>type</code> attribute. Here are some common input types:</p>
<ul>
<li><strong>text</strong>: A single-line text input.</li>
<li><strong>password</strong>: A password input that hides the entered characters.</li>
<li><strong>email</strong>: An input for email addresses with validation for format.</li>
<li><strong>number</strong>: An input for numeric values with up/down arrows for selection.</li>
<li><strong>checkbox</strong>: A checkbox for boolean (true/false) input.</li>
<li><strong>radio</strong>: A radio button for selecting one option from a group.</li>
<li><strong>date</strong>: An input for selecting a date.</li>
<li><strong>file</strong>: An input for uploading files.</li>
<li><strong>submit</strong>: A button to submit the form.</li>
</ul>
<div class="form-example">
<h3>Example of Different Input Types</h3>
<form action="submit_inputs.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120 required><br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
<div class="section">
<h2>HTML Input Attributes</h2>
<p>Input elements can have various attributes to enhance their functionality:</p>
<ul>
<li><strong>name</strong>: The name of the input, used to identify the field when the form is submitted.</li>
<li><strong>value</strong>: The initial value of the input field.</li>
<li><strong>placeholder</strong>: A short hint that describes the expected value of the input field.</li>
<li><strong>required</strong>: A boolean attribute that indicates the field must be filled out before submitting the form.</li>
<li><strong>readonly</strong>: Prevents the user from modifying the input field.</li>
<li><strong>disabled</strong>: Disables the input field, preventing user interaction.</li>
<li><strong>min</strong> and <strong>max</strong>: Specify the minimum and maximum values for <code>number</code> and <code>date</code> input types.</li>
</ul>
<div class="form-example">
<h3>Example of Input Attributes</h3>
<form action="submit_attributes.php" method="post">
<label for="url">Website URL:</label>
<input type="url" id="url" name="url" placeholder="https://example.com" required><br><br>
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="section">
<h2>Input Form Attributes</h2>
<p>In addition to the attributes of individual inputs, forms themselves can have attributes that enhance functionality:</p>
<ul>
<li><strong>autocomplete</strong>: Controls whether the browser should enable autocomplete for input fields.</li>
<li><strong>novalidate</strong>: Disables HTML5 validation when the form is submitted.</li>
<li><strong>accept-charset</strong>: Specifies the character encodings the server can handle for the form submission.</li>
</ul>
<div class="form-example">
<h3>Example of Form Attributes</h3>
<form action="submit_form_attributes.php" method="post" autocomplete="on" accept-charset="UTF-8">
<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>
<input type="submit" value="Register">
</form>
</div>
</div>
</body>
</html>