HTML Forms

HTML forms and inputs


HTML forms are used to collect different types of user input. They can be used as an interface for a web application, for example, or to send data across the web.


HTML form

A form is an area that contains form elements.

Form elements allow users to enter content in the form, such as: text fields (textarea), drop-down lists, radio-buttons (radio-buttons), checkboxes (checkboxes) and so on.

Forms are set up using the form tag <form>:

<form action="file.php" method="post">
..input element..
</form>

HTML Form – Input Elements

The form tag used in most cases is the input tag (<input>).

The input type is defined by the type attribute (type). The most frequently used input types are as follows:


Text Fields

The text field is set by the <input type=”text”> tag. When the user wants to type letters, numbers, etc. in the form, the text field is used.

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

The browser displays the following:

First name:
Last name:

Note: The form itself is not visible. Also, in most browsers, the default width of text fields is 20 characters.


password field

Password fields are defined by the tag <input type=”password”>:

<form>
Password: <input type="password" name="pwd">
</form>

The browser display effect is as follows:

Password:

Note: Password field characters are not displayed in clear text, but are replaced by asterisks or dots.


Radio Buttons

The <input type=”radio”> tag defines the form radio options.

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

The browser display effect is as follows:

Male
Female

Checkboxes

<input type=”checkbox”> defines checkboxes. The user needs to select one or several options from a number of given choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

The browser display effect is as follows:

I have a bike
I have a car

Submit Button

<input type=”submit”> defines the submit button.

When the user clicks the confirm button, the content of the form is transferred to another file. The action attribute of the form defines the filename of the destination file. This file, defined by the action attribute, usually performs the associated processing on the received input data. 

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

The browser display effect is as follows:

Username:

If you type a few letters in the text box above and click the OK button, the input data will be sent to the “html_form_action.php” page. The page will display the results entered.


Try it more examples

Radio buttons
This example demonstrates how to create radio buttons in HTML.

Checkboxes (Checkboxes)
This example demonstrates how to create check boxes in an HTML page. The user can check or uncheck the checkbox.

Simple drop-down list
This example demonstrates how to create a simple drop-down list box in an HTML page. A drop-down list box is a selectable list.

Preselected Dropdown List
This example demonstrates how to create a simple dropdown list with preselected values.

Text Area (Textarea)
This example demonstrates how to create a text area (multi-line text input control). The user can write text in the text field. There is no limit to the number of characters that can be written.

Creating a button
This example demonstrates how to create a button. You can customize the text on the button.


HTML form tags

Labeldescribe
<form>Define a form for user input
<input>define input fields
<textarea>Define the text field (a multi-line input control)
<label>Defines the tag of the <input> element, usually the input title
<fieldset>Defines a set of related form elements and encloses them with an outline
<legend>Defines the title of the <fieldset> element
<select>Defines a dropdown list of options
<optgroup>Define option groups
<option>Define the options in the drop-down list
<button>define a click button
<datalist>NewSpecifies a list of predefined input control options
<keygen>NewDefines the key pair generator field of the form
<output>Newdefine a calculation result