HTML forms and input

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 boxes, checkboxes, and so on.

Forms use form tags <form> to set up:

<form>
.
*input element*
.
</form>

HTML form-input element

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

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

Text field

The text field is set by the < input type= “text” > tag, which is used when users type letters, numbers, and so on into the form.

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

The browser displays as follows:

First name: Last name:

Note: the form itself is not visible. Also, in most browsers, the default width of the 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 as follows:

Password:

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

Radio button

The < input type= “radio” > tag defines the form radio check box option

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

The browser displays as follows:

Male

Female

Check box

< input type= “checkbox” > defines a check box. The user needs to select one or more 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 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 contents of the form are transferred to another file. The action attribute of the form defines the file name of the destination file. This file, defined by the action attribute, usually processes 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 as follows:

Username: if you type a few letters in the text box above, and then click the confirm button, the input data will be transferred to the “html_form_action.php” page. The page displays the results of the input.

HTML form label

New: new HTML5 tag