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

Fix: Your first form example #36013

Merged
merged 2 commits into from
Sep 23, 2024
Merged

Fix: Your first form example #36013

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
670ef62
Update index.md
ragul1697 Sep 23, 2024
cb05d9d
Update index.md
ragul1697 Sep 23, 2024
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
72 changes: 31 additions & 41 deletions files/en-us/learn/forms/your_first_form/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,26 +93,24 @@ In terms of HTML code we need something like the following to implement these fo

```html
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</li>
<li>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</li>
</ul>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</p>
<p>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</p>
<p>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</p>
</form>
```

Update your form code to look like the above.

The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article).
The {{HTMLelement("p")}} elements are there to conveniently structure our code and make styling easier (see later in the article).
For usability and accessibility, we include an explicit label for each form control.
Note the use of the [`for`](/en-US/docs/Web/HTML/Attributes/for) attribute on all {{HTMLelement("label")}} elements, which takes as its value the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of the form control with which it is associated — this is how you associate a form control with its label.

Expand Down Expand Up @@ -152,12 +150,12 @@ by default this element is filled with this text
### The `<button>` element

The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form.
This is done by using the {{HTMLelement("button")}} element; add the following just above the closing `</ul>` tag:
This is done by using the {{HTMLelement("button")}} element; add the following just above the closing `</form>` tag:

```html
<li class="button">
<p class="button">
<button type="submit">Send your message</button>
</li>
</p>
```

The {{htmlelement("button")}} element also accepts a `type` attribute — this accepts one of three values: `submit`, `reset`, or `button`.
Expand Down Expand Up @@ -202,13 +200,7 @@ form {
border-radius: 1em;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

form li + li {
p + p {
margin-top: 1em;
}

Expand Down Expand Up @@ -275,22 +267,20 @@ Let's look at some of our form code again:

```html
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</li>
<li>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</li>

…
</ul>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</p>
<p>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</p>
<p>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</p>

…
</form>
```

Expand Down