Intro to HTML Flashcards
POST method
The query string appears in the HTTP request body when the form submits data with the POST method.
What is the difference between the POST and GET method?
GET - The name=value pairs are sent through the URL and there are data amount limitations
POST - The name=value pairs are sent more securely by not showing them in the URL
What is the tag for comments?
<!-- -->
Ex. <!-- Example -->
Table structure
<table>
<tr>
<th></th> (or <td></td>)
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
What does the <form> element do?
The <form> element allows the web browser to submit information from the user to the server.
Query string
Query string is a set of name=value pairs separated by the ampersand character (&).
Example:
<form — type=”text” name=”first” id=”first”>
<input — type=”text” name=”last” id=”last”>
The query string would be first=John&last=Smith
Each “name” is specified as an attribute of the HTML field, and the “value” is the user-entered data, i.e., John Smith.
GET method
The GET method submits information to a web server by altering the URL of the HTTP request.
- Creates a query string.
- Creates an URL with the server page and name=value pairs that’s separated by a question mark. (http://example.com/apply?first=John&last=Smith
- Uses the newly created URL to create and send an HTTP GET request.
- Displays or updates the webpage using the HTTP response received from the server.
What are the required attributes for the <form>?
Action - Tells the browser where to send the form data. The action to be performed when the form is submitted.
Method - Indicates the HTTP request type the browser will use to communicate with the server using either “GET” or “POST” (GET being the default).
form — action=”Website” method=”POST”
enctype attribute
If a form field contains binary data such as an image, a POST request is split into multiple parts.
The <form> element’s enctype attribute value “multipart/form-data” 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.
<form — action=”website” method=”POST” enctype=”multipart/form-data”>
escaped and unescaped
Escaped - Encoded data that replaces special characters with codes that represent them to be correctly understood by the server.
Special characters are represented by a percent sign “%” followed by two hexadecimal digits that represent the character’s ASCII value.
Ex: “1 + 2 = ?” is “1+%2B+2+%3D+%3F”.
The “+” represents a space, 2B is the ASCII hex value for “+”, 3D is the ASCII value for “=”, and 3F is the ASCII value for “?”
Unescaped - The server determine what the original values of the data are.
widget
A widget is an interactive component (usually graphical) that the browser uses to interact with a user.
Ex: Buttons, drop-down menus, and data entry fields.
The “input” tag’s 5 attributes and their purpose.
The <input></input> element is a void element with five primary attributes:
type attribute - indicates the widget type. (text, password, submit, and button).
name attribute - names the widget and sends the widget’s value when the widget’s form is submitted.
id attribute - used to give a widget a unique identifier.
placeholder attribute - specifies text that first appears in a text widget, typically for giving the user a hint as to the expected value.
value attribute - specifies a default value for a widget.
text box
What tag does it belong to?
A text box widget is an <input></input> element with the attribute of type=”text” that allows users to enter a single line of text.
<input - type=”text” name=”status” id=”status” placeholder=”Your status”>
submit button
What element does it belong to?
The web browser displays a submit button widget for an <input></input> tag with the attribute of type=”submit”. A submit button uses the value attribute to specify the button’s text.
<input - type=”submit” value=”Send status”>
“label”
What is it’s attribute?
The “label” tag displays descriptive text associated with a specific widget.
A label has a “for” attribute whose “value” should match the “id” attribute for the widget being labeled.
Labels help people using screen readers understand what input is expected.
What is a “textarea” tag and what attributes belong to it?
A “text area” widget allows users to enter multiple lines of text.
It is a void element.
Optional attributes are “rows” and “cols” to specify the size of the text area.
<textarea - row=”2” cols=”6”>
Which attribute in the “input” tag should the “for” attribute match in the “label” tag?
The “for” attribute of the “label” tag should be equal to the “id” attribute of the “input” element to bind them together.
What does the value attribute do on a button?
The “value” attribute defines the text displayed on the button.
<input - type=”submit” value=”Submit Form”>
What code makes a checkbox initially appear selected?
<input - type=”checkbox” checked>
Ex.
<input - type=”checkbox” id=”birthday_today” name=”birthday_today” checked>
Sent to server as birthday_today=on
If there is no “value” attribute then the value defaults to “on”.
radio button
A radio button is a widget that allows users to select exactly one value from possibly many values.
Basic HTML page structure before adding content.
<!DOCTYPE html>
<html>
<head>
<meta - charset="UTF-8">
<title>Stephanie's Practice Page</title>
</head>
<body>
</body>
</html>
meta tag
<meta - charset=”UTF-8”>
What attribute changes ordered lists numbering style and unordered lists bullet point styles?
<ol - type =”A”>
<ol - type=”i”>
<ul - style=”list-style-type:square”>
favicon images
A favicon is a small icon that identifies a website and typically displays in a browser tab.
<link - rel=”icon” href=”favicon.png”>
