search

Home >Web Front-end >HTML Tutorial >HTML forms and input text boxes

HTML forms and input text boxes

黄舟
黄舟Original
2016-12-22 14:41:263013browse

HTML forms are used to collect various types of information entered by users.

1) Example

Text field
This example demonstrates how to create a text field in an HTML page. The user can enter text in the text field.

Password Box
This example demonstrates how to create a password input box in an HTML page.

(More examples are provided later in this article)

2) Form

A form is a form field that contains various elements within the form.

Form elements within form fields allow users to enter relevant information (such as text input boxes, text areas, drop-down lists, radio buttons, check buttons, etc.).

Forms are defined by the tag

.







3) Input

The most commonly used tag in the form is the input tag . The type of input is specified by the attribute type. The most commonly used input types are as follows (shown in 4 to 6).

4) Text field

When users need to enter letters, numbers, etc. in the form, they need to use text fields.



First name:



Last name:



The execution result of the above code:

Note: The form itself is not displayed, and in most browsers, the default number of characters that can be entered in the text field is 20.

5) Radio buttons

Radio buttons are used to provide users with an interactive entrance to select one item from limited options.



value="male">Male


value="female">Female


The above code execution result:

Note that only one of the options can be selected.

6) Checkbox

Checkbox is used to provide users with an interactive entrance to select several items within limited options.



I have a bike:
name="vehicle"
value="Bike" />


I have a car:
name="vehicle"
value="Car" />


I have an airplane:
name=" vene "l value =" airplane "/& gt;
& lt;/form & gt;


The above code execution results:

7) The ACTION property and submitting form (submit button) When you click the submit form button ("Submit"), the content in the form will be sent to another file (the file is usually a script) for corresponding processing. The action attribute of the form defines which script file will process the content submitted by the form (generally, the name or full path of the script file can be assigned to the action attribute). Script files usually process data submitted from forms.

action="html_form_action.asp"

method="get">
Username:






The above code execution result:

If you enter some content in the text input box above, and then click the submit button ("Submit "), you will submit the information you entered to a page called "html_form_action.asp" (this is a script), and this script file will output the collected information to you.

{

Notice that an error report page will be generated here, because the script file here: "html_form_action.asp" is not a file in the Sina blog system, it is just for demonstration. In your website, you must specify your own script files.

}
8) More examples

Checkbox
This example demonstrates how to create a checkbox in an HTML page. For each item in the check box, the user can check or not check.

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

Drop-down list box
This example demonstrates how to create a simple drop-down list box in an HTML page. A drop-down list box is actually a list box that provides options.

Specify an option as the drop-down list box of the current option
This example demonstrates how to create a drop-down list that specifies the currently selected item.

File Area
This example demonstrates how to create a text area (multi-line text input control). Users can enter text into the text area, and there is no limit to the number of characters entered.

Create a button
This example demonstrates how to create a button and define the description text on the button yourself.

Dataset
This example demonstrates how to create a dataset of the same nature, with all data surrounded by a border.

9) Form class example

Form with text input field and submit button
This example demonstrates how to add a form to an HTML page, which includes text input field and submit button.

Form with Checkboxes
This example demonstrates a form with two checkboxes and a submit button.

Form with Radio Buttons
This example demonstrates a form with two radio buttons and a submit button.

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

10) Form related tags

tag

Description

Define user input form

Define input field