HTML Forms and inputs

HTML form

A form is a region that contains form elements.

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

The form uses the form label <form> to set:

<form>
.
INPUT Element
.
</form>

HTML form-INPUT element

In most cases, the form label used is the input label (<input>).

The input type is defined by the type attribute. Most of the input types that are often used are as follows:

Text fields

Text fields are set by <input type= "text" > tags, and text fields are used when the user is typing letters, numbers, and so on in the form.

<form>
First Name: <input type= "text" name= "FirstName" ><br>
Last Name: <input type= "text" name= "LastName" >
</form>

The browser appears as follows:

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

Password field

The password field is defined by the label <input type= "Password" >:

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

The browser displays the following effects:

Note: The password field characters are not displayed in clear text, but instead are replaced with asterisks or dots.

Radio button (Radio Buttons)

<input type= "Radio" > tag defines the form selection box option

<form>
<input type= "Radio" name= "Sex" value= "male" >Male<br>
<input type= "Radio" name= "Sex" value= "female" >female
</form>

The browser displays the following effects:

check box (checkboxes)

<input type= "checkbox" > Defines the check box. The user needs to select one or several options from several given selections.

<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 displays the following effects:

Submit button (Submit buttons)

<input type= "Submit" > defines the Commit button.

When the user clicks the Confirm button, the contents of the form are transferred to another file. The action properties of the form define the file name of the destination file. This file, which is defined by the action attribute, is usually processed in connection with the input data received. :

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

The browser displays the following effects:

If you type a few letters in the text box above and click the Confirm button, the input data will be transferred to the "html_form_action.php" page. The page will display the results of the input.

More examples

Radio button (Radio buttons)
This example shows how to create a radio button in HTML.

check box (checkboxes)
This example shows how to create a check box in an HTML page. The user can select or deselect the check box.

Simple drop-down list
This example shows how to create a simple drop-down list box in an HTML page. The drop-down list box is an optional list.

Preselection drop-down list
This example shows how to create a simple drop-down list with preselected values.

Text field (Textarea)
This example shows how to create a text field (multi-line text input control). The user can write text in the text field. The number of characters that can be written is not restricted.

Create button
This example shows how to create a button. You can customize the text on the button.

Form instances

A form with a border
This example shows how to draw a box with a caption around the data.

form with input box and confirmation button
This example shows how to add a form to a page. This form consists of two input boxes and a confirmation button.

A form with a check box
This form contains two check boxes and a confirmation button.

Form with radio button
This form consists of two radio boxes and a confirmation button.

Send e-mail from forms
This example shows how to send an e-mail message from a form.

HTML form Labels

NEW:HTML5 New Tags

label	Description
<form>	Define a form for user input
<input>	Defining input fields
<textarea>	Define a text field (a multiline input control)
<label>	Defines the label for the <input> element, typically the input title
<fieldset>	Defines a set of related form elements and uses the outer box to contain them
<legend>	Defines the title of the <fieldset> element
<select>	A list of drop-down options is defined
<optgroup>	Defining an option group
<option>	Define options in the drop-down list
<button>	Define a click button
<datalist>New	Specify a predefined list of input control options
<keygen>New	Defines the key pair generator field for the form
<output>New	Define a calculation result

HTML Forms and inputs