leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML forms and inputs

Estimated reading: 7 minutes 12 views

HTML forms are used to collect user input.

An HTML form represents an area in a document that contains interactive controls that send information collected by the user to a Web server.

For instance


The following example creates a form with two input boxes:< form action = “” >

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


 Username: <input type="text" name="user"><br>
    Password: <input type="password" name="password">

(More examples can be found at the bottom of this page.)

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 (select), radio-buttons (radio-buttons), checkboxes (checkbox) and so on.

We can use the <form> tag to create a form:


    input element

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.

Next, we introduce several commonly used input types.

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 a text field is 20 characters.

password field

The password field is defined by the tag <input type=”password”> :


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

The browser display effect is as follows:Password:

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

Radio Buttons

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


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

The browser display effect is as follows:male


<input type=”checkbox”> defines a checkbox.

Check boxes to select one or more options:


    <input type="checkbox" name="vehicle" value="Bike"> I like bikes <br>
            <input type="checkbox" name="vehicle" value="Car"> I like cars

The browser display effect is as follows:i like bikes
i like cars

Submit button

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

When the user clicks the OK button, the content of the form is sent to the server. The action attribute action of the form defines the file name of the server.

The action attribute will perform related processing on the received user input data:


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

The browser display effect is as follows:Username:

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

There is a method attribute in the above example, which is used to define how the form data is submitted, which can be the following values:

  • post : Refers to the HTTP POST method, the form data will be included in the form body and then sent to the server for submitting sensitive data such as username and password.
  • get : The default value, which refers to the HTTP GET method. The form data will be appended to the URL of the action attribute, with ? as the delimiter, which is generally used for insensitive information such as pagination. For example: https://www.runoob.com/?page=1, where page=1 is the data submitted by the get method.


<!– The following form uses a GET request to send data to the current URL, and the method defaults to GET. –>

< form >
  < label > Name:
    < input name = "submitted-name" autocomplete = "name" >
  < / label >
  < button > Save < / button >
< / form >

<!– The following form uses POST Request to send data to the current URL. –>

< form method = "post" >
  < label > Name:
    < "submitted-name" autocomplete = "name" >
  < / label >
  < button > Save < / button >
< / form >

<!– form uses fieldset, legend, and label labels –>

<form method="post">
        <legend>Title Select me<//</legend>
                <label><input type="radio" name="radio">label>

more examples

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

Checkboxes (Checkboxes)
The user can check or uncheck the checkbox in an HTML page.

Simple drop-down list
A drop-down list box is a selectable list in an HTML page.

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

Text Area (Textarea)
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
You can customize the text on the button.

form instance

Form with Border
This example shows how to draw a box with a title around the data.

Form with Input Box and Confirm Button
This example demonstrates how to add a form to a page. This form contains two input boxes and a confirm button.

Form with Check Boxes
This form contains two check boxes and a confirm button.

Form with radio buttons
This form contains two radio buttons and a confirm button.

Sending an email from a form
This example demonstrates how to send an email from a form.

HTML form tags

New : HTML5 new tab

<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

Leave a Comment