Skip to content

Commit a60caa1

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #161 from Tirth-chokshi/main
Updated html forms
2 parents e4d0956 + db1558e commit a60caa1

File tree

2 files changed

+104
-10
lines changed

2 files changed

+104
-10
lines changed

‎docs/html/forms/form-attributes.md

Lines changed: 101 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,99 @@ The `novalidate` attribute specifies that the form should not be validated when
114114
</TabItem>
115115
</Tabs>
116116

117+
## The `name` Attribute
118+
119+
The name attribute specifies the name of the form. This name can be used to reference the form in JavaScript.
120+
121+
<Tabs>
122+
<TabItem value="HTML">
123+
```html
124+
<form name="contactForm">
125+
<label for="name">Name:</label>
126+
<input type="text" id="name" name="name">
127+
<label for="email">Email:</label>
128+
<input type="email" id="email" name="email">
129+
<input type="submit" value="Submit">
130+
</form>
131+
```
132+
</TabItem>
133+
<TabItem value="Output">
134+
<BrowserWindow>
135+
<div>
136+
<form name="contactForm">
137+
<label for="name">Name:</label>
138+
<input type="text" id="name" name="name"></input>
139+
<label for="email">Email:</label>
140+
<input type="email" id="email" name="email"></input>
141+
<input type="submit" value="Submit"></input>
142+
</form>
143+
</div>
144+
</BrowserWindow>
145+
</TabItem>
146+
</Tabs>
147+
148+
## The `target` Attribute
149+
150+
The target attribute specifies where to display the response after submitting the form. Common values include `_self`, `_blank`, `_parent`, and `_top`.
151+
152+
<Tabs>
153+
<TabItem value="HTML">
154+
```html
155+
<form action="/submit-form" method="post" target="_blank">
156+
<label for="name">Name:</label>
157+
<input type="text" id="name" name="name">
158+
<label for="email">Email:</label>
159+
<input type="email" id="email" name="email">
160+
<input type="submit" value="Submit">
161+
</form>
162+
```
163+
</TabItem>
164+
<TabItem value="Output">
165+
<BrowserWindow>
166+
<div>
167+
<form action="/submit-form" method="post" target="_blank">
168+
<label for="name">Name:</label>
169+
<input type="text" id="name" name="name"></input>
170+
<label for="email">Email:</label>
171+
<input type="email" id="email" name="email"></input>
172+
<input type="submit" value="Submit"></input>
173+
</form>
174+
</div>
175+
</BrowserWindow>
176+
</TabItem>
177+
</Tabs>
178+
179+
## The `rel` Attribute
180+
181+
The rel attribute specifies the relationship between the current document and the linked document. It is often used in conjunction with the `target` attribute.
182+
183+
<Tabs>
184+
<TabItem value="HTML">
185+
```html
186+
<form action="https://example.com" method="post" target="_blank" rel="noopener noreferrer">
187+
<label for="name">Name:</label>
188+
<input type="text" id="name" name="name">
189+
<label for="email">Email:</label>
190+
<input type="email" id="email" name="email">
191+
<input type="submit" value="Submit">
192+
</form>
193+
```
194+
</TabItem>
195+
<TabItem value="Output">
196+
<BrowserWindow>
197+
<div>
198+
<form action="https://example.com" method="post" target="_blank" rel="noopener noreferrer">
199+
<label for="name">Name:</label>
200+
<input type="text" id="name" name="name"></input>
201+
<label for="email">Email:</label>
202+
<input type="email" id="email" name="email"></input>
203+
<input type="submit" value="Submit"></input>
204+
</form>
205+
</div>
206+
</BrowserWindow>
207+
</TabItem>
208+
</Tabs>
209+
117210
## Other Form Attributes
118211

119212
Here are other form attributes you can use in HTML:
@@ -124,37 +217,37 @@ Here are other form attributes you can use in HTML:
124217
<th>Description</th>
125218
</tr>
126219
<tr>
127-
<td>action</td>
220+
<td><a href="/docs/html/forms/form-attributes#the-action-attribute">action</a></td>
128221
<td>Specifies where to send the form-data when a form is submitted</td>
129222
</tr>
130223
<tr>
131-
<td>autocomplete</td>
224+
<td><a href="/docs/html/forms/form-attributes#the-autocomplete-attribute">autocomplete</a></td>
132225
<td>Specifies whether a form should have autocomplete on or off</td>
133226
</tr>
134227
<tr>
135-
<td>enctype</td>
228+
<td><a href="/docs/html/forms/form-attributes#the-enctype-attribute">enctype</a></td>
136229
<td>Specifies how the form-data should be encoded when submitting it to the
137230
server (only for method="post")</td>
138231
</tr>
139232
<tr>
140-
<td>method</td>
233+
<td><a href="/docs/html/forms/form-attributes#the-method-attribute">method</a></td>
141234
<td>Specifies the HTTP method to use when sending form-data</td>
142235
</tr>
143236
<tr>
144-
<td>name</td>
237+
<td><a href="/docs/html/forms/form-attributes#the-name-attribute">name</a></td>
145238
<td>Specifies the name of the form</td>
146239
</tr>
147240
<tr>
148-
<td>novalidate</td>
241+
<td><a href="/docs/html/forms/form-attributes#the-novalidate-attribute">novalidate</a></td>
149242
<td>Specifies that the form should not be validated when submitted</td>
150243
</tr>
151244
<tr>
152-
<td>rel</td>
245+
<td><a href="/docs/html/forms/form-attributes#the-rel-attribute">rel</a></td>
153246
<td>Specifies the relationship between a linked resource and the current
154247
document</td>
155248
</tr>
156249
<tr>
157-
<td>target</td>
250+
<td><a href="/docs/html/forms/form-attributes#the-target-attribute">target</a></td>
158251
<td>Specifies where to display the response that is received after submitting
159252
the form</td>
160253
</tr>

‎docs/html/forms/form-input-elements.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,9 +168,10 @@ The `<input type="password">` element displays a field where the user can enter
168168
</TabItem>
169169
</Tabs>
170170

171+
## Input elements Example
171172
<Tabs>
172173
<TabItem value="HTML">
173-
```html
174+
```html {3,4,6,8,11,13,14,15}
174175
<form action="/submit" method="post">
175176
<label for="fname">First name:</label>
176177
<input type="text" id="fname" name="fname"></input>
@@ -184,7 +185,7 @@ The `<input type="password">` element displays a field where the user can enter
184185
<input type="email" id="email" name="email"></input>
185186
<label for="pwd">Password:</label>
186187
<input type="password" id="pwd" name="pwd"></input>
187-
<input type="button" value="Click Me" onclick="alert('Hello World!')"></input>
188+
<input type="button" value="Click Me"></input>
188189
<input type="submit" value="Submit"></input>
189190
</form>
190191
```

0 commit comments

Comments
 (0)