this section of the page demonstrates all the standard HTML form elements. the explanations are visible on the page to help explain what each one does.

General Text Inputs

These elements are used for simple, typed information.

User Name:

This is a standard text input. It is the most common form element and is used for a single line of text like a name or a search query.

Password:

This is a password input. It hides the text with dots or stars for security. This is different from a simple text input, which shows everything your typing.

Email Address:

Website URL:

Phone Number:

These are all specialized text inputs. The email input validates for an "@" symbol, the url input checks for a proper website address, and the tel input is optimized for phone numbers, often bringing up a number keypad on mobile devices. They are different from a regular text input because they enforce a specific format.

Your Message:

This is a textarea. unlike a text input, a textarea is a large box used for multiple lines of text. Use it for comments, messages, or detailed descriptions.

Numbers and Ranges

These elements area used for numeric input, either exact or a range.

Age:

This is a number input. It is used for exact values like an age or a quantity. The browser prevents you from typing letters.

Satisfacton (1-10):

This is a range input. It is a sliding bar for picking an approximate value on a scale. It's different from a number input, which is used for precise values.

Dates and Times

These elements provide calendars and clocks to select time-related information.

Birthday:

Wake-up Time:

Meeting Time:

Use the date input for a specific calendar day, the time input for a specific time of day, and the datetime-local input to select both a date and a time at once.

Credit Card Expiry Month:

Project Start Week:

Use the month input to select just a month and year. Use the week input to select a specific week number and year, Both are different from the date input, which includes a specific day.

Selections

These elements give the user options to choose from.

I accept the terms.

This is a checkbox. Use it when a user can select zero, one, or **many** options from a list.

Favorite Pet:

Dog Cat

These are radio buttons. Unlike a checkbox, a user can only select **one** option from a group. All radio buttons in a group must have the same `name` attribute.

Country:

This is a select element, also known as a dropdown menu. It allows the user to choose one option, and it's great for saving space when you have many choices.

Other inputs

These elements handle other specialized types of data.

Favorite Color:

This is a color input. It brings up a color picker tool for the user to select a specific color.

Upload a File:

This is a file input. It creates a button that allows a user to upload a file from their computer.

This is a hidden input. It is invisible to the user and is used to pass data that you don't want the user to see or change, like a secret ID number.

Buttons

These elements perform actions.

A submit button sends all the form data to a server. A reset button clears the form fields. A standard **button** is used for running custom JavaScript and does not submit the form.

t1a05-forms-caleb.html