Skip to content
Introductory Guide To Web Development
Session #9
In session #9 we talked about the Mozilla Web Documentation Library, how to scale our webpages to fit on the same window, and finally HTML form elements to create a simple quiz form related to Harry Potter World
Mozilla Web Documentation Library
In programming, there are a lot of important concepts that we just can’t remember it all. Luckily, we have documentation libraries to help us remember. A documentation library is like a dictionary, a place where all the programming tools, techniques, and concepts are stored, you can find anything. The best documentation library for web development is the MDN WEB DOCS,
Scaling Webpages Across Screen Sizes
Please watch the following videos to review and access on this topic
Html Forms Notes Packet
Please see below for all the notes from the lesson on HTML forms
HtmlFormsNotesPacket.pdf
2.4 MB
Styling forms in HTML is pretty much the same as styling other elements in HTML. You can use all the different selectors we learned and the properties work for all. It will just take a bit of practice
Coding Challenges
Here are some ways you can practice the skills you learned :)
Raw Code: Triwizard Tournament Sign Ups Webpage
Note ~ the following code is not indented correctly due to copy paste issues,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Triwizard Tournament Sign-Ups</title>
<style>
body {
background-color: rgb(0, 12, 74);
color: yellow;
}
textarea:hover {
background-color: red;
}
</style>
</head>
<body>
<!--
FORMS!!!!!
- Required if you want user inputs on your webpage
- For example, a sign page for a website is an example of an HTML form
- Schoolhouse uses multiple HTML form elements too
- HTML forms is a very broad subject, a lot to cover
Elements:
- Text boxes
- Check boxes
- Dropdown menus
- Radio buttons
and so much more.......
the <form> tag is a parent tag, similar to the <table> tag
-->
<h1>Triwizard Tournament Sign-Ups</h1>
<hr>
<form>
<h3>Name: <input type = "text" name = "nameInput"></h3>
<h3>Age: <input type = "text" name = "ageInput"></h3>
<h3>Email: <input type = "text" name = "emailInput"></h3>
<h3>Country: <input type = "text" name = "countryInput"></h3>
<h3>Password: <input type = "password" name = "passwordInput"></h3>
<h3>Why do you want to join?</h3>
<textarea name = "whyInput" rows = "5" cols = "30"></textarea>
<hr>
<h3>Select your hobbies:</h3>
<ul>
<li style = "list-style-type: none;"><input type = "checkbox" name = "duelCheck"> Wizard Duel</li>
<li style = "list-style-type: none;"><input type = "checkbox" name = "artCheck"> Wizard Art</li>
<li style = "list-style-type: none;"><input type = "checkbox" name = "chessCheck"> Wizard Chess</li>
</ul>
<h3>Select your best subject:</h3>
<ul>
<li style = "list-style-type: none;"><input type = "radio" name = "transSubject"> Transfiguration</li>
<li style = "list-style-type: none;"><input type = "radio" name = "potionsSubject"> Potions</li>
<li style = "list-style-type: none;"><input type = "radio" name = "dadaSubject"> DADA</li>
<li style = "list-style-type: none;"><input type = "radio" name = "charmsSubject"> Charms</li>
<li style = "list-style-type: none;"><input type = "radio" name = "muggleSubject"> Muggle Studies</li>
<li style = "list-style-type: none;"><input type = "radio" name = "otherSubject"> Other Subjects</li>
</ul>
<h3>Which school do you attend?</h3>
<select name = "schoolDropdown">
<option selected>~Select One~</option>
<option>Hogwarts</option>
<option>Beauxabatons</option>
<option>Drumstrang</option>
</select>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.