diff options
Diffstat (limited to 'HTML/Chapter/Ch. 10 hands-on assignments')
7 files changed, 264 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html new file mode 100644 index 0000000..d5b7269 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html @@ -0,0 +1,14 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Form Example</title>
+ </head>
+ <body>
+ <h1>Join Our Newsletter</h1>
+ <form method="get">
+ E-mail: <input type="text" name="email" id="email"><br><br>
+ <input type="submit" value="Sign Me Up!">
+ <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html new file mode 100644 index 0000000..b645165 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html @@ -0,0 +1,25 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ First Name: <input type="text" name="fname" id="fname">
+ <br>
+ <br>
+ Last Name: <input type="text" name="lname" id="lname">
+ <br>
+ <br>
+ E-mail: <input type="text" name="email" id="email">
+ <br>
+ <br>
+ Comments:<br>
+ <textarea name="comments" id="comments" rows=4 cols=40></textarea><br>
+ <br>
+ <input type="submit" value="Contact"> <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html new file mode 100644 index 0000000..5c4e64f --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ <label>First Name: <input type="text" name="fname" id="fname"
+ <input type="text" name="fname" id="fname"><br><br>
+ </label>
+ <label>Last Name: <input type="text" name="lname" id="lname"
+ <input type="text" name="lname" id="lname"><br><br>
+ </label>
+ <label>E-mail: <input type="text" name="email" id="email"
+ <input type="text" name="email" id="email"><br><br>
+ </label>
+ <label for="comments">Comments:</label><br>
+ <textarea name="comments" id="comments" rows="4" cols="40"></textarea><br><br>
+ <input type="submit" value="Contact"> <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html new file mode 100644 index 0000000..1893bec --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html @@ -0,0 +1,49 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+input[type="submit"] {
+ margin-left: 110px;
+}
+
+form {
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px;
+ padding: 10px;
+}
+
+ label {
+ float: left;
+ clear: left;
+ display: block;
+ width: 100px;
+ padding-right: 10px;
+ margin-top: 10px;
+ text-align: right;
+ }
+
+ input {
+ display: block; margin-top: 10px;
+ }
+
+ textarea {
+ display: block; margin-top: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input id="mySubmit" type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html new file mode 100644 index 0000000..6977d05 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html @@ -0,0 +1,55 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+
+
+form { background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px; padding: 10px;}
+label { float: left; clear: left;
+ display: block; width: 100px;
+ text-align: right;
+ padding-right: 10px;
+ margin-top: 10px; }
+input, textarea { margin-top: 10px;
+ display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+ form {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 6em 1fr;
+ grid-gap: 1em;
+ gap: 1em;
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 60%;
+ min-width: 20em;
+ padding: 2em;
+ }
+
+ input[type="submit"] {
+ grid-column: 2 / 3;
+ width: 10em; margin-left: 0;
+ }
+}
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form>
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html new file mode 100644 index 0000000..a922c22 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html @@ -0,0 +1,55 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+
+
+form { background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px; padding: 10px;}
+label { float: left; clear: left;
+ display: block; width: 100px;
+ text-align: right;
+ padding-right: 10px;
+ margin-top: 10px; }
+input, textarea { margin-top: 10px;
+ display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+ form {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 6em 1fr;
+ grid-gap: 1em;
+ gap: 1em;
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 60%;
+ min-width: 20em;
+ padding: 2em;
+ }
+
+ input[type="submit"] {
+ grid-column: 2 / 3;
+ width: 10em; margin-left: 0;
+ }
+}
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html new file mode 100644 index 0000000..f97c3c3 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html @@ -0,0 +1,42 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Comment Form</title>
+ <meta charset="utf-8">
+ <style>
+label { display: block;
+ margin-top: 20px; }
+input { display: block;
+ margin-bottom: 20px; }
+ </style>
+ </head>
+ <body>
+ <h1>Comment Form</h1>
+ <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+ <label for="myFirstName">* First Name</label>
+ <input type="text" name="myFirstName"
+ id="myFirstName" required="required"
+ placeholder="your first name">
+ <label for="myLastName">* Last Name</label>
+ <input type="text" name="myLastName"
+ id="myLastName" required="required"
+ placeholder="your last name">
+ <label for="myEmail">* E-mail</label>
+ <input type="email" name="myEmail" id="myEmail"
+ required="required"
+ placeholder="you@yourdomain.com">
+ <label for="myRating">Rating (1 — 10)
+ </label>
+ <input type="range" name="myRating"
+ id="myRating" min="1" max="10">
+ <label for="myComments">* Comments</label>
+ <textarea name="myComments" id="myComments"
+ rows="2" cols="40"
+ required="required"
+ placeholder="your comments here">
+ </textarea>
+ <input type="submit" value="Submit">
+ </form>
+
+ </body>
+</html>
|