            Coding With Fun

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

HTML5 form properties

May 03, 2021 HTML5

Table of contents

1. HTML5 form properties

2. HTML5 new form properties

3. the autocomplete property

4. the property of the .lt;form> novalidate

5. the property of the autofocus

6. the property of the .lt;input> form

8.. the property of the .lt;input> formaction

10.. the property of the .lt;input> formenctype

12.. the property of the formmethod

14.. the property of the formnovalidate

16.. the property of the .lt;input> formtarget

18.. the high and width properties

20.. The list property

22.. the min and max properties

24.. the property of the .lt;input> multiple

26.. the property of the slt;input> pattern

28.. the property of the placeholder

30.. the property of the .lt;input> requireded

32.. the property of the .lt;input> step

34.. HTML5 . . .

HTML5 form properties

In the previous sections, we covered HTML5 form elements, and further, in this section, you'll learn about the form properties of HTML5.

HTML5 new form properties

HTML5's and the labels add several new properties.

New properties:

autocomplete
novalidate

New properties:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

the autocomplete property

The autocomplete property states that the form or input domain should have autocomplete.

When the user starts typing in the auto-completion domain, the browser should display the options to fill in in that domain.

Tip: The autocomplete property may be turned on in the form element and off in the input element.

Note: autocomplete applies to the labels, as well as the following types of labels: text, search, url, telephone, email, password, datepickers, range, and color.

Turn autocomplete on in HTML form (an input field turns autocomplete off):

<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

Try it out . . .

Tip: In some browsers, you may need to enable auto-completion for the property to take effect.

the property of the .lt;form> novalidate

A boolean property of the novalidate property.

The novalidate property states that the form or input fields should not be validated when submitting a form.

There is no need to validate the submitted form data

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

Try it out . . .

the property of the autofocus

The autofocus property is a boolean property.

The autofocus property specifies that the domain automatically gets focus when the page is loaded.

Let the "First name" input field focus automatically when the page is loaded:

First name:<input type="text" name="fname" autofocus>

Try it out . . .

the property of the .lt;input> form

The form property specifies one or more forms to which the input field belongs.

Tip: To refer to more than one form, use a space-separated list.

The input field outside the form refers to HTML form (the input form is still part of the form):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Try it out . . .

the property of the .lt;input> formaction

The formaction property is used to describe the URL address submitted by the form.

The formaction property overrides the action property in the element.

Note: The formaction property is used for type-"submit" and type-"image".

The following HTMLform form contains submit buttons for two different addresses:

<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="Submit"><br>
<input type="submit" formaction="demo-admin.php"
value="Submit as admin">
</form>

Try it out . . .

the property of the .lt;input> formenctype

The formenctype property describes the data encoding that the form is submitted to the server (only for the form in the form of the method"post" form)

The formenctype property overrides the enctype property of the form element.

Note: This property is used in conjunction with type"submit" and type=image.

The first submission button has sent form data by default, and the second submit button sends form data in the "multipart/form-data" encoding format:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

Try it out . . .

the property of the formmethod

The formmethod property defines how forms are submitted.

The formmethod property overrides the method property of the element.

Note: This property can be used with type-"submit" and type-"image".

Redefining instances of how forms are submitted:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="Submit using POST">
</form>

Try it out . . .

the property of the formnovalidate

The novalidate property is a boolean property.

The novalidate property describes that the element does not need to be validated when the form is submitted.

The formnovalidate property overrides the novolidate property of the element.

Note: The formnovalidate property is used with the type "submit"

Forms for two submit buttons (use and not apply verification):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>

Try it out . . .

the property of the .lt;input> formtarget

The formtarget property specifies a name or a keyword to indicate the presentation after the form submission data is received.

The formtarget property overrides the target property of the element.

Note: The formtarget property is used in conjunction with type "submit" and type "image".

A form of two submit buttons, displayed in a different window:

<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="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

Try it out . . .

the high and width properties

The height and width properties specify the height and width of the image used for the image type.

Note: The height and width properties apply only to the image type of the label.

Tip: Images typically specify both height and width properties. I f the image sets height and width, the space required by the image is preserved when the page is loaded. W ithout these properties, the browser does not know the size of the image and cannot reserve the appropriate space. The picture changes the layout of the page during loading (although the picture is loaded).

An image submission button is defined, using the height and width properties:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Try it out . . .

The list property

The list property specifies the datalist of the input domain. Datalist is a list of options for the input domain.

Predefined values in slt;datalist>

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Try it out . . .

the min and max properties

The min, max, and step properties are used to specify qualifications (constraints) for input types that contain numbers or dates.

Note: The min, max, and step properties apply to the following types of labels: date pickers, numbers, and ranges.

The minimum and maximum value settings for the element:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Try it out . . .

the property of the .lt;input> multiple

The multiple property is a boolean property.

The multiple property specifies that multiple values can be selected in the element.

Note: The multiple property applies to the following types of hashtags: email and file. : email, and file.

Upload multiple files:

Select images: <input type="file" name="img" multiple>

Try it out . . .

the property of the slt;input> pattern

The pattern property describes a regular expression that validates the value of the element.

Note: Pattern properties apply to the following types of tags: text, search, url, tel, email, and password.

Tip: Is used for the global title property to describe the pattern.

Tip: You can learn about regular expressions in our JavaScript tutorial

The following example shows a text field that can contain only three letters (without numbers and special characters):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Try it out . . .

the property of the placeholder

The placeholder property provides a hint that describes the value expected by the input field.

A short prompt appears on the input field before the user enters the value.

Note: Placeholder properties apply to the following types of tags: text, search, url, telephone, email, and password.

Input field prompt text t:

<input type="text" name="fname" placeholder="First name">

Try it out . . .

the property of the .lt;input> requireded

The required property is a boolean property.

The required property states that the input field (cannot be empty) must be filled in before submission.

Note: The required property applies to the following types of tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.

Input field that cannot be empty:

Username: <input type="text" name="usrname" required>

Try it out . . .

the property of the .lt;input> step

The step property specifies a legal numeric interval for the input domain.

If step is "3", the legal number is -3, 0, 3, 6, and so on

Tip: The step property can create a zone value with the max and min properties.

Note: Step properties are used with the following type of type: number, range, date, datetime, datetime-local, month, time, and week.

The input step step is set at 3:

<input type="number" name="points" step="3">

Try it out . . .

HTML5 . . .

Label	describe
<form>	Define an FORM form
<input>	Define an Input domain

Tip: You can practice how to add HTML forms through the programming practice section of this site!