HTML Forms and Styling

These flashcards cover the fundamental HTML elements, attributes, and CSS styling techniques used to build and validate web forms as described in the lecture.

$form$ element

The outermost element that contains all other form elements, such as inputs and buttons.

$action$ attribute

An attribute that allows the developer to specify the URL where the form data will go after it has been submitted.

$method$ attribute

An attribute used to specify whether the form data should be sent via $get$ or $post$.

$get$ method

A method typically used when dealing with unsecured data since the data will be present in a query string.

$post$ method

A method typically used when dealing with secure data or when dealing with a large amount of soft data.

$input$ element

The element used when creating text input fields, radio buttons, and checkboxes; it requires $type$ and $name$ attributes.

$type$ attribute

An attribute used to specify the kind of input desired, such as $radio$, $checkbox$, or $text$.

$name$ attribute

A unique identifier for an element required when submitting a form so that data can be organized into key-value pairs.

$maxlength$ attribute

An attribute used to set the maximum number of characters allowed for an input field.

email input

A specialist type of text input created by setting the $type$ to "email" which has built-in validation for valid email addresses.

password input

A type of text input created by setting the $type$ to "password" that masks entered text to hide it.

checkboxes

Form elements that allow users to select multiple values at a time, each requiring a unique $value$ attribute.

radio buttons

Form elements that share the same $name$ attribute value to ensure only one value can be selected by the user.

$label$ element

An element that associates text with a form element to improve accessibility for screen readers and allow selection by clicking on the text.

$for$ attribute

An attribute on a label element that must match the $id$ of the form element it is associated with.

$textarea$ element

An element used to capture larger amounts of text when more than one line of input is required.

$rows$ and $cols$ attributes

Attributes used to specify the size of a $textarea$ element.

$fieldset$ element

A semantic tag used to group related form elements together, especially within larger forms.

$select$ element

An element used for creating select boxes, typically for long lists where only one option should be selected.

$option$ element

An element provided inside a $select$ tag to define the various choices in a list.

$button$ element

An element used to interact with forms, requiring a $type$ attribute with values of "button", "reset", or "submit".

$placeholder$ attribute

An attribute that provides the user with hint text inside a textbox or textarea to help them decide what to type.

$required$ attribute

An HTML attribute applied to form elements to ensure the user provides a value before the form can be submitted.

$:valid$ pseudo selector

A CSS selector used to style form elements based on valid input values.

$:invalid$ pseudo selector

A CSS selector used to style form elements based on invalid input values.