Things I Learned from Learn to Code HTML & CSS, Lesson 10

Here are some things I learned from Lesson 10: Building Forms of Learn to Code HTML & CSS by Shay Howe.

Text Fields & Textareas

Text Fields

It is best practice to give an <input> element a name attribute.

Below is a list of the new HTML5 input types:

  • color
  • email
  • range
  • time
  • date
  • month
  • search
  • url
  • datetime
  • number
  • tel
  • week

Textarea

The <textarea> element has start and end tags that can wrap plain text. Because it only accepts one type of value, the type attribute doesn’t apply here.

The <textarea> element has two sizing attributes: cols for width in terms of the average character width and rows for height in terms of the number of lines of visible text. The size of a textarea, however, is more commonly identified with CSS.

Multiple Choice Inputs & Menus

Radio Buttons

Each radio button element should have the same name attribute value so that all of the buttons within a group correspond to one another.

To preselect a radio button for users we can use the Boolean attribute checked.

Drop-Down Lists

The name attribute resides on the <select> element, and the value attribute resides on the <option> elements.

Drop-down menus can use the selected Boolean attribute to preselect an option for users.

Multiple Selections

The Boolean attribute multiple allows a user to choose more than one option from the list at a time. Additionally, using the selected Boolean attribute on more than one <option> element will preselect multiple options.

The size of the <select> element should be adjusted appropriately to allow for multiple selections. It may be worthwhile to inform users to use the Shift and Ctrl keys when making multiple selections.

Form Buttons

Submit Button

As an <input> element, the submit button is self-contained and cannot wrap any other content. If more control over the structure and design of the input is desired, the <button> element may be used.

By default, the <button> element acts as if it has a type attribute value of submit.

Other Inputs

Hidden Input

Hidden inputs provide a way to pass data to the server without displaying it to users. They are typically used for tracking codes, keys, or other information that is helpful when processing the form. This information can be found by viewing the source code of the page. It should therefore not be used for sensitive or secure information.

File Input

Styling an <input> element that has a type attribute value of file is a tough task with CSS. Each browser has a default input style. JavaScript and other solutions can be employed to allow for file input, but they are more difficult to construct.

Organizing Form Elements

Label

The value of the for attribute should be the same as the value of the id attribute on the form control the label corresponds to. This allows users to click on the <label> element to bring focus to the proper form control.

The <label> element may also wrap form controls. Doing so allows omission of the for and id attributes.

Fieldset

Fieldsets group form controls and labels into organized sections. The <fieldset> is a block-level element that wraps related elements inside a form for better organization. By default, they include a border outline which can be modified using CSS.

Legend

A legend provides a caption, or heading, for the <fieldset> element. The <legend> element wraps text describing the form controls that fall within the fieldset. The markup should include the <legend> element directly after the opening <fieldset> tag. On the page, the legend will appear within the top left part of the fieldset border.

Form & Input Attributes

Disabled

The disabled Boolean attribute turns off an element or control so that it is not available for interaction or input. It also won’t send any value to the server.

Applying the disabled Boolean attribute to a <fieldset> element will disable all of the form controls within the fieldset.

Required

Error message styles are controlled by the browser and cannot be styled with CSS. Invalid elements and form controls, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.

Validation also occurs specific to a control’s type. For example, an element with a type attribute value of email will require not only that a value exists within the control, but also that it is a valid email address.

Additional Attributes

Other form and form control attributes include the following:

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step

Leave a Reply

Your email address will not be published. Required fields are marked *