Skip to content
Gallery
WGU: BS in IT
Introduction to IT D322
Principles of Management C483
Business of IT – Applications D336
Organizational Leadership - C484
Spreadsheets - C268
Web Development: Foundations - D276
User Interface Design C773
Web Development: Applications
Project Management - C324
Information Systems Management - C724
Data Management Foundations - D426
Share
Explore
HTML

icon picker
More HTML

Makiel [Muh-Keel]
Last edited 462 days ago by Makiel [Muh-Keel].

Containers and parent containers

A container is any element in 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. Ex: Containers can be formatted by applying styles to adjust margins, padding, horizontal and vertical alignment, and other visual presentation attributes.
A parent container is the container in which another element resides.
⁠
image.png
⁠
⁠

Inline elements

An inline element fills the minimum space possible in the element's parent container and can only contain text or other inline elements. Ex: The <a> element is an inline element that creates a hyperlink container as big as the link's internal content; a hyperlink does not fill the width or height of the link's parent paragraph.

Forms

The <form> element allows the web browser to submit information from the user to the server. The <form> element has two primary attributes:
The action attribute indicates the URL where the form data should be sent. Typically the URL uses HTTPS so the form data is encrypted.
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.

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.

POST method

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.

Form widgets

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> element allows the user to enter information into a webpage. The <input> element is a void element with 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.
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.
⁠
image.png
⁠
⁠

Labels and text areas

The <label> element 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.
⁠
image.png
⁠
⁠

Form validation

Form validation is preventing incorrect form input from being submitted. A form's input elements can use the attributes in the table below to restrict user input.
⁠
image.png
⁠
⁠

A fallback is a mechanism that allows a webpage element to function correctly even if the browser does not support a particular element. Good practice is to implement a fallback mechanism if a particular widget is not widely supported by browsers at the time.
A polyfill 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. Developers often use a JavaScript library such as Modernizr to detect which features the browser does not support, and then load one or more polyfills to provide fallback mechanisms for the non-supported features.
Containers and parent containers
Inline elements
Forms
GET method
POST method
Form widgets
Labels and text areas
Form validation
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.