IST 256 Exam 1 - Lesson 2-2: HTML (Part 2)

How does the GET method support a form?

GET Method: The GET method is a technique used by a web browser to submit information to a web server by altering the URL of the HTTP request. The query string is a set of name=value pairs separated by the ampersand character (&). Each name is specified as an attribute of the HTML field, and the value is the user-entered data.

GET vs. POST

GET: - Parameters in URL - Used for fetching documents - Maximum URL length - Ok to cache - Shouldn't change the server POST: - Parameters in the body - Used for updating data - No max length - Not ok to cache - Ok to change the server (this is what this request method is typically used for)

What are some commonly used HTML containers? (<header>...</header>, <footer>...</footer>, <main>...</main>, <section>...</section>, <nav>...</nav>, <aside>...</aside>, <div>...</div>, <span>...</span>)

1) <header> - Container for introductory content 2) <footer> - Container for content descriptive information about the web page like author, copyright, or date modified 3) <address> - Container for person's or organization's contact information 4) <main> - Container for the document's primary content 5) <section> - Container for distinct parts of a document, such as a chapter 6) <article> - Container for self-contained content that can be reused independently, such as a news article 7) <nav> - Container for content relating to website navigation 8) <aside> - Container for content not directly related to the main topic of a document 9) <div> - Generic tag for creating block containers 10) <span> - Generic tag for creating inline containers

<input> Tag Attributes

1) type - Indicates which kind of widget is displayed by the browser (e.g. "radio", "checkbox", "text") 2) name - Allows the server to identify which data came from which widget. The browser sends the data and name to the server, so the server can associate the data received with a specific form input 3) id - Uniquely identifies the specific input tag to the browser. Oftentimes the id and name attributes are the same. However, the id attribute may be different from the name attribute. (Ex. the same web page may have two forms that send data using the same name.) 4) value - Allows the input to start with a default value. Some inputs may be optional or previously entered by the user, so the value attribute allows the browser to send data from the form without direct user interaction. 5) placeholder - Provides a hint to the user about the information being requested. (Ex. a widget asking for the user's email address may set the placeholder to "Your email address")

Query String Code Snippet Example

<form method="GET" action="http://example.org/"> <input type="text" name="item"> <input type="text" name="price"> <input type="submit"> </form> 1) What is the query string if the user submits "bananas" and "2.50" in the text boxes? ---> item=bananas&price=2.50 2) What URL does the browser request if the user submits "bananas" and "2.50" in the text boxes? ---> http://example.org?item=bananas&price=2.50 ^The query string appears after the ? in the URL when the form submits data with the GET method.

Which type value is used for a generic form button?

<input type="button">

Which type value is used for a checkbox?

<input type="checkbox"> Checkbox: • A checkbox is a widget for input elements with the type attribute of "checkbox", which allows users to check, or select, a value. ♦ A checkbox initially appears selected if the checked attribute is set. Ex: <input type="checkbox" checked> creates a checked checkbox. The checked attribute is an example of a boolean attribute. ♦ A boolean attribute is an attribute that is true when present and false when absent. No value must be assigned to a boolean attribute.

Which type value is used for color pickers?

<input type="color"> Color Picker: o Clicking on the color picker creates a color selector popup that helps the user explore and choose a color. o The basic syntax for the color picker is <input type="color">

Which type value is used for date pickers?

<input type="date"> Date Picker: o An input picker is a widget that allows the user to interactively pick a choice using a popup or other guided selection method. o The date picker is an input picker that allows the user to enter a date or choose a date from a calendar popup. o The basic syntax for the date picker is <input type="date">. Two common attributes for the date input are min (the earliest date permitted) and max (the latest date permitted).

Which type value is used for number inputs?

<input type="number"> • Number Input: o The number input ensures user input is a valid number. o The basic syntax for the number input is <input type="number">. The min and max attributes are commonly used with the number input. o The number widget attributes are used to automatically validate input.

Which type value is used for a password field?

<input type="password"> Password Field: • A password field is a widget for input elements with the type attribute of "password", which allows users to enter a password without the password contents being displayed on-screen. Web browsers usually provide facilities to remember passwords at various websites to help users. • Forms that submit passwords or any sensitive data should always submit with URLs that use HTTPS. Form data submitted with HTTP are not encrypted, but HTTPS encrypts form data.

Which type value is used for radio buttons?

<input type="radio"> Radio Button: o A radio button is a widget for input elements with the type attribute of "radio", which allows users to select exactly one value from possibly many values. The web browser groups radio buttons together with the same name attribute, where each possible value in a group has an associated input. When submitting a form, the browser sends the selected radio button's name and value attribute. Ex: If the radio button <input type="radio" name="movie" value="ET"> is selected, "movie=ET" is sent to the server. • The main difference between a radio button and checkbox is that only one radio button in a group can be selected, while any number of checkboxes can be selected.

Which type value is used for range inputs?

<input type="range"> Range Input (like a sliding scale mechanism): o The range input widget allows the user to select a value by dragging a sliding control along the length of a line. o The basic syntax for the range input is <input type="range">. Three commonly used attributes for the range input are min, max, and value.

Which type value is used for a form submit button?

<input type="submit"> The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked. A submit button uses the value attribute to specify the button's text. The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked. A submit button uses the value attribute to specify the button's text.

Which type value is used for a textbox?

<input type="text"> defines a single-line text input field ♦ A text box widget is an input element with the type attribute of "text" that allows users to enter a single line of text <input type="textarea"> defines a text input field that can hold any number of text lines ♦ A vertical scrollbar appears when the number of text lines exceeds the text area size

What tag is used for a button? (<button>...</button>)

A button widget can be created using the <button> opening and closing tags or with <input type="button">. The <button> element allows text and images to be displayed in a button, but an <input> button only allows text. The <button> element has a type attribute that can be set to various values like "button" or "submit". The "button" type is typically used with JavaScript to perform an action when clicked. The "submit" type creates a submit button for a form. If the type attribute is not specified, different browsers may choose different default types, so good practice is to always specify the type.

Which type value is used for List Boxes?

A list box widget is created by specifying a size with the select element's size attribute. Ex: <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. The multiple attribute allows the user to select multiple options. On Windows, the user must hold down the control (Ctrl) button to select multiple options, and on a Mac, the user must hold down the command button. Many users are unaware of how to choose multiple options from a list box, so good practice is to use checkboxes instead.

What is a query string?

A query string is the portion of a URL where data is passed to a web application and/or back-end database. The reason we need query strings is that the HTTP protocol is stateless by design. On the world wide web, all URLs can be broken down into the protocol, the location of the file (or program) and the query string. The protocol you see in a browser is almost always HTTP; the location is the typical form of the hostname and filename (for example, www.techopedia.com/somefile.html), and the query string is whatever follows the question mark sign ("?") For example, in the URL below, the bolded area is the query string that was generated when the term "database" was searched on the Techopedia website. //www.techopedia.com/search.aspx?q=database§ion=all

Text Box Widget

A text box widget is an input element with the type attribute of "text" that allows users to enter a single line of text. • The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked. A submit button uses the value attribute to specify the button's text. • The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked. A submit button uses the value attribute to specify the button's text.

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.

Which type value is used for combo boxes?

Combo Box: A combo box is the combination of a text box and drop-down menu into a single widget. A combo box is created with an <input> element, which creates the text box, and a <datalist> element, which provides the drop-down list options.

What is an HTML container?

Containers and Parent Containers: A container is any part of a web document body that has opening and closing tags • Web developers typically create many containers as a convenience to assist in organizing and formatting content. A parent container is the container in which another element resides

Under what circumstances is this (<button>) tag typically used?

The "button" type is typically used with JavaScript to perform an action when clicked.

Which type value is used for a Fieldset?

The <fieldset> tag groups related form widgets together and draws a box around the related widgets. The <legend> tag defines a caption for a <fieldset>.

What tag is used for a form? (<form>...</form>)

The <form> tag allows the web browser to submit information from the user to the server The <form> tag has two primary attributes: 1) action 2) method <form action="https://twitter.com/status" method="POST'> ... </form>

What tag is used for textboxes, password fields, form buttons, checkboxes, radio buttons, date pickers, color pickers, number inputs, range inputs, and combo boxes? (<input>...</input>)

The <input> tag allows the user to enter information into a web page. The <input> tag cannot enclose any additional page content, and thus does not have a closing tag. The <input> tag has five primary attributes: ♦ The type attribute indicates the widget type. Common types include text, password, submit, and button. ♦ The name attribute names the widget and sends the widget's value when the widget's form is submitted. ♦ The id attribute is used to give a widget a unique identifier. ♦ The placeholder attribute specifies text that first appears in a text widget, typically for giving the user a hint as to the expected value. ♦ The value attribute specifies a default value for a widget.

What tag is used for a label? (<label>...</label>)

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.

What tag is used for a drop-down menu? (<select>...</select>)

The <select> element is used to create a drop-down list. <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>

What tag is used a drop-down menu item? (<select>...</select>) (<option>...</option>)

The <select> opening and closing tags create a drop-down menu (or drop-down list), which allows users to select one of several predefined values. The <option> opening and closing tags create a value, or option, the user can select within a drop-down menu. When the user is not interacting with the menu, the drop-down menu usually displays the selected option. The difference between a drop-down menu and a radio button widget is that the drop-down menu only displays the options when interacting with the user, while a radio button widget always displays all options.

How does the POST method support a form?

The POST method is a technique used by a web browser to submit information to a web server by sending the information in the HTTP request body. The <form> tag'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.

What does the action attribute specify for a form?

The action attribute indicates the URL where the form data should be sent. Typically the URL uses HTTPS so the form data is encrypted.

What does the for attribute specify for a label?

The for attribute specifies which form element a label is bound to. <label for="element_id">

What does the id attribute specify for an input?

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

What does the method attribute specify for a form?

The method attribute indicates the HTTP request type the browser will use to communicate with the server. The method is either GET or POST. GET is the default method if no method is specified.

What does the name attribute specify for an input?

The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. For a <form> element, the name attribute is used as a reference when data is submitted. <input name="text">

What does the type attribute specify for an input?

The type attribute indicates which kind of widget is displayed in the browser Some examples of the type attribute include "radio" for radio buttons, "checkbox" for checkboxes, and "text" for textual input

What does the value attribute specify for an input?

The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: • For "button", "reset", and "submit" - it defines the text on the button • For "text", "password", and "hidden" - it defines the initial (default) value of the input field • For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit