Changes in the input usage in html5.

Changes in the input usage in html5.
Test environment: Firefox 10.0, Safari 5.1, Opera 11.61, Chrome 14.0.835.202

When you test it yourself, you can write it in the form and submit the button for verification. Because I am not very familiar with blog use, I only have to discard the submit verification when posting a blog. During local exercises, you can write submit verification to see the differences between various browsers for the new type verification.

1. New Attributes and attribute values

In HTML5, the types of input attributes are greatly increased and improved. You can simply use these attributes to implement those that need to be implemented by using JavaScript. Operabrowser supports the most and most comprehensive input attributes added to html5.

• 1. type attribute

  You can add several new types of values to the type attribute of input in html5. browsers that do not support these new value-added types will be parsed to the text type in a unified manner.

  Url, email, date, time, datetime, month, week, number, range, search, tel, color
  • ① Url type

    The input element of the url type is a text box specifically used to enter the url address. If the content in the text box is not in the url format, it cannot be submitted.

    When a non-url request is submitted, Firefox or Chrome prompts an error. Opera automatically converts the value in the url box to the url format. ie9 and safari do not support the request and submit the request normally.

  • ② Email type

    The input element of the email type is a text box specifically used to input emails. If the content in the text box is not in the email address format, the text box cannot be submitted, but it does not check whether the email address exists. When submitting the text box, the text box can be blank unlessRequiredAttribute.
    The text box of the email type hasMultipleAttribute -- it allows you to enter a string of email addresses separated by commas in the text box. Of course, the user is not required to enter the email address list.

    An error is prompted when Firefox, Chrome, and Opera are not submitted by email. required, ie9, and safari are supported. Normal submission is supported.

  • ③ Date type

    The input element of the date type is a popular element for developers. We often see various types of dates that require us to enter on the webpage, such as birthday, purchase date, and ticket booking date. The input elements of the date type are easy to input in the form of calendar. When you get the focus in this text box, the calendar is displayed. You can enter the total selected date in the calendar.

    In Opera, a calendar drop-down box is displayed, but manual input is not allowed. Chrome and Safari are consistent, but Safari is not verified when submitted. There are two buttons on the right side of the input box, plus or minus days. Firefox and ie9 are not supported.

  • ④ Time type

    The input element of the time type is a text box specifically used to input time, and the validity of the input time is checked during submission. Its appearance depends on the browser.

    The time setting box of the Opera-like system. Chrome and Safari are consistent, but Safari is not verified when submitted. There are two buttons on the right side of the input box, plus or minus minutes. Firefox and ie9 are not supported.

  • ⑤ Datetime type

    The input element of the datetime type is a text box specifically used to input the UTC date and time, and the validity of the input date and time is checked when submitted.

    Opera supports the best, similar to the combination of date and time. Chrome and Safari are consistent, but Safari is not verified when submitted. There are two buttons on the right side of the input box, plus or minus minutes. Firefox and ie9 are not supported.

  • ⑥ Datetime-local type

    The input element of the datetime-local type is a text box specifically used to enter the local date and time, and the input date and time are checked effectively when submitted.

    The difference between Opera and datetime is that there is a UTC at the end. Chrome and Safari are consistent, but Safari is not verified at submission. Firefox and ie9 are not supported.

  • 7. month type

    The input element of the month type is a text box specifically used to enter the year month, and the input month is checked effectively when submitted.

    Similar to date in Opera, only the month can be selected. Chrome and Safari are consistent, but Safari is not verified at submission. Firefox and ie9 are not supported.

  • ⑧ Week type

    The week type input element is a text box specifically used to enter the week number, and is valid for checking the input week number when submitting.

    Opera provides a drop-down menu, and manual input is not allowed. Chrome and Safari are consistent, but Safari is not verified at submission. Firefox and ie9 are not supported.

  • Serial number type

    The input element of the number type is a text box specifically used to enter numbers, and whether the input content is a number is submitted. They haveMin,MaxAndStepAttribute. A value control button is provided to control the value, so that the value cannot exceed the maximum value or the minimum value. When you click the value control button, the value is increased or decreased according to the step attribute, you can also enter numbers directly.

    Opera, Chrome, and Safari have the same performance, but Safari is not verified during submission. Firefox and ie9 are not supported.

  • Wide range type

    The input element of the range type is a text box that only allows the input of a number in a range. It has the min and max attributes and can be set to the minimum and maximum values (0 and 100 by default ), it also has the step attribute, which allows you to specify the dimension for each drag and use a slide bar to specify the value.

    The slide in Opera does not contain a scale, Chrome, or Safari, and Firefox or ie9 does not.

  • Elastic search type

    The input element of the search type is a text box specifically used to enter search keywords. The search type and text type are only different in appearance. In Safari, its appearance is the default rounded rectangle text box of the operating system, but the appearance can be rewritten using the css CCTV table. In other browsers, the appearance of a TA is the same as that of a text box, but it can be rewritten using a css style sheet. (-Webkit-appearance: textfield)

     

    When Safari and Chrome have content in the input box, a ×

  • Volume tel type

    The tel-type input element is designed as a special text box for entering phone numbers. It does not have special validation rules and does not require numbers to be entered (because many phone numbers usually carry other texts), such as 86-010-86670831. However, developers canPatternProperty to verify the format of the entered phone number.

    Safari and ie are not supported

  • Volume tel type

    The color input element is used to select a color. It provides a color selector. Currently, it is only supported in the Opear and BlackBerry browsers.

    Safari and ie are not supported

• 2. require

  Determines whether the value of the input field is required. Optional values: true and false. It cannot be used when the following types are used: hidden, image, button, submit, reset

  Safari and ie9 are not supported

• 3. list

  REFERENCE The datalist element. If defined, a drop-down list can be used to insert values to the input field.

  Webpage: 

  Only supported by Opera

• 4. autocomplete

  The autocomplete attribute specifies that the form or input field should have the automatic completion function.

  Note: autocomplete applies to form tags and the following types of input tags: text, search, url, telephone, email, password, datepickers, range, and color.
  
  When the user starts entering the domain automatically, the browser should display the entered options in the domain:

• 5. autofocus

  Optional values: true and false

  When the page is loaded, the input field gets the focus. Note: type = "hidden" cannot be used.

  Supported except ie9

• 6. multiple

  The multiple Attribute specifies that multiple values can be selected in the input field. Applies to the following types of input tags: email and file.

• 7. pattern

  The pattern attribute specifies the pattern used to verify the input field ). Pattern is a regular expression. Applies to the following types of input tags: text, search, url, telephone, email, and password.

  Not supported by Safari or ie9

• 8. palceholder

  The placeholder attribute provides a hint that describes the expected value of the input field. Applicable to text, search, url, telephone, email, and password.

  Ie9 not supported

• 9. Attributes of height and width

  The height and width attributes specify the image height and width used for the input label of the image type. Only applicable to input of the image type

  Full support

By the way, output

In HTML5, a new element output is added. The output element defines different types of outputs, such as the output of computing results or scripts. The output element must belong to a form, that is, it must be written inside the form, or the form attribute must be added to it.

The text1.value and text2.value in oninput on the form element can also work normally in the form of ID. value, that is, Text1.value and Text2.value. Since output has the name attribute, it is not a Form Control and cannot be submitted to the server.

If your browser is Chrome, Safari, Opera, and Firefox, you can enter a number in the two input boxes and then you will see the result.

In html5, input no longer supports the align and size attributes.

Cainiao in HTML

<INPUT class = button type = submit value = "login" action = "chklog. asp">
First, your statement is incorrect.
Class is the class you write (Can you execute it correctly ?), Type indicates submission, that is, form submission. action indicates the form attribute. It is incorrect if you use it in input.

Correct syntax:
<Html>
<Body>
<Form id = "form1" method = "post" action = "chklog. asp">
<Input class = "button" type = "submit" value = "login" id = "Button1"/>
<Input type = "submit" value = "off" onclick = "window. close ();" id = "Button2"/>
</Form>
<Body>
</Html>

--------------------------------------------------------
Form Tag:
<Form> </form>: create a form;
Action = "...", the URL of the server that receives data;
Method = "...", HTTP method (get, post), where get is opposed to use;
Enctype = "...", specify MIME (Internet media type );
Onsubmit = "...", an internal event that occurs when a form is submitted;
Noreset = "...", an internal event that occurs when the form is reset;
Target = "...", determines where the content is displayed (_ blank, _ parent, _ self, _ top)
<Select, multiple, name = "name", size = ""> </select>: Create a scroll menu and set the size to the number of table items that can be viewed before scrolling;
<Option>, set the content of each form item;
<Select, name = "name"> </select>: Create a drop-down menu;
<Textarea, name = "name", cols = 40, rows = 8> </textarea>: Create a text area, set the number of columns to width, and set the number of rows to height;
<Input, type = "checkbox", name = "name">. Create a check box with the text following the label;
<Input, type = "radio", name = "name", value = "> create a single sequence, followed by the text mark;
<Input,... the remaining full text>

Functions of input in html

When talking about INPUT, we need to talk about form usage.

The usage is as follows:

1. form field attribute Decomposition
<Form action = "" method = "" target = "" name = ">

1. action (the operation executed after submission)
2. method (the post data is packaged and sent, allowing a large amount of data to be sent, which is highly secure. The get browser directly sends data, with a data volume of no more than 1 kb, which is low in security. The default search method is used)
3. target (see the link)

Ii. Various form elements

1. input class
Type = text | password | hidden | radio | checkbox | file | image | submit | reset | button

A. text single-line text box
<Input type = "text" name = "" value = "" size = "" maxlength = "">
Name (unique basis for judgment)
Default value (onclick = "this. value = ''")
Size width (does not affect the number of input characters)
Maxlength maximum characters (255 by default)

B. password box
<Input type = "password" name = "" value = "" size = "" maxlength = "">

C. hidden domains (the default value determines the function)
<Input type = "hidden" name = "" value = "">

D. radio button
<Input type = "radio" name = "" value = "" checked>
Name must be consistent

E. checkbox check box
<Input type = "checkbox" name = "" value = "" checked>

F. file domain
<Input type = "file" name = "" size = "" value = "" accept = "">

G. image domain (the submit button can be replaced by default)
<Input type = "image" src = "image url">

H. submit/reset/button submit/reset/normal

2. select list/menu
<Select name = "" size = "6" multiple>

1. size height
2. Set multiple options for multiple

Option
<Option value = "" selected> tag </option>

3. textarea ...... remaining full text>