New form properties

<form> / <input>Autocomplete attribute/Users/XQQ/workspace/qq/doc/Web/it / 05 – Canvas. The md

Autocomplete works with

tags, and with
tags of the following types: Text, search, URL, telephone, email, password, Datepickers, range and color.

Autocomplete, which controls when the user is typing. Whether the browser displays the filled option.

  • offClosed:
  • onOpen:

Set up theautocomplete="off"There are two effects:

  • This tells the browser not to save data entered by the user for later auto-populating on similar forms. But browsers don’t necessarily comply.
  • This prevents the browser from caching the data in the session history. If the form data is cached in the session history and the user submits the form and clicks the back button to return to the previous form page, the data entered by the user will be displayed.

Login scenarios

Modern browsers implement built-in password management: when a user enters a username and password on a web site, the browser provides the user with a memory function. When the user visits the site again, the browser automatically fills in the login field using the saved values. Users don’t need to remember passwords already stored by the browser, so they can safely choose stronger ones.

For this reason, many modern browsers do not support setting autocomplete=”off” in the login field, but the browser detects the username and password fields, it still provides memory for this login, and if the user agrees, the browser will fill in these fields automatically the next time the user visits the site.

Use autocomplete=”new-password” to prevent auto-fill

So how do you organize the browser’s auto-fill behavior in scenarios where password fields are not required? For example, you define a user administration page where users can specify new passwords for others.

We can try using Autocomplete =”new-password” (this is just a hint that browsers don’t have to follow).

<form>Novalidate properties

Novalidate, a Boolean attribute that indicates that no form validation is required when submitting the form.

This attribute can be overridden by the formNovalidate attribute in a 

<form novalidate></form>
Copy the code

<input>

Autofocus attribute

Autofocus, the form control to which pages are automatically focused when loaded.

The form properties

The Form property can associate a control with one or more

elements
<form id="form1"></form>
<form id="form2"></form>

<! The "Last name" field is not in the form, but it is also part of form1 and Form2 forms. -->
First name: <input type="text" form="form1 form2" />
Copy the code

The form * attributes

Apply the < input type = “submit | image” > and < button >

  • Formaction is used to describe the URL to submit the form. Overrides the action attribute in the

    element.
    <input type="submit" formaction="demo-admin.php" value="Submit" />
Copy the code

  • formenctype

    Describes the encoding of the data submitted to the server (only for the method=” POST “form), overriding the encType attribute of the form element.

    • application/x-www-form-urlencoded, the default value it usesencodeURI()Such algorithms urL-encode text and send form data as strings.
    • multipart/form-data, uses the FormData API to manage data, allowing files to be submitted to the server. If your form contains<input type="file">Any of the<input>Element, this encoding type must be used.
    • text/plain, plain text; Usually useful only for debugging, so you can easily see the data to commit.

  • Formmethod indicates the HTTP method to use when submitting form data, overriding the method attribute of the

    element.
    • get
    • post
    • dialogIs used to instruct the button to close only the dialog box associated with the input without transferring form data.

  • Formnovalidate A Boolean attribute that does not need to be validated at form submission and overrides the novalidate attribute of the

    element.
    <input type="submit" formnovalidate value="Do not validate submit" />
Copy the code

  • The formTarget indicates where to display the received response after submitting the form.

    • _selfTo replace the current document page
    • _blank, usually a new TAB in the same window as the current document
    • _parent
    • _top

Width/height property

Applies to tags of the following types: image (image submit button)

<input type="image" width="48" height="48" />
Copy the code

The list properties

Autopopulate option id value:

<input list="browsers" />

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

Min/Max attribute

This applies to tags of the following types: number, range, date, datetime-local, month, time, and week.

Used to add constraints to input types that contain numbers or dates. There is no restriction on the input value, but validation is done at the time of submission.

<! -- Enter the date before 1980-01-01: -->
<input type="date" name="bday" max="1979-12-31" /><br />

<! -- Enter dates after 2000-01-01: -->
<input type="date" name="bday" min="2000-01-02" /><br />

<! -- Quantity (between 1 and 5): -->
<input type="number" name="quantity" min="1" max="5" />
Copy the code

Multiple attribute

This applies to the following types of tags: file and email

Boolean property, whether multiple values are allowed. If multiple email addresses are entered, separate them with commas ([email protected],[email protected]).

Select images: <input type="file" name="img" multiple />
Copy the code

The pattern attribute

This applies to the following types of tags: text, search, URL, tel, email, and password.

Represents a regular expression that validates the value of an element.

<! -- Contains only three letters -->
<input type="text" name="country_code" pattern="[A-Za-z]{3}" />
Copy the code

Placeholder attribute

This applies to tags of the following types: text, search, URL, telephone, email, and password.

When a form control is empty, the content displayed in the control describes the expected value of the control.

The required attribute

Boolean attribute, whether this field is mandatory (not empty).

Step attribute

This applies to tags of the following types: number, range, date, datetime-local, month, time, and week.

Declare a numeric interval. The step attribute can create a region value with the Max and min attributes.

<input type="number" name="points" step="3" />
Copy the code

<input>The type attribute

Type describe Based on example
color Define a color picker.
date A control for entering a date (year, month, day, not including time).
datetime-local A control for entering a date and time, excluding time zone.
month Enter the year and month control, no time zone.
range Enter a range component that does not require an exact number. The default value is the middle value.
search A single-line text area used to search for strings. There may be a delete button to clear the entire area. A enter icon on a device with a dynamic keyboard becomes a search icon.
tel A control for entering a phone number. A phone numeric keypad is displayed on a device with a dynamic keypad (mobile).
time A control for entering a time, excluding a time zone.
url A control for entering a URL. Similar to text input, but with validation parameters, and corresponding keyboards on devices that support dynamic keyboards.

New form element

datalist

, which contains a set of

<label
  >Choose a browser from this list: <input list="browsers" name="myBrowser"
/></label>
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>
Copy the code

output

, which represents the result of a calculation or user operation.

  • for, and the ids of other labels that affect the calculation results can be multiple.
  • form, the dependent form associated with the current label. If the attribute is not specified, the Output tag must be a descendant of a form.
  • name
<form oninput="result.value = parseInt(a.value)+parseInt(b.value)" id="form">
  <input type="test" name="a" value="50" />+
  <input type="test" name="b" value="10" />=
</form>
<output form="form" name="result" for="a b"></output>
Copy the code

The resources

  • How do I turn off form auto-fill
  • input type=”submit”