Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Associate label with input. Include name in input. #92

Merged
merged 6 commits into from Mar 11, 2019
Merged

Associate label with input. Include name in input. #92

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
07d0968
Associate label with input. Include name in input.
SamOdum Mar 5, 2019
2f42307
Merge branch 'master' into fix-label
SamOdum Mar 5, 2019
fb98498
Reverted input name attribute addition
SamOdum Mar 7, 2019
1283158
Merge branch 'fix-label' of https://github.com/SamOdum/frontend-bootc…
SamOdum Mar 7, 2019
bf1dc3a
Reverted accidental changes
SamOdum Mar 7, 2019
cc77576
Merge branch 'master' into fix-label
micahgodbolt Mar 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion step1-03/demo/README.md
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@ In this demo we are going to cover a few core basics of the language that will h

```html
<div id="contact-form">
<label>Email</label><input id="email" type="email" />
<label for="email">Email</label><input id="email" type="email" name="email"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this form won't be submitted via POST, the name property shouldn't be necessary as far as I'm aware. If you've seen guidance to the contrary, would you mind sharing a link?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you are right. The name attribute is for server-side processing.

<input class="submit" value="Submit" type="submit" />
</div>
```
Expand Down
34 changes: 14 additions & 20 deletions step1-03/demo/index.html
View file
Open in desktop
@@ -1,15 +1,9 @@
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="js,result"
>
<pre data-lang="css">

<body>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you please revert all the changes to this file aside from adding the for attribute to the label?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

<div class="codepen" data-theme-id="36294" data-prefill data-editable="true" data-height="100%" data-theme-id="1"
data-default-tab="js,result">
<pre data-lang="css">

body {
font: 1.2em sans-serif;
Expand All @@ -34,25 +28,25 @@
margin-top: 10px;
}
</pre>
<pre data-lang="html">
<pre data-lang="html">
&lt;div class=&quot;tiles&quot;&gt;
&lt;div&gt;
&lt;h2&gt;Contact Us&lt;/h2&gt;
&lt;div id=&quot;contact-form&quot;&gt;
&lt;label&gt;Email&lt;/label&gt;&lt;input id=&quot;email&quot; type=&quot;email&quot; /&gt;
&lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;&lt;input id=&quot;email&quot; type=&quot;email&quot; name=&quot;email&quot;/&gt;
&lt;input class=&quot;submit&quot; value=&quot;Submit&quot; type=&quot;submit&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<pre data-lang="js">
<pre data-lang="js">
// Count the number of 'a' characters in the email form.
// Update button to reflect that number.

</pre
>
</div>
</pre>
</div>

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
</html>