HTML Web Forms

With web forms, you can collect information from users. Web forms can collect anything like name, e-mail address, message, images, files from your computer, etc.

When you fill out a form, the information is sent to the web server. What exactly the web server does with the information is up to the programs running on the server.

In HTML, forms are created with the <form> element. The action attribute tells the form where to go or what to do when the user clicks Submit. For example,

<form action="#">
<input type="text" name="emailaddress">
<input type="submit" name="submit">
</form>

Input Elements

There are many ways to get input through a form, each with its own specific name or type of input.

text: one-line text input field

textarea: multiple lines text input field

password: password field; The characters in a password field are masked (shown as asterisks or circles)

submit: button for submitting form data to a form-handler; The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute.

reset: button that will reset all form values to their default values

radio: select only one of a limited number of choices

checkbox: select zero or more options of a limited number of choices

file: file with a MIME type and optionally a file name

hidden: String that is not displayed to the user

button: defines a button

HTML5 Input Types

HTML5 added several new input types. New input types that are not supported by older web browsers behave as text input.

  1. color
  2. date
  3. datetime-local
  4. email
  5. month
  6. number
  7. range
  8. search
  9. tel
  10. time
  11. url
  12. week

datetime: A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.

datetime-local: A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.

date: A date (year, month, day) encoded according to ISO 8601.

month: A date consisting of a year and a month encoded according to ISO 8601.

week: A date consisting of a year and a week number encoded according to ISO 8601.

time: A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.

number: This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

range: The range type is used for input fields that should contain a value from a range of numbers.

email: This accepts only email value. This type is used for input fields that should contain an e-mail address.

url: This accepts only URL value. This type is used for input fields that should contain a URL address.

Dropdown List

he <select> element defines a drop-down list. The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option.

<select name="planet">
<option value="venus">Venus</option>
<option value="mars">Mars</option>
<option value="earth">Earth</option>
<option value="saturn">Saturn</option>
</select>

Other Elements

The <fieldset> element is used primarily for layout and accessibility. The <legend> element creates the heading of the form and a box surrounds the inputs in the form. Like <fieldset>, the <legend> element is entirely optional.

The <div> elements used to create each row of inputs. The <label> elements are used to show friendly name of what an input does.

<form action=”#”>
<fieldset>
<legend>Form Information</legend>
<div>
<label for=”username”>Name:</label>
<input id=”username” type=”text” name=”username”>
</div>
<div>
<label for=”email”>E-mail Address:</label>
<input id=”email” type=”text” name=”email”>
</div>
</fieldset>
</form>

Form Element

The action of a form points to the server program that will handle the input from the form. It’s where the form sends its data. 

The method attribute tells the form how to send the data to the server. There are two primary methods for this - GET and POST. The GET method is appropriate for small forms, whereas the POST method is appropriate for larger forms or ones that need to send a lot of information.

When you use a GET method, the form’s contents are sent as part of the URL.

Placeholder Attribute

HTML5 introduced a new attribute called placeholder. This attribute provides a hint to the user of what can be entered in the field.

<input type="text" name="search" placeholder="Search the web" />

Required Attribute

HTML5 introduced a new attribute called required which insists to have a value.

<input type="text" name="search" required />
Subscribe for Free Updates

Please enable the javascript to submit this form