Forms and Inputs

Types of Forms

Forms could be used to send an email, share on a social media network, add the submission to an email list, add information to a database, or a variety of other actions.

<form>

When a visitor fills out a form element and submit the data, that information is sent to a server script. That script will recieve that information and process it, based on what the programmer wants the script to do. Without programming scripts on the back end (or some JavaScript on the front-end) forms won’t actually do anything useful.

<form action="form.php" method="get">

action

Directs the form response data to the designated page; usually to a server-side script where the data can be processed.

method

• get appends a query string. The query string can then be accessed with either client-side or server-side programming. The resulting page can be bookmarked. Do not put sensitive information into query strings.
• post submits the data from the form to the page, but it cannot be accessed on the client-side. Bookmarking the page will not reserve the data.

Inputs

Included within the <form> element, the <input> elements are a means allow visitors to enter information.

<input>

text

radio

Allows the visitor to choose one item from a list.

checkbox

Allows the visitor to pick zero or more choices.

number

The number input type will only accept numerical data. On mobile devices it may call up the numeric keyboard.

email

The email input type accepts email addresses. On mobile devices it may call up the email keyboard.

date

The date input type accepts date information. It may call up a date picker when interacted with.

color

The color input type accepts color information. It may call up a date picker when interacted with.

<textarea>

The <textarea> element allows longer bodies of text to be entered.

<hidden>

The hidden type allows you to store values hidden from the visitor.

<button>

The <button> element creates a button that interacts with the parent form. The type could be set to either submit, reset, or button

submit

Submits the current form.

reset

Resets the current form.

button

Just a clickable button. This would require JavaScript to perform an action.

Example Forms

Here’s an example, the HTML Hobbyist Announcements List page, with form and input elements that use a third-party script from my web host to actually collect email addresses for people interested in receiving announcements. The subscribing and unsubscribing is all handled automatically in the script.

Here’s another example, the HTML Hobbyist Contact page, with form and input elements that use a third-party script hosted on another server to actually send the information to me by email.

Here’s an example of inputs using JavaScript to make changes to the HTML page. I’ll go into more detail about JavaScript when I add a JavaScript section to this web site.

Forms and inputs are incredibly useful, but require the programming to make them actually work.