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

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