Section 5: Advanced HTML 5 Flashcards
< form > < /form >
puts a form on the webpage. For ex: a registration form or login form that you see on a lot of websites.
Ex:
< form method=”POST” >
First Name:
< input type=”text” name=”firstname” >< br >
Email:
< input type="email" name="email" required >< br >
Password:
< input type="password" name="password" minlength="5" required >< br >
Birthday: < input type="date" name="birthday" >< br >
Gender:
< br >
< input type="radio" name="gender" value="Male >Male< br >
< input type="radio" name="gender" value="Female" >Female< br >
Pets:
< br >
< input type="checkbox" name="Pets" >Cat< br >
< input type="checkbox" name="Pets" >Dog< br >
Cars:
< br >
< select name="car" >
< option value="volvo" >Volvo< /option >
< option value="audi" >Audi< /option >
< /select >
< br >
< !--buttons-- >
< input type="submit" value="Register" >
< input type="reset" >
< /form >
Between the form tags you have the different form elements that make up the form.
The tags have attributes called “type” that have values “text”, as well as other attributes with values inside of the tags.
Textbox (creates text):
First Name: < input type="text" > Last Name: < input type="text" > -------------------------------------------------- Submit Button (submits form):
< input type="submit" value="register!" > --------------------------------------------------- Reset Button (resets form):
Email (makes the text input need to be in the format of an email, ex: email@gmail.com:
Password (adds a password):
Password: < input type="password" minlength="5" > ------------------------------------------------------- Required attribute (makes the input required before submitting):
Date (adds calander to pick a date):
Birthday: < input type="date" > ----------------------------------------------------------- Radio Buttons (adds radio buttons with options of male or female):
Gender: < br >
< input type=”radio” > Male < br >
< input type=”radio” > Female < br >
< input type=”radio” > Other < br >
—————————————————————-
Radio Buttons for only selecting one instead of multiple:
In this example we add name=”gender” attribute:
Gender: < br >
< input type=”radio” name=”gender” > Male < br >
< input type=”radio” name=”gender” > Female < br >
< input type=”radio” name=”gender” > Other < br >
————————————————————-
Checkbox (adds checkboxes):
Pets: < br > < input type="checkbox" > Cats < br > < input type="checkbox" > Dogs < br > ---------------------------------------------------------------- Dropdown menu (adds dropdown menu):
Cars: < br >
< select >
< option value=”volvo” >Volvo< /option >
< option value=”audi” >Audi< /option >
< /select >
—————————————————————
Multiple attribute (select multiple elements):
In this example we add "multiple" to the select tag: Cars: < br > < select multiple > < option value="volvo" >Volvo< /option > < option value="audi" >Audi< /option > < /select > ------------------------------------------------------------------- Name attributes (creates quary strings that go to the backend since we need to store this information so that when we go back to the page it remembers):
You must put name attributes on everything in the form (see how to do it with each element in the first example of a form above)
“name” attribute in forms as well as the methods “GET” and “POST”
All form elements need to have a “name” attribute (also can be called a property…I think this has to do with it being outputted in the backend?) with some sort of value. The only exceptions are if it doesn’t have any user info such as a submit button or a reset button.
If you do not do this, then you’ll notice the url will look something like this:
file:///C:/Users/Joe/Desktop/The%20Complete%20Web%20Developer%20in%202020%20Zero%20to%20Mastery/index.html
?
gender=on
If you do put the "name" attributes and their values then your url will look something like this: file:///C:/Users/Joe/Desktop/The_Complete_Web_Developer_in_2020_Zero_to_Mastery/form_template.html ? firstname=Joe&email=joe%40gmail.com &password=12345 &birthday=2020-06-10 &gender=Male &Pets=Cat &car=volvo ^This is good, because it is showing that the inputted answers from the form are going to the backend (aka the servers). It is also bad, because it is being sent to the url as quary strings for anyone to see your answers in the url bar such as: ? firstname=Joe&email=joe%40gmail.com &password=12345 &birthday=2020-06-10 &gender=Male &Pets=Cat &car=volvo WHOOPSY DAISIES!!! You don't want somebody to see your password now do ya? This is why we have the "method" attribute with the values "GET" or "POST". The value "GET" will do the same thing with the quary strings, attaching them to the url to send to the server, but the method "POST" will make it secure.
This allows the inputted information to not be seen in the URL. Now the URL looks like this:
file:///C:/Users/Joe/Desktop/The%20Complete%20Web%20Developer%20in%202020%20Zero%20to%20Mastery/index.html
THERE!!! So much better and secure.
Now, let’s talk a bit about why it looked like that in the URL…
? < —— coming up there’s going to be a bunch of data for you…here it is!
firstname=Joseph < —— property and value
&email=joemaas91%40gmail.com < —— the & sign is due to URL encoding. & literally just means “and” % is @ etc.
&password=12345
&gender=Male
&Pets=Cat
&car=volvo
(Pets=Cat just for an example is showing that you put name=”Pets” and value=”Cat” in the form…That is how the strings are translated)
HTML commenting out
You can use the shortcut “ctrl + /” to easily comment out stuff (in Atom text editor)
< span >< /span > (in-line element)
A container that wraps around the content you want to have in it, and in this box you can style it differently than the rest of your website.
< span >< /span > is the same as < div >< /div > only it is an inline element instead of a block element which means you can add style to html elements without accessing an outside CSS file.
<span></span> (in-line element)
A container that wraps around the content you want to have in it, and in this box you can style it differently than the rest of your website.
< span >< /span > is the same as < div >< /div > only it is an inline element instead of a block element which means you can add style to html elements without accessing an outside CSS file.
HTML vs HTML5
HTML5 is the latest evolution of HTML with added features to improve the user experience. If we used the HTML version Tim Burners Lee used when he created the World Wide Web, it would be very outdated and parts of it wouldn’t work with technologies we have today such as phones and tablets just as one example, it would still work for a lot of things, just not as effectively or efficiently.
A sidenote: Backwards compatible is a term that just means you want new evolutions of code to work on older versions of code. That means we don’t get rid of the old stuff the web is built off of, but we expand upon it to make it better.
HTML5 also uses what are called new Semantic Elements(sometimes called SEO).
Many websites contain HTML code like < div >, < div class=”header” >, < div > to indicate naviation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page such as:
< article > < aside > < details > < figcaption > < figure > < footer > < header > < main > < mark > < nav > < section > < summary > < time > (https://www.w3schools.com/html/html5_semantic_elements.asp) etc.... These semantic elements allow crawlers (a program that systematically browses the World Wide Web in order to create an index of data...used by Google for example) to view and interpet what your website is, what the topic about it is, and rank it in search engines.
