You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: In this tutorial, you will learn how to build forms in HTML. Forms are used to collect user input on web pages, such as login forms, contact forms, and search forms.
8
-
---
8
+
---
9
+
10
+
HTML forms are essential for interactive web pages, allowing users to enter data that can be sent to a server for processing. Forms can include a variety of elements such as text fields, checkboxes, radio buttons, and submit buttons.
11
+
12
+
## Creating Forms
13
+
14
+
To create a form in HTML, you use the `<form>` element. This element serves as the container for the form elements.
15
+
16
+
```html
17
+
<form>
18
+
<!-- Form elements go here -->
19
+
</form>
20
+
```
21
+
22
+
## Form Fields
23
+
The `<input type="text">` defines a single-line input field for text input.
24
+
A form can contain various elements to collect user input:
-**Text Fields** : The `<input type="text">` element defines a one-line text input field.
56
+
-**Email Fields**: The `<input type="email">` element is used for input fields that should contain an e-mail address.
57
+
-**Submit Button**: The `<input type="submit">` element is used to submit the form to the server.
58
+
59
+
## Handling Form Data
60
+
61
+
When a form is submitted, the form data is sent to the server. The method of sending the data can be specified using the `method` attribute in the `<form>` element:
62
+
63
+
-**GET**: The form data is appended to the action URL as query parameters and sent in the URL of the request.
64
+
-**POST**: The form data is sent in the body of the request, not in the URL.
65
+
66
+
```html {1}
67
+
<formaction="/submit-form"method="post">
68
+
<!-- Form elements -->
69
+
</form>
70
+
```
71
+
72
+
## The `<input>` Element
73
+
The HTML `<input>` element is the most used form element.
74
+
An `<input>` element can be displayed in many ways, depending on the type attribute.
75
+
76
+
Here are some examples:
77
+
<tableclass="ws-table-all">
78
+
<tbody><tr>
79
+
<th>Type</th>
80
+
<th>Description</th>
81
+
</tr>
82
+
<tr>
83
+
<td><input type="text"></td>
84
+
<td>Displays a single-line text input field</td>
85
+
</tr>
86
+
<tr>
87
+
<td><input type="radio"></td>
88
+
<td>Displays a radio button (for selecting one of many choices)</td>
89
+
</tr>
90
+
<tr>
91
+
<td><input type="checkbox"></td>
92
+
<td>Displays a checkbox (for selecting zero or more of many choices)</td>
93
+
</tr>
94
+
<tr>
95
+
<td><input type="submit"></td>
96
+
<td>Displays a submit button (for submitting the form)</td>
97
+
</tr>
98
+
<tr>
99
+
<td><input type="button"></td>
100
+
<td>Displays a clickable button</td>
101
+
</tr>
102
+
</tbody></table>
103
+
104
+
105
+
## Conclusion
106
+
107
+
HTML forms are a crucial part of web development, enabling user interaction and data collection. By understanding how to create forms, use form elements, and handle form submissions, you can create dynamic and interactive web pages. Remember to validate user input and consider security practices to protect user data and your website.
description: In this tutorial, you will learn about form attributes in HTML. Form attributes define the appearance, behavior, and structure of forms on web pages.
8
-
---
8
+
---
9
+
10
+
HTML forms and their input elements can be customized and controlled using various attributes. These attributes define the behavior and characteristics of the form and its elements, such as where to send the form data, how to send it, and more. This document provides an overview of the most commonly used HTML form attributes, along with code examples and their outputs.
11
+
12
+
## The `action` Attribute
13
+
14
+
The `action` attribute specifies where to send the form data when a form is submitted.
15
+
16
+
<Tabs>
17
+
<TabItem value="HTML">
18
+
```html
19
+
<form action="/submit-form" method="post">
20
+
<!-- Form elements go here -->
21
+
</form>
22
+
```
23
+
</TabItem>
24
+
<TabItem value="Output">
25
+
<BrowserWindow>
26
+
<div>
27
+
Form data is sent to "/submit-form" when submitted.
28
+
</div>
29
+
</BrowserWindow>
30
+
</TabItem>
31
+
</Tabs>
32
+
33
+
## The `method` Attribute
34
+
35
+
The `method` attribute specifies how to send form data (the form-submitting method).
36
+
37
+
<Tabs>
38
+
<TabItem value="HTML">
39
+
```html
40
+
<form action="/submit-form" method="post">
41
+
<!-- Form elements go here -->
42
+
</form>
43
+
```
44
+
</TabItem>
45
+
<TabItem value="Output">
46
+
<BrowserWindow>
47
+
<div>
48
+
Form data is sent using the POST method.
49
+
</div>
50
+
</BrowserWindow>
51
+
</TabItem>
52
+
</Tabs>
53
+
54
+
## The `enctype` Attribute
55
+
56
+
The `enctype` attribute specifies how the form data should be encoded when submitting it to the server.
Here are other form attributes you can use in HTML:
120
+
121
+
<table>
122
+
<tbody><tr>
123
+
<th>Attribute</th>
124
+
<th>Description</th>
125
+
</tr>
126
+
<tr>
127
+
<td>action</td>
128
+
<td>Specifies where to send the form-data when a form is submitted</td>
129
+
</tr>
130
+
<tr>
131
+
<td>autocomplete</td>
132
+
<td>Specifies whether a form should have autocomplete on or off</td>
133
+
</tr>
134
+
<tr>
135
+
<td>enctype</td>
136
+
<td>Specifies how the form-data should be encoded when submitting it to the
137
+
server (only for method="post")</td>
138
+
</tr>
139
+
<tr>
140
+
<td>method</td>
141
+
<td>Specifies the HTTP method to use when sending form-data</td>
142
+
</tr>
143
+
<tr>
144
+
<td>name</td>
145
+
<td>Specifies the name of the form</td>
146
+
</tr>
147
+
<tr>
148
+
<td>novalidate</td>
149
+
<td>Specifies that the form should not be validated when submitted</td>
150
+
</tr>
151
+
<tr>
152
+
<td>rel</td>
153
+
<td>Specifies the relationship between a linked resource and the current
154
+
document</td>
155
+
</tr>
156
+
<tr>
157
+
<td>target</td>
158
+
<td>Specifies where to display the response that is received after submitting
159
+
the form</td>
160
+
</tr>
161
+
</tbody>
162
+
</table>
163
+
164
+
## Conclusion
165
+
166
+
HTML form attributes provide powerful ways to control the behavior of forms and their elements. By understanding and utilizing these attributes effectively, developers can create more functional and user-friendly forms. Always consider the best practices for form design and user experience when working with these attributes.
0 commit comments