HTML 5 server sends events, Input types, form elements, form properties

Source: Internet
Author: User

HTML5 Server Send events (Server-sent event) allow Web pages to get updates from the server.

Server-sent Event-one-way message delivery

The Server-sent event refers to a webpage that automatically obtains updates from the server.

This could have been done before, provided the Web page had to ask if there were any updates available. Events are sent through the server, and updates are automatically reached.

Examples: Facebook/twitter updates, valuation updates, new posts, tournament results, and more.

Browser support

All major browsers support server sending events, in addition to Internet Explorer.

Receive Server-sent event notifications

The EventSource object is used to send event notifications to the receiving server:

Instance
var source=new EventSource ("demo_sse.php"); Source.onmessage=function (event)  {  document.getElementById (" Result "). Innerhtml+=event.data +" <br/> ";  };

Example Explanation:

    • Create a new EventSource object, and then specify the URL of the page that is sending the update ("demo_sse.php" in this case)
    • OnMessage event occurs every time an update is received
    • When the OnMessage event occurs, the received data is pushed into the element with the ID "result"
Detect Server-sent Event Support

In the tiy example above, we have written an extra piece of code to detect the browser support of the server sending the event:

if (typeof (EventSource)!== "undefined")  {  //yes! Server-sent Events support!  Some code ...  } else  {  //sorry! No server-sent Events support:  }
Server-side Code instances

To make the above example work, you also need a server that can send data updates (such as PHP and ASP).

The syntax of the server-side event stream is very simple. Set the "Content-type" header to "Text/event-stream". Now you can start sending the event stream.

PHP Code (demo_sse.php):
<?phpheader (' Content-type:text/event-stream '); header (' Cache-control:no-cache '); $time = Date (' R '); echo "Data: The server time is: {$time}\n\n "; flush ();? >
ASP Code (VB) (demo_sse.asp):
<%response.contenttype= "Text/event-stream" Response.expires=-1response.write ("Data:" & Now ()) Response.Flush ()%>

Code Explanation:

    • Set the header "Content-type" to "Text/event-stream"
    • No caching of pages is required
    • Output send date (always start with "data:")
    • Refresh output data to a Web page
EventSource Object

In the example above, we use the OnMessage event to get the message. However, you can also use other events:

Events Description
OnOpen When the connection to the server is opened
OnMessage When a message is received
OnError When an error occurs
HTML5 the new Input type

HTML5 has a number of new form input types. These new features provide better input control and validation.

This chapter provides a comprehensive overview of these new input types:

    • Email
    • wr.
    • Number
    • Range
    • Date pickers (date, month, week, Time, DateTime, datetime-local)
    • Search
    • Color
Browser support
Input Type IE Firefox Opera Chrome Safari
Email No 4.0 9.0 10.0 No
wr. No 4.0 9.0 10.0 No
Number No No 9.0 7.0 No
Range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
Search No 4.0 11.0 10.0 No
Color No No 11.0 No No

Note: Opera has the best support for the new input type. However, you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.

Input Type-Email

The email type is used for input fields that should contain e-mail addresses.

When the form is submitted, the value of the email domain is automatically validated.

Instance
type="email"Name= "User_email"/>

Tip: The Safari browser in the IPhone supports the email input type and works with it by changing the touch-Screen Keyboard (add @ and. com options).

Input Type-URL

The URL type is used for the input domain that should contain the URL address.

When the form is submitted, the value of the URL field is automatically validated.

Instance
type="url"Name= "User_url"/>

Tip: The Safari browser in the iPhone supports the URL input type and works with it by changing the touch-screen Keyboard (adding. com options).

Input Type-Number

The number type is used for input fields that should contain numeric values.

You can also set a limit on the number of accepted numbers:

Instance
type="number"Name= "Points" min= "1" max= "ten"/>

Use the following properties to specify the qualification for numeric types:

Properties value Description
Max Number Specify the maximum allowable value
Min Number Minimum allowable value is specified
Step Number Specify a valid number interval (if step= "3", the legal number is -3,0,3,6, etc.)
Value Number Specify default values

Try the example with all qualified attributes:

Tip: The Safari browser in the IPhone supports the number input type and works with it by changing the touch-screen keyboard (displaying numbers).

Input Type-Range

The range type is used for input fields that should contain numeric values in a range.

The range type is displayed as a slider bar.

You can also set a limit on the number of accepted numbers:

Instance
type="range"Name= "Points" min= "1" max= "ten"/>

Use the following properties to specify the qualification for numeric types:

Properties value Description
Max Number Specify the maximum allowable value
Min Number Minimum allowable value is specified
Step Number Specify a valid number interval (if step= "3", the legal number is -3,0,3,6, etc.)
Value Number Specify default values
Input Type-date pickers (date selector)

HTML5 has several new input types that can be selected for the date and time:

    • Date-Select day, month, year
    • Month-Select months, years
    • Week-Select minute
    • Time-Select the Times (hours and minutes)
    • DateTime-Select time, day, month, year (UTC time)
    • Datetime-local-Select time, day, month, year (local time)

The following example allows you to select a date from the calendar:

Instance
type="date"Name= "User_date"/>

input type "month":

input type "Week":

input type "time":

input type "datetime":

input type "datetime-local":

Input Type-Search

The search type is used for searching domains, such as site search or Google search.

The search field appears as a regular text field.

New form elements for HTML5:

HTML5 has several elements and attributes that involve forms.

This chapter describes the following new form elements:

    • DataList
    • Keygen
    • Output
Browser support
Input Type IE Firefox Opera Chrome Safari
DataList No No 9.5 No No
Keygen No No 10.5 3.0 No
Output No No 9.5 No No
DataList elements

The DataList element specifies a list of options for the input field.

The list is created by the option element within DataList.

To bind DataList to an input field, refer to the ID of DataList with the list property of the input field:

Instance
List= "url_list" name= "link"/> <datalist id="url_list"> <option label= "W3school" value= "http://www. W3School.com.cn "/><option label=" Google "value=" http://www.google.com "/><option label=" Microsoft " value= "http://www.microsoft.com"/></datalist>

Tip: The option element is always set to the Value property.

Keygen elements

The role of the keygen element is to provide a reliable way to authenticate users.

The keygen element is a key pair generator (Key-pair generator). When the form is submitted, two keys are generated, one is the private key, and one is the public key.

The private key is stored on the client and the public key is sent to the server. The public key can be used to later authenticate the user's client certificate (certificate).

Currently, the browser's poor support for this element is not enough to make it a useful security standard.

Instance
<keygen name="security" /><input type= "Submit"/></form>
Output element

The output element is used for different types of outputs, such as calculations or script output:

Instance
<output id= "Result" onforminput= "Rescalc ()" ></output>

This chapter explains the new attributes that involve <form> and <input> elements.

The new form property:
    • AutoComplete
    • Novalidate
The new input property:
    • AutoComplete
    • Autofocus
    • Form
    • Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)
    • Height and width
    • List
    • MIN, Max and step
    • Multiple
    • Pattern (regexp)
    • Placeholder
    • Required
Browser support
Input Type IE Firefox Opera Chrome Safari
AutoComplete 8.0 3.5 9.5 3.0 4.0
Autofocus No No 10.0 3.0 4.0
Form No No 9.5 No No
Form Overrides No No 10.5 No No
Height and width 8.0 3.5 9.5 3.0 4.0
List No No 9.5 No No
MIN, Max and step No No 9.5 3.0 No
Multiple No 3.5 No 3.0 4.0
Novalidate No No No No No
Pattern No No 9.5 3.0 No
Placeholder No No No 3.0 3.0
Required No No 9.5 3.0 No
AutoComplete property

The AutoComplete property specifies that the form or input field should have auto-complete functionality.

Note: AutoComplete applies to <form> tags, as well as the following types of <input> tags: text, search, URL, telephone, email, password, datepickers, R Ange and color.

When the user starts typing in the AutoComplete field, the browser should display the fill-in options in that field:

Instance
autocomplete="on"autocomplete="off"/><br/><input type= "Submit"/></form>

Note: In some browsers, you may need to enable the AutoComplete feature to make this property effective.

Autofocus Property

The Autofocus property specifies that the domain automatically receives focus when the page loads.

Note: The Autofocus property applies to all <input> label types.

Instance
User Name: <input type= "text" name= "user_name"  autofocus="autofocus" />
Form Property

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

Note: The form property applies to all <input> label types.

The Form property must refer to the ID of the owning form:

Instance
form="user_form"/>

Note: If you want to refer to more than one form, use a space-delimited list.

Form Override Properties

The form Override property (form override attributes) allows you to override some of the property settings of a FORM element.

Form Override properties are:

    • FormAction-Override the form's Action property
    • Formenctype-Rewrite the Enctype property of the form
    • FormMethod-Override the form's Method property
    • Formnovalidate-Rewrite the Novalidate property of the form
    • Formtarget-Override the target property of the form

Note: Form override properties apply to the following types of <input> tags: submit and image.

Instance
formaction="demo_admin.asp"formnovalidate="true"Value= "Submit without validation"/><br/></form>

Note: These properties are useful for creating different submit buttons.

Height and Width properties

The Height and Width properties specify the image heights and widths for the input label of the image type.

Note: The height and Width properties apply only to the <input> label of the image type.

Instance
width="99"height="99"/>
List Property

The List property specifies the DataList of the input domain. DataList is a list of options for the input domain.

Note: The List property applies to the following types of <input> tags: text, search, URL, telephone, email, date pickers, number, range, and color.

Instance
list="url_list"Id= "Url_list" ><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, and step properties

The Min, max, and step properties are used to specify a qualification (constraint) for input types that contain numbers or dates.

The 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.).

Note: the Min, Max, and step properties apply to the following types of <input> tags: date pickers, number, and range.

The following example shows a numeric field that accepts a value between 0 and 10 with a stepping of 3 (that is, a valid value of 0, 3, 6, and 9):

Instance
min="0"max="10"step="3"/>
Multiple Property

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

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

Instance
multiple="multiple"/>
Novalidate Property

The Novalidate property specifies that the form or input field should not be validated when the forms are submitted.

Note: The Novalidate property applies to <form> and the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, ran GE and color.

Instance
novalidate="true">e-mail: <input type= "Email" name= "user_email"/><input type= "Submit"/></form>
Pattern Property

The Pattern property specifies the mode (pattern) used to validate the input field.

Pattern is a regular expression. You can learn something about regular expressions in our JavaScript tutorials.

Note: The pattern attribute applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

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

Instance
Country code: <input type= "text" name= "Country_code" pattern="[A-z]{3}" title= "three letter country Code"/>
Placeholder Property

The placeholder property provides a hint (hint) describing the value that the input field expects.

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

The hint (hint) appears when the input field is empty and disappears when the input field gets focus:

Instance
<input type= "Search" name= "user_search"  placeholder="Search W3School" />
Required Property

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

Note: The Required property applies to the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, number, checkbox, Rad Io and file.

Instance
required="required"/>

HTML 5 server sends events, Input types, form elements, form properties

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.