Skip to content

Commit 6578185

Browse files
jwoolbright23jwoolbright23
authored
Merge pull request LaunchCodeEducation#25 from LaunchCodeEducation/user-input-with-forms
User input with forms
2 parents 4692477 + 0ca8e17 commit 6578185

File tree

12 files changed

+149
-0
lines changed

12 files changed

+149
-0
lines changed

‎user-input-with-forms/chapter-examples/checkbox-inputs/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>repl.it</title>
7+
<link href="style.css" rel="stylesheet" type="text/css" />
8+
</head>
9+
<body>
10+
<form action="https://handlers.education.launchcode.org/request-parrot" method="post">
11+
12+
<!-- single checkbox -->
13+
<label>crew<input type="checkbox" name="crewReady"/></label>
14+
15+
<!-- group with different name -->
16+
<h3>Activities</h3>
17+
<label>cooking<input type="checkbox" name="cooking"/></label>
18+
<label>running<input type="checkbox" name="running"/></label>
19+
<label>movies<input type="checkbox" name="movies"/></label>
20+
21+
<!-- group all with same name -->
22+
<h3>Ingredients</h3>
23+
<label>Onion<input type="checkbox" name="ingredient" value="onion"/></label>
24+
<label>Butter<input type="checkbox" name="ingredient" value="butter"/></label>
25+
<label>Rice<input type="checkbox" name="ingredient" value="rice"/></label>
26+
27+
<button>Send Report</button>
28+
</form>
29+
</body>
30+
</html>

‎user-input-with-forms/chapter-examples/checkbox-inputs/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Add Your Code Below

‎user-input-with-forms/chapter-examples/checkbox-inputs/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*/ Add Your Code Below /*/

‎user-input-with-forms/chapter-examples/form-post.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Form POST</title>
6+
<style>
7+
label {
8+
display: block;
9+
padding-bottom: 10px;
10+
}
11+
body {
12+
padding: 25px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<!-- Because method and action are set, a POST request will be sent to the action addess, with a message containing the field values.-->
18+
<form action="https://handlers.education.launchcode.org/request-parrot" method="POST">
19+
<label>Username <input type="text" name="username"></label>
20+
<label>Team Name <input type="text" name="teamName">
21+
</label>
22+
<button>Submit</button>
23+
</form>
24+
</body>
25+
</html>

‎user-input-with-forms/chapter-examples/form-submission.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Form Example</title>
6+
<style>
7+
label {
8+
display: block;
9+
padding-bottom: 10px;
10+
}
11+
body {
12+
padding: 25px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<!-- Form will use default action value and submit form to current page. -->
18+
<form action="">
19+
<label>Username <input type="text" name="username"></label>
20+
<label>Team Name <input type="text" name="team">
21+
</label>
22+
<button>Submit</button>
23+
</form>
24+
</body>
25+
</html>

‎user-input-with-forms/chapter-examples/form-validation/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Form Validation</title>
6+
<style>
7+
label {display: block;}
8+
body {padding: 25px;}
9+
</style>
10+
</head>
11+
<script>
12+
window.addEventListener("load", function() {
13+
let form = document.querySelector("form");
14+
form.addEventListener("submit", function(event) {
15+
alert("submit clicked");
16+
});
17+
});
18+
</script>
19+
<body>
20+
<form method="POST" action="https://handlers.education.launchcode.org/request-parrot">
21+
<label>Username <input type="text" name="username"></label>
22+
<label>Team Name <input type="text" name="team"></label>
23+
<button>Submit</button>
24+
</form>
25+
</body>
26+
</html>

‎user-input-with-forms/chapter-examples/form-validation/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//Add Your Code Below

‎user-input-with-forms/chapter-examples/form-validation/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*/ Add your Code Below /*/

‎user-input-with-forms/exercises/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Rocket Simulation</title>
6+
<style>
7+
label { display: block; margin-bottom: 7px;}
8+
</style>
9+
</head>
10+
<body>
11+
<!-- TODO: add form here -->
12+
13+
14+
<p>WARNING: This ONLY works in <b>replit</b> if this "result" page is opened in its own window. Click the icon that shows a box with an arrow coming out of it.
15+
</p>
16+
</body>
17+
18+
</html>

‎user-input-with-forms/exercises/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//Code Your Solution Below

‎user-input-with-forms/exercises/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*/ Code Your Solution Below /*/

‎user-input-with-forms/studio/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<script>
6+
// TODO: create a handler
7+
window.addEventListener("load", function(){
8+
// TODO: register the handler
9+
});
10+
</script>
11+
</head>
12+
13+
<body>
14+
15+
<form id="searchForm">
16+
<!-- TODO: add form elements -->
17+
</form>
18+
19+
</body>

0 commit comments

Comments
 (0)