Record Class

Labels

Labels are used to make inputs more accessible.

<label>Content</label>

Attributes

• for - the ID of the corresponding input

The Button Element

The button element is a clickable element inside of your HTML. The button element can contain content of multiple types inside it.

Attributes

• type - defines default behavior of the button.
  • button
  • reset - Clears inputs when in a form
  • submit - Triggers a form submission
• Name
• Value

Good Examples of CSS3 buttons

HTML Inputs

Input elements are the primary way we retrieve information from the user.

<input type="text" value="" />

Input Types

• text
• password
• radio
• checkbox

Input Attributes

There are many different attributes available to us, but we are only going to focus on the basics

• id and class
• type - sets the behavior of the input
• name - represents the input's name inside a form.
• value - represents the current text or value for the input
• placeholder - text displayed before the element is filled out.

The Text Input

The text input is the most commonly used html input you will use. It represents a single line text.

See the Pen UA-ITR-Froms3 by Jon (@Middaugh) on CodePen.

The Password Input

The Password Input is very similar to the text input, but any text put in the textbox will be represented with circles or asterisks.

See the Pen UA-ITR-Froms4 by Jon (@Middaugh) on CodePen.

Radio Input

Radio inputs provide the user a list of items where only one can be selected

Important Attributes

• name
• value
• checked

     Yes

 No

 Maybe    

See the Pen UA-ITR-From5 by Jon (@Middaugh) on CodePen.

Check box Input

Radio inputs provide the user a list of items where only one can be selected

Important Attributes

• name
• value
• checked

    
 Yes

 No

    
    

The select element

Selects, or dropdowns, are used to provide the user the ability to select one of many options. Selects are composed posed of option tags.

The option element

Option are only used inside select elements.

Attributes

• selected
• value

Select Example

    

    Car
    Van
    Truck
    SUV

    
    

See the Pen UA-ITR-From6 by Jon (@Middaugh) on CodePen.

The Form Tag

<form> Content </form>

Accepted Attributes

• action - Represents the url where we are sending the data.
• method - specifies the HTTP method used
  • get
  • post
• name

The Form Tag

• autocomplete
  • on
  • off
• novalidate

    First Name
    

    Last Name
    

    Submit

Questions on Review?

Number Input

The number input allows only numbers. On a mobile device, it will bring up a numeric keyboard.

Email Input

The email input provides in browser validation for the user.

Hidden Input

Hidden inputs act as they are named. They are hidden on the page, but are submitted by the form

File Upload

Allows the user to select a file off their computer for upload

Search Input

Behaves similar to a text field. Different browsers handle it in different ways.

Telephone Input

An input for telephones. Requires a pattern for proper implementation.

URL Input

Behaves similar to a text field. Phones add a '.com'

New HTML Attributes

Some of these were introduced in HTML5 and help enforce rules without JavaScript

autocomplete

Enables or disables autocomplete on an input box. It accepts the value of "on" or "off"

autofocus

Tells the browser what input should have focus when the page is loaded. It does not require a value

min and max

Sets the min and maximum values a numeric input can have

maxlength

Sets the maximum number of characters for an input

required

Tells the browser that this element must be filled out before we submit the form. It does not require a value.

See the Pen UA-ITR by Jon (@Middaugh) on CodePen.

The Attribute Selector

The attribute selector allows you to select elements by their attributes or attribute values.

Example

[attr] { /*css*/ }

[target] { /*css*/ }

a[target] { /*css*/ }

Link

Link

Working Example

See the Pen UA-ITR-ATTR-Selector by Jon (@Middaugh) on CodePen.

Attribute Value Selector

[attr="value"] { /*css*/ }

[type="text"] { /*css*/ }

input[type="text"] { /*css*/ }

Working Example

See the Pen EoqQvx by Jon (@Middaugh) on CodePen.

Additional Attribute Selectors

Attribute Starts With

[href^="https"] { /*css*/ }

Google

Attribute Ends With

[href$=".com"] { /*css*/ }

Google

Attribute Contains

[href*="google"] { /*css*/ }

Google

How do we make forms look less boring?

Most inputs have default styling that we've been looking at for years.

We override the default values.

Styling Buttons

See the Pen MrNQox by Jon (@Middaugh) on CodePen.

Styling inputs

See the Pen WdVMOy by Jon (@Middaugh) on CodePen.

Exercise 14