Creating Form

For more details see HTML forms guide - MDN.

HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc. Most of the time that data is sent to the web server, but the web page can also intercept it to use it on its own.

An HTML Form is made of one or more elements. Those elements can be text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Most of the time, those widgets are paired with a label that describes their purpose.

We HTML form by using <form> tag in the following way:

<form action="Script URL" method="GET|POST">
    form elements like input, textarea etc. div and p can be also used.
</form>

Where:

• action attribute - Defines the location (an URL) where the form's collected data should be sent.
• method attribute - Defines which HTTP method to send the data with (it can be "get" or "post").
  get is used for shorter chunks of non-sensitive information - you might see the information you have submitted in a web site’s search to appear in the web address of its search results page, for example.
  post is used for lengthier, more secure submissions, such as in contact forms.

There are additional attributes for the form tag.

Form Controls

For more details see The native form widgets - MDN.

There are different types of form controls that you can use to collect data using HTML form:

• Text Input
• Selections
  • Checkboxes
  • Radio Box
  • Select Box
• Buttons
• ...

The basic controls are shown in the following figures.

Text input fields are the most basic form elements. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs.

A single line text field is created using an <input> element whose type attribute value is set to text (also, if you don't provide the type attribute, text is the default value). HTML5 enhances the basic single line text field by adding special values for the type attribute. Those values still turn an <input> element into a single line text field but they add a few extra constraints and features to the field, e.g type="email", type="password", ....

A multi-line text field is specified using a <textarea> element, rather than using the <input> element.

A select box is created with a <select> element with one or more <option> elements as its children, each of which specifies one of its possible values.

Form Element Attributes

You can attach some attributes to the form elements to define their behaviour. For example, field size, maximal value, read only, ....

See for example MDN input for input tag atttributes.

The following figure demonstrates some attributes.

Form Organization

We define label with asociation to the specific input id. Interaction with label moves the focus to input.

We define fieldset with/without legend logically to combine a group of fields. You can style each fieldset.

Form Commands