Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

HTML <input> tags


May 04, 2021 HTML Reference Manual


Table of contents


HTML slt;input> tags

Labels are used to create interactive controls that are web-based and can receive data and information from users.

A simple HTML form with two text input boxes and a submit button:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>

Try it out . . .
(More examples can be viewed at the bottom of this page)

Browser support

HTML <input> tags HTML <input> tags HTML <input> tags HTML <input> tags HTML <input> tags

Most browsers currently support the hashtag.


Label definition and instructions for use

The label specifies the input fields in which the user can enter the data.

The element is used in the element to declare the input control that allows the user to enter data.

Input fields can be changed in a number of ways, depending on the type property. It can be text fields, check boxes, masked text controls, turn buttons, buttons, and so on.


Tips and comments

Note: The element is empty and contains only label properties.

Tip: You can use the element to define the label of the element.


The difference between HTML 4.01 and HTML5

In HTML 4.01, "align" data is no longer in use. T his property is not supported in HTML5. You can use CSS to define the alignment of the elements.

In HTML5, several properties have been added, and corresponding values have been added.


The difference between HTML and XHTML

In HTML, the label does not end the label.

In XHTML, the label must be turned off correctly.


Property

New : HTML5 new label.

Property Value Describe
accept audio/*video/*image/*MIME_type Specify the type of document submitted through the file. (Only for type "file")
align leftrighttopmiddlebottom HTML5 is obsolete and not approved of use. S pecifies the alignment of image inputs. (For type only, "image")
Alt text Define alternative text for image input. (For type only, "image")
autocomplete New onoff The autocomplete property specifies whether the element input field should enable autocomplete.
autofocus New autofocus The property specifies that the element should automatically get focus when the page is loaded.
checked checked The checked property specifies that the element should be preselected when the page is loaded. (Only for type-"checkbox" or type-"radio")
disabled disabled The disabled property specifies the element that should be disabled.
form New form_id The form property specifies one or more forms to which the element belongs.
formaction New Url The property specifies the URL of the file that processes the input control when the form is submitted. (Only for type-"submit" and type-"image")
formenctype New application/x-www-form-urlencodedmultipart/form-datatext/plain The property specifies how form data is encoded when it is submitted to the server (only for type-"submit" and type=image).
formmethod New getpost Defines the HTTP method for sending form data to the action URL. (Only suitable for type-"submit" and type-"image")
formnovalidate New formnovalidate The formnovalidate property overrides the novalidate property of the element.
formtarget New _blank_self_parent_topframename A rule that indicates where the name or keyword that received the response is displayed after the form is submitted. (Only suitable for type-"submit" and type-"image")
height New pixels Specifies the height of the element. (For type only, "image")
list New datalist_id The property refers to the element, which contains predefined options for the element.
max New numberdate The property specifies the maximum value of the element.
maxlength number The property specifies the maximum number of characters allowed in the element.
min New numberdate The property specifies the minimum value of the element.
multiple New multiple The property specifies that the user is allowed to enter multiple values into the element of the .
name text The name property specifies the name of the element.
pattern New Regexp The pattern property specifies a regular expression that validates the value of the element.
placeholder New text The placeholder property specifies a short hint that describes the expected value of the input.
readonly readonly The readonly property states that the input field is read-only.
required New required The property specifies that the input field must be filled in before the form is submitted.
size number The size property specifies the visible width of the element in characters.
Src Url The src property specifies the URL of the image that appears as the submit button. (For type only, "image")
step New number The step property specifies the legal numeric interval of the element.
type button
checkbox
color
date
Datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
Url
week
The type property specifies the type of element to display.
value text Specifies the value of the value of the element.
width New pixels The width property specifies the width of the element. (For type only, "image")


Global properties

The label supports global properties and views the full property sheet HTML global properties.


The event property

The label supports all HTML event properties.


HTML <input> tags Online instance
Create a text field

This example shows how to create a text field on an HTML page. Users can write text in a text field.

Create a password field
This example shows how to create a password domain for HTML.

Radio buttons

This example shows how to create a turn button in HTML.

Check box (Checkboxes)

This example shows how to create check boxes in an HTML page. Users can select or uncheck the box.

A simple pull-down list

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

Preselect the pull-down list

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

A form with a border

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

Form with input box and confirmation button

This example shows how to add a form to a page. This form contains two input boxes and a confirmation button.


Read about it

input talk