3. More HTML Flashcards
A(n) ____ is any element in a web document body that has opening and closing tags. Web developers typically create many of these as a convenience to assist in organizing and formatting content.
container
A ____ container is the container in which another element resides.
parent
What are examples of common HTML containers?
<header>
<footer>
<address>
<main>
<section>
<article>
<nav>
<aside>
<div>
<span>
A(n) ____ element fills the width of the element’s parent container and can contain other block elements, inline elements, and text
block
Some block elements, like <p>, can’t be contained within other block elements, like <p>, in this example, because it creates ambiguity
Which HTML element is the only block element that has no semantic meaning?
<div>
A(n) ____ element fills the minimum space possible in the element’s parent container and can only contain text or other inline elements
inline
Which inline element has no semantic meaning?
<span>
Which HTML element allows the web browser to submit information from the user to the server?
<form></form>
What are the two primary attributes of the <form> element?
- action - indicates the URL where the form data should be sent
- method - indicates the HTTP request type the browser will use to communicate with the server. The method is either GET or POST
When the method attribute in a <form> element is not set or is invalid, the browser by default uses an HTTP ____ request to communicate with the server.
GET
When a browser submits information to a server using an HTTP GET request, it alters the URL of the HTTP request by adding a ____ character followed by a ____ string. This string is composed of key-value pairs separated by the ____ character.
?, query, &
Example:
https://example.com/apply?first=Rick&last=Deckard
The HTTP POST method sends a query string in the request ____ rather than in the URL.
body
If sending an image through a POST request, the <form> element’s ____ attribute and the value ____ indicates the web browser should split a POST request into multiple parts, where each input field is sent as a separate part of the HTTP request message.
enctype, multipart/form-data
Example:
<form action=”https://example.com/apply” method=”POST” enctype=”multipart/form-data”>
User-entered special characters, like &, ?, and =, along with whitespace characters, must be ____
escaped
What is the escape character for a space in a query string?
The plus symbol (+)
How are other, non-space, special characters represented in a query string?
%XX, where XX is the ASCII hex value of the character
If “1 + 2 = ?” is entered into a textbox, the browser escapes the values producing “1+%2B+2+%3D+%3F”. 2B is the ASCII hex value for “+”, 3D is the ASCII value for “=”, and 3F is the ASCII value for “?”
A(n) ____ is an interactive component (usually graphical) that the browser uses to interact with a user.
widget
What element allows users to enter information into a web page?
<input> (a void element)
What are the five primary attributes that the <input> element can have?
type – the widget type. Common types include text, password, submit, and button
name – names the widget and sends the widget’s value when the widget’s form is submitted
id – used to give a widget a unique identifier. Often the id and name attributes are the same. However, the id attribute may be different from the name attribute. Ex: The same webpage may have two forms that send data using the same name.
placeholder –specifies text that first appears in a text widget, typically for giving the user a hint as to the expected value
value – specifies a default value for a widget
The ____ element displays descriptive text associated with a specific widget.
<label></label>
A label has a ____ attribute whose value should match the id attribute for the widget being labeled
for
Labels help people using screen readers understand what input is expected.
The ____ element allows users to enter multiple lines of text.
<textarea></textarea>
What are the two optional attributes for the <textarea> element that specify the initial size of the text area?
rows, cols
Example:
<textarea>To summarize...</textarea>
A checkbox will initially appear selected if the ____ attribute is set
checked
Example:
<input type=”checkbox” checked>
The “checked” attribute is an example of a ____ attribute, which requires no value and is true if present, false if absent
boolean
A(n) ____ is a widget for input elements with the type attribute of “____”, which allows users to select exactly one value from possibly many values
radio button, radio
When submitting a form, the browser sends the selected radio button’s ____ and ____ attribute
name, value
Example:
If the radio button <input type=”radio” name=”movie” value=”ET”> is selected, “movie=ET” is sent to the server.
Which HTML element creates a drop-down menu, which allows users to select one of several predefined values?
<select></select>
Which HTML element creates a value the user can select within a drop-down menu?
<option></option>
The “value” attribute of this element sets the value that displays in the drop-down menu
A ____ widget is created by specifying a “size” attribute in the <select> element?
list box
Example:
<select size=”4”> creates a list box that shows four options at a time. If the list box contains more than size options, the browser adds a vertical scrollbar so the user can scroll through the list of options.
Which attribute, when added to the <select> element, allows users to select more than one option?
multiple
Example:
<select name=”flagcolors” size=”4” multiple>
In what two ways can a button be created with HTML?
- adding a “button” value to the “type” attribute in the <input> element
- Using the <button> element
What is the main difference between declaring a button with <input type=”button”> and with <button> ?
The button element allows for displaying text and images in a button, whereas the button attribute in the input element only allows for displaying text in a button
What values can the <button> element’s “type” attribute be set to?
“button” or “submit”
The “button” value is usually used with JavaScript to execute an action when the button is clicked
The “submit” value creates a submit button for a form
Which value, used either with the “password” or “text” value of the “type” attribute can restrict the number of characters that a user can enter
maxLength
** The “size” attribute can also limit a password field or text box’s width
The element groups related form widgets together and draws a box around the related widgets
<fieldset></fieldset>
Which element defines a caption for a <fieldset> element?
<legend></legend>
What HTML element and attribute create a date picker?
<input type=”date”>
What two attributes can establish the early and late bounds of a date picker?
min and max
What HTML element and attribute create a color picker?
<input type=”color”>
What HTML element and attribute ensure that the input is a valid number?
<input type=”number”>
The “min” and “max” attributes are often used with the number input.
What HTML element and attribute create a slider?
<input type=”range”>
Often uses “min,” “max,” and “value” attributes
How do you create a combo box in HTML?
<input list=”sport”>
<datalist id=”sport”>
<option value=”Baseball”>
<option value=”Basketball”>
<option value=”Football”>
<option value=”Hockey”>
<option value=”Soccer”>
</datalist>
What are the four specialized text fields that can be created with the “type” attribute of the <input> element?
type=”url”
type=”tel”
type=”email”
type=”search” (for typing search terms)
What are various <input> attributes that can be used to validate form data?
maxlength
minlength
max
min
pattern (provides a regex that the input must match)
required
step (sets the amount by which the value can change)
A(n) ____ is a mechanism that allows a webpage element to function correctly even if the browser does not support a particular element.
fallback
A(n) ____ is a fallback using JavaScript code that makes certain HTML features (Ex: the date picker) work on browsers that do not natively support those features.
polyfill
Which HTML element is used to play a sound file in a web page?
<audio></audio>
Which HTML element is placed inside the <audio> element or the <video> element to specify an audio or video file to play?
<source></source>
What are some common attributes of the <audio> element?
autoplay
controls (displays audio controls)
loop
muted (initially mutes the sound)
Which audio formats have the widest browser support?
AAC (Advanced Audio Coding)
MP3
Which HTML element is used to display video in a webpage?
<video></video>
What are three common video formats?
MPEG-4 or MP4 (.m4a [audio only] or .mp4 [may contain video])
Ogg Theora (.ogg, .ogv, .ogm)
WebM (.webm)
What HTML element is used to display a YouTube video in a web page?
<iframe></iframe>
This element allows a webpage to be embedded in a rectangular area of the current webpage
The “src” attribute specifies the URL of the webpage to display and the “width” and “height” attributes to define the width and height in pixels of the rectangular iframe
Which HTML element allows a webpage to include executable code, which the browser assumes to be JavaScript unless indicated otherwise?
<script></script>
Which HTML element allows the webpage to introduce presentational directives, usually CSS.
<style></style>
What element should the <style> element be placed inside?
The <head> element, since the stylesheet describes the presentation of the entire document.
True or false: developers should use self-closing tags (e.g., <br />) for void elements.
False
Use <br> instead of <br />
