Html basic (2) form, html basic form

Html basic (2) form, html basic form

<Form> form

Name of the form

Submission address of the action Form

Target Open Mode

Enctype MIME type

Method form data submission method. get: transmits parameters to the server on the url address, and post: Transfers parameters to the server on the backend.

 

<Label>

<Label for = "username"> User name: </label> <input type = "text" id = "username"/>

The label element does not present any special effects to users, but it improves the usability for the mouse users. If you click Text in the label element, this control is triggered, that is, when you select this tag, the browser automatically redirects the focus to the tag-related form control.

 

Form attributes

Type element type

Name of the name Element

Value of the value Element

Width of the size Element

Maxlength: the maximum length of the input character.

Disabled input elements are neither available nor clickable until certain conditions are met.

Readonly specifies that the input field is read-only and cannot be modified. However, you can still use the tab key to switch to this field and select or copy its text.

 

Type of the form

Text defines the single-line input field. You can enter text in it. The default value is 20 characters.

Username: <input type = "text" name = "username"/>

Password defines the password field, and the characters in the field will be masked

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

Radio definition radio button

<Input type = "radio" name = "sex" value = "1" checked/> male <input type = "radio" name = "sex" value = "2"/> female

The name of a Single-choice button must be the same

The value is the data submitted to the background, which represents your choice.

Checked is the default option

Checkbox definition check box

<Input type = "checkbox" name = "love" value = "music" checked/> music <input type = "checkbox" name = "love" value = "movie"/> movie <input type = "checkbox" name = "love" value = "game"/> games

Button defines the clickable button (mostly used with javascript to start the script)

<Input type = "button" value = "OK"/>

Submit defines the submit button. The submit button sends data to the server.

<Input type = "submit" value = "submit"/>

Reset defines the reset button. the reset button resets all form fields to their initial values.

<Input type = "reset" value = "Rewrite"/>

Image defines the image as the submit button

<input type="image" src="url" alt=" "/>

File defines the input field and the "Browse..." button for file Upload

<input type="file" name="img" multiple/>

When using this function, you must specify the method attribute as "post" in the form label, and the enctype attribute as "multipart/form-data"

Multiple controls whether to upload multiple files

Color definition color picker

Date, datetime, datetime-local, month, week, and time define the date and time fields.

E-mail defines text fields used for e-mail addresses

When a form is submitted, the value of the email field is automatically verified.

Hidden defines hidden input fields

<input type="hidden" name="country" value="china"/>

Hidden fields often store default values, or javascript changes their values.

Number defines the numeric field with the spinner Control

<input type="number" min="1" max="10"/>

Max: Maximum allowed

Min: Minimum value allowed

Step: specifying valid digit intervals

Value: Specifies the default value.

Range defines numeric fields with the slider Control

<input type="range" min="0" max="100" value="50" step="10"/>

The range type is displayed as a slider and you can set acceptable numbers

Search defines text fields for search

Tel defines text fields used for telephone numbers

Url defines the text field used for the URL

When a form is submitted, the url field value is automatically verified.

 

New html5 form attributes

The novalidate attribute specifies that a form is not verified when it is submitted.

The novalidate attribute applies to <form> and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color.

<form action=" " novalidate>    E-mail: <input type="email" />    <input type="submit" /></form>

Autocomplete attribute specifies whether the Automatic completion function should be enabled for the form

The autocomplete attribute applies to <form> and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color.

<input type="search" name="keywords" autocomplete="on/off" />

The browser is automatically allowed to predict the input of a field. When you start typing a field, the browser displays the entered options based on the previously typed value, be sure to set name or id

The autofocus attribute specifies that when a page is loaded, the button should automatically obtain the focus, which applies to all <input> label types.

The form attribute specifies one or more forms to which the input field belongs. It applies to all <input> label types. The form attribute must reference the form id.

<form action=" " id="zhuang">    First name:<input type="text" name="fname" /> <input type="submit" /></form>    Last name:<input type="text" name="lname" form="zhuang" />

Form overrides form rewriting attributes allow you to override certain attribute settings of form elements

Form rewriting attributes include:

Formaction-override the action attribute of the form

Formenctype-override the form's enctype attribute

Formmethod-override the method attribute of the form

Formnovalidate-override the novalidate attribute of the form

Formtarget-override the target attribute of a form

The form rewriting attribute applies to the following types of <input> labels: submit, image

<Form action = ""> Email: <input type = "email"/> <br/> <input type = "submit" value = "OK 1"/> <br/> <input type = "submit" formnovalidate = "true" value = "OK 2"/> <br/> </form>

The height and width attributes specify the height and width of an image of the input label.

The list attribute specifies the datalist of the input field. datalist is the Option list of the input field.

The list attribute applies to the following types of <input> labels: text, search, url, telephone, email, datepickers, number, range, and color.

Webpage: <input type="url" list="zhuang" /><datalist id="zhuang">    <option label="W3Schools" value="http://www.w3school.com.cn" />    <option label="Google" value="http://www.google.com" />    <option label="Microsoft" value="http://www.microsoft.com" /></datalist>

The min, max, and step attributes are used to specify the constraints for input types that contain numbers or dates.

Max attribute specifies the maximum value allowed by the input field

Min attribute specifies the minimum value allowed by the input field

The step attribute specifies a valid number interval for the input field (if step = "3", the valid number is-3, 0, 3, 6, etc)

The min, max, and step attributes apply to the following <input> labels: datepickers, number, range

<input type="number" min="0" max="10" step="3" />

The multiple Attribute specifies that multiple values can be selected in the input field.

The multiple Attribute applies to the following <input> tags: email, file

<input type="file" multiple />

Pattern attribute specifies the mode used to verify the input field

[] Limited type range: [0-9], [a-z], [A-Z], [0-9a-zA-Z]

{} Number range: {}, {1 ,}

Title: prompt text

The pattern attribute applies to the following <input> labels: text, search, url, telephone, email, and password.

<Form action = ""> country code: <input type = "text" pattern = "[A-z] {3}" title = "Country Code with three letters"/> <input type = "submit"/> </form>

The placeholder attribute provides a prompt to describe the expected value of the input domain.

The prompt is displayed when the input field is empty and disappears when the input field obtains the focus.

The placeholder attribute applies to <input> labels of the following types: text, search, url, telephone, email, and password.

<input type="search" placeholder="Search W3School" />

The required attribute specifies that the input field must be entered before submission (cannot be blank)

The required attribute applies to the following <input> labels: text, search, url, telephone, email, password, datepickers, number, checkbox, radio, and file

<form action=" ">    Name: <input type="text" required />    <input type="submit" /></form>

 

<Textarea> form element: multi-line text field

You can use the cols and rows attributes to specify the size of the textarea, but the better way is to use the css height and width attributes.

<textarea name="content" rows="5" cols="50" style="resize:none;"> </textarea>

Cols is used to specify the number of characters per line in the text domain

Rows is used to specify how many lines can be displayed in a text field

Resize is used to determine whether the size of the text field can be modified, and the optional options for modification: the attribute values include:

1. none: not allowed, 2. horizontal: allowed to change the width, 3. vertical: allowed to change the height, 4. both: allowed to change the width and height

 

<Select> form element: drop-down list

Value of the value option

Multiple choice?

Number of lines displayed in the size drop-down list box

Selected

<Select name = "city" multiple size = "3"> <option value = "0"> select </option> <option value = "bj"> Beijing </option> <option value = "gz" selected> Guangzhou </option> <option value = "sh"> Shanghai </option> </select>

<Optgroup> form element: drop-down box Group

Used to combine options. When you use a long list of options, combining related options makes processing easier.

Required attribute: label

<Select name = "city" multiple> <optgroup label = "Guangdong"> <option value = "1"> Guangzhou </option> <option value = "2"> Shenzhen </option> </optgroup> <optgroup label = ""> <option value = "3" selected> Beijing </option> <option value = "4"> Hong Kong </option>/ option> </optgroup> </select>

 

<Keygen>

Specifies the key pair Generator Field Used for the form. When a form is submitted, the private key is stored locally and the Public Key is sent to the server.

<form>    Username: <input type="text" name="username">    Encryption: <keygen name="security">    <input type="submit"></form>

 

<Output>

Output as the computing result (for example, the output of the execution script)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0    <input type="range" id="a" value="50">100    +<input type="number" id="b" value="50">    =<output name="x" for="a b"> </output></form>