Using HTML Tags 2 Flashcards
Describe the broad attributes of HTML forms
A form is set with <form> </form>
Inputs with ex. <input type=”button”>
Send the info of the form to a file with <form action=”filename.js”>
The form-data can be sent as URL variables (with method=”get”) or as HTTP post transaction (with method=”post”).
Input tags have names <inpute type=”button” name=”input-name”>
The name defines the entry name wherever the form is sent.
We give input tags ids and assign labels to them with label tags
<label for=”lname”>Last name:</label>
Send information to the server
Send user to a “thank you for submitting” page.
(This will need updating once backend is learned)
The “form” tag
The “action” attribute brings them to the URL
<form action=”/url”>
<input>
</form>
Sends client to “/url” after submitting form.
Get input that is:
text
<input type=”text”>
Default input is text.
Any type=”x” for x that is not a defined input type will also default to text.
Tag for input that defines a “default input” (that grey text that gets automatically replaced)
<input type=”text” placeholder=”this is placeholder text”>
Tag that gives default input into a text form area
<input type=”text” value=”this is default text”>
Create a submit button
Create a submit button that sends information
<button type=”submit”>
text of the button
</button>
To make it submit, make it apart of a form:
<form action=”https://www.freecatphotoapp.com/submit-cat-photo”>
<input type="text" placeholder="cat photo URL">
<button type=”submit”> this button submits the form
/form>
Require a field to be filled out before submission allowed
<input type=”text” required>
required tag can be anywhere inside
Create multiple choice input with a radio button (mutually exclusive options).
You create a “radio” button and a “label” for it
With input type “radio”.
All input type “radio” with the same “name” will be mutually exclusive connected selection options.
<label>
<input type=”radio” name=”indoor-outdoor”>Indoor
<input type=”radio” name=”indoor-outdoor”>Outdoor
</label>
Will give:
o Indoor
o Outdoor
Input type will create a button.
Label can label those buttons.
It’s considered best practices to separate them and assign the label to the button:
<input id=”indoor” type=”radio” name=”indoor-outdoor”> (creates a button with an id)
<label for=”indoor”> Indoor /label> (assigns the label for the an id)
you can do it without “id” and “for”:
<input type=”radio” name=”indoor-outdoor”> (creates a button with an id)
<label> Indoor </label> (assigns the label for the an id)
Can also nest the input inside the label. By wrapping an input element inside of a label element it will automatically associate the radio input with the label element surrounding it.
<label for=”indoor”>
<input id=”indoor” type=”radio” name=”indoor-outdoor”>Indoor
</label>
Create multiple choice that allows multiple options
<input type=”checkbox”>
Each of your checkboxes can be nested within its own label element.
All related checkbox inputs should have the same name attribute.
By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.
To import something specific with radio or checkbox input types.
What happens if you omit this attribute?
<label for=”indoor”>
<input id=”indoor” value=”INDOOR” type=”radio” name=”indoor-outdoor”>Indoor
</label>
<label for=”outdoor”>
<input id=”outdoor” value=”OUTDOOR” type=”radio” name=”indoor-outdoor”>Outdoor
</label>
These would write to the form under name “indoor-outdoor” the value of either “INDOOR” or “OUTDOOR”.
If the attribute is omitted, it will just write to the form the default “on” for “indoor-outdoor” regardless of which option was selected.
Have the boxes of radio or checkbox ticked by default
What happens if multiple radio options have defaulted?
What happens if multiple checkbox options have defaulted?
“checked”
<input type=”radio” name=”test-name” checked>
It checks the latest one (the last one processed presumably)
It checks all of them
<div> element does what
The <div> HTML element is the “generic container” for flow content.
It has no effect on the content or layout
Subsequent div containers will start on a new line. (But this is common for html elements and I don’t know the significance yet)
What makes head?
What makes body?
head-
The <head> contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
It primarily holds information for machine processing, not human-readability. For human-visible information, like top-level headings and listed authors, see the <header> element.
document title goes in the head.
body-
The represents the content of an HTML document. There can be only one <body> element in a document.
What’s the difference between head and header?
Head tag:
The HTML <head> element provides general information (metadata) about the document, including the page title, script links/definitions, and style links/definitions.
Header tag:
The HTML <header> element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section’s header, a search form, and so on.
Create a < in an HTML doc but have it read as a string
& lt (with no space)
