Forms and Inputs

Forms and inputs allow a visitor to enter data that can be sent to a server for processing. Before JavaScript, forms and input elements were primarily how interactivity was provided.

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.


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">
Directs the form response data to the designated page; usually to a server-side script where the data can be processed.
  • 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.


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




Allows the visitor to choose one item from a list.


Allows the visitor to pick zero or more choices.


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


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


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


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


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


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

<input type="hidden" id="hidden_value" name="hidden_value" value="hidden value" />


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

Submits the current form.
Resets the current form.
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.