Forward-html Form

This article is only for forwarding, non-original, original http://www.cnblogs.com/zhuanggege/p/5738467.html

Please support the original

<form>

Form properties:

Name specifies the names of the forms

ACTION specifies where to send form data when a form is submitted

Target specifies where to open the URL of the Action property

METHOD specifies how to send the form data, get: Transfer parameters to the server at the URL address, post: Transfer parameters to the server in the background

ENCTYPE specifies how the form data is encoded before it is sent to the server, and only method= "POST" is used Enctype property

Application/x-www-form-urlencoded: By default, all characters are encoded before they are sent (the spaces are converted to "+" symbols, and special characters are converted to ASCII hex values)

Multipart/form-data: No character encoding, which is required when using a form with a file upload control

Text/plain: Converts a space to a "+" symbol, but does not encode special characters

Form properties:

Type of the specified element

Name specifies the names of the elements

Value of the specified element

Size specifies the visible width of the element as a number of characters

MaxLength the maximum number of characters allowed in a specified element

DISABLED specifies the elements that should be disabled, the disabled INPUT element is neither available nor clickable until certain conditions are met

READONLY Specifies that the input fields are read-only and cannot be modified, but you can still use the TAB key to switch to the field, and you can also select or copy its text

Type of form

Text

Defines a single-line input field where the user can enter text, which is 20 characters by default

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

Password

Defines the password field, and the characters in the field are obscured

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

Radio

Define a radio button

<input type= "Radio" name= "Sex" value= "male" checked/> male <input type= "Radio" name= "Sex" value= "female"/> Female

The radio button must have the same name value

Value is the data that is submitted to the background and represents your choice

Checked rules should be preselected when the page is loaded

CheckBox

Define check boxes

<input type= "checkbox" Name= "Love" value= "Music" checked/> music <input type= "checkboxes" Name= "Love" value= "movie" /> Movie <input type= "checkbox" Name= "Love" value= "game"/> Games

button

Define clickable buttons (mostly used with JavaScript to launch scripts)

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

Submit

Define submit button, submit button to send data to server

<input type= "Submit" value= "Submission"/>

Reset

Define reset button, reset button resets all form fields to their initial values

<input type= "reset" value= "override"/>

Image

Define an image as a submit button

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

File

Define input fields and "Browse ..." buttons for file uploads

<input type= "File" multiple/>

When this feature is used, the Enctype property is specified as "Multipart/form-data"

Multiple control whether to upload multiple files

Hidden

Define hidden input fields, hidden fields often store default values, or JavaScript changes their values

<input type= "hidden" name= "Country" value= "China"/>

Number

To define a numeric field with a spinner control

<input type= "Number" min= "1" max= "ten"/>

Max: Specify the maximum allowable value

Min: Specifies the minimum allowable value

Step: Specify a valid digital interval

Value: Specify default value

Range

Defines a numeric field with a slider control, the range type is displayed as a slider, and you can set the limit for acceptable numbers

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

Max: Specify the maximum allowable value

Min: Specifies the minimum allowable value

Step: Specify a valid digital interval

Value: Specify default value

Search

Define a text field for search

Color

To define a color picker

Tel

Define a text field for a phone number

Email

Defines a text field for e-mail addresses that automatically validates the value of the email field when the form is submitted

Url

Defines a text field for a URL that automatically validates the value of the URL field when the form is submitted

Date,datetime,datetime-local,month,week,time

Date: Defines the date control (including year, month, day, not including time)

DateTime: Defines a date and time control (including year, month, day, time, minute, second, minute, and UTC)

Datetime-local: Define date and Time controls (including year, month, day, time, minute, second, seconds, without timezone)

Month: Define month and year controls (without time zone)

Week: Defining Week and year controls (without time zone)

Time: Defines the control (without time zone) that is used to enter times

New Form Properties for HTML5

Novalidate

Specifies that the form is not validated when it is submitted

The Novalidate property applies to <form>, and the following <input> type: Text,search,url,telephone,email,password,datepickers,range, Color

<form novalidate>    e-mail: <input type= "email"/> <input type=    "Submit"/></form>

AutoComplete

Specify whether the form should enable auto-completion

Auto-complete allows the browser to predict the input to the field, and when the user starts typing in the field, the browser is based on the previously typed value and should show the option to fill in the field, be sure to set the name or ID

The AutoComplete property applies to <form>, and the following <input> type: Text,search,url,telephone,email,password,datepickers,range, Color

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

Autofocus

Specifies that when the page loads, the button should automatically get focus, applicable to all types of <input> tags

Form

Specifies the form or forms to which the input domain belongs, applies to all types of <input> tags, and the form property must refer to the ID of the owning form

<form id= "Zhuang" > First    name:<input type= "text"/> <input type= "Submit"/></form>    Last name:<input type= "text" form= "Zhuang"/>

Form Overrides

A form override property that allows you to override some of the property settings of a FORM element:

FormAction: Overriding the form's Action property

Formenctype: Overriding the Enctype property of a form

FormMethod: Overriding the form's Method property

Formnovalidate: Overriding the Novalidate property of a form

Formtarget: Overriding the target property of a form

The form override property applies to the following types of <input> tags: submit,image

<form>    e-mail: <input type= "email"/> <br/> <input    type= "Submit" value= "OK 1"/> <br />    <input type= "Submit" formnovalidate= "true" value= "OK 2"/></form>

Height,width

The height and width of an image of type specified on the input label

List

Specifies that the datalist,datalist of the input field is a list of options for the input field

The List property applies to the following types of <input> tags: text,search,url,telephone,email,datepickers,number,range,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>

Min,max,step

Used to specify constraints for input types that contain numbers or dates

Max property specifies the maximum allowable value for the input field

The Min property specifies the minimum allowable value for the input field

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

The Min,max,step property applies to the following types of <input> tags: datepickers,number,range

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

Multiple

Specifies that multiple values can be selected in the input field

The Multiple property applies to the following types of <input> tags: email,file

<input type= "file" multiple/>

Pattern

Specifies the mode used to validate the input domain

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

{} Limited number of ranges: {1,10},{1,}

The Pattern property applies to the following types of <input> tags: text,search,url,telephone,email,password

<form>    Country code: <input type= "text" pattern= "[a-z]{3}" title= "Three-letter country code"/>    <input type= "Submit"/ ></form>

Placeholder

Provides a hint that describes the value expected by the input field, indicating that the display appears when the input field is empty and disappears when the input field gets focus

The placeholder property applies to the following types of <input> tags: text,search,url,telephone,email,password

<input type= "Search" placeholder= "Search W3school"/>

Required

Specifies that the input field must be filled in before submission (cannot be empty)

The Required property applies to the following types of <input> tags: text,search,url,telephone,email,password,datepickers,number,checkbox,radio, File

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

<textarea>

Form elements: Multiline text fields

The size of the textarea can be specified by the cols and rows properties, but a better approach is to use the height and width properties of the CSS

<textarea rows= "5" cols= "style=" Resize:none; " > </textarea>

COLS Specifies how many words each row can hold in a text field

rows specifies how many rows the text field can display

Resize specifies whether the size of the text field allows modification:

None: Not allowed

Horizontal: Allow width change

Vertical: Allow height change

Both: Allows to change the width of the height

<select>

Form elements: drop-down box

multiple specifies that multiple options can be selected

SIZE specifies the number of visible options in the drop-down list

Selected Specifies that the option is preselected when the page is loaded

<select>    <option> Beijing </option>    <option selected> guangzhou </option>    <option > Shanghai </option></select>

<optgroup>

Form elements: drop-down box grouping

For combination options, when you use a long list of options, combining the relevant options makes processing easier

LABEL specifies the description for the option group

<select>    <optgroup label= "Guangdong" >        <option selected> guangzhou </option>        <option> Shenzhen </option>    </optgroup>    <optgroup label= "Other" >        <option> Beijing </option>        <option> Hong Kong </option>    </optgroup></select>

<keygen>

Specifies the key pair generator field for the form, when the form is submitted, the private key is stored locally, and the public key is sent to the server

<form>    Username: <input type= "text" >    encryption: <keygen/> <input    type= "Submit" ></form>

<output>

Output as a result of the calculation (such as 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= "> =<output name=    " x "for=" a B "> </output>< /form>

<label>

The label element does not present any special effects to the user, but it improves usability for the mouse user and triggers the control if you click on the text within the label element-that is, when the user selects the label, the browser automatically shifts focus to the label-related form controls

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

<fieldset>

You can group related elements within a form

Legend label defines the caption for the FIELDSET element

<form>    <fieldset>        <legend> Health information </legend>        height: <input type= "text"/>        Weight: <input type= "text"/>    </fieldset></form>    

Forward-html Form