Html5 简明教程

HTML5 - Web Forms 2.0

Web 表单 2.0 是在 HTML4 中找到的表单功能的扩展。HTML5 中的表单元素和属性提供了比 HTML4 更高级别的语义标记，并且使我们摆脱了 HTML4 中所需的繁琐的脚本和样式。

Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and free us from a great deal of tedious scripting and styling that was required in HTML4.

The <input> element in HTML4

HTML4 输入元素使用 type 属性来指定数据类型。HTML4 提供了以下类型 −

HTML4 input elements use the type attribute to specify the data type.HTML4 provides following types −

Sr.No.

Type & Description

1

text A free-form text field, nominally free of line breaks.

2

password A free-form text field for sensitive information, nominally free of line breaks.

3

checkbox A set of zero or more values from a predefined list.

4

radio An enumerated value.

5

submit A free form of button initiates form submission.

6

file An arbitrary file with a MIME type and optionally a file name.

7

image A coordinate, relative to a particular image’s size, with the extra semantic that it must be the last value selected and initiates form submission.

8

hidden An arbitrary string that is not normally displayed to the user.

9

select An enumerated value, much like the radio type.

10

textarea A free-form text field, nominally with no line break restrictions.

11

button A free form of button which can initiates any event related to button.

以下是一个使用标签、单选按钮和提交按钮的简单示例 −

Following is the simple example of using labels, radio buttons, and submit buttons −

...
<form action = "http://example.com/cgiscript.pl" method = "post">
   <p>
      <label for = "firstname">first name: </label>
      <input type = "text" id = "firstname"><br />

      <label for = "lastname">last name: </label>
      <input type = "text" id = "lastname"><br />

      <label for = "email">email: </label>
      <input type = "text" id = "email"><br>

      <input type = "radio" name = "sex" value = "male"> Male<br>
      <input type = "radio" name = "sex" value = "female"> Female<br>
      <input type = "submit" value = "send"> <input type = "reset">
   </p>
</form>
 ...

The <input> element in HTML5

除了上述属性之外，HTML5 输入元素还为 type 属性引入了几个新值。这些如下所示。

Apart from the above-mentioned attributes, HTML5 input elements introduced several new values for the type attribute. These are listed below.

NOTE − 使用最新版本的 Opera 浏览器尝试所有以下示例。

NOTE − Try all the following example using latest version of Opera browser.

Sr.No.

Type & Description

1

datetimeA date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.

2

datetime-localA date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.

3

dateA date (year, month, day) encoded according to ISO 8601.

4

month A date consisting of a year and a month encoded according to ISO 8601.

5

weekA date consisting of a year and a week number encoded according to ISO 8601.

6

timeA time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.

7

numberIt accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

8

rangeThe range type is used for input fields that should contain a value from a range of numbers.

9

emailIt accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.

10

urlIt accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in [role="bare"]http://www.example.com format or in [role="bare"]http://example.com format.

The <output> element

HTML5 引入了新元素 <output>，该元素用于表示不同类型输出的结果，例如由脚本编写的输出。

HTML5 introduced a new element <output> which is used to represent the result of different types of output, such as output written by a script.

您可以使用 for 属性来指定输出元素与文档中影响计算的其他元素（例如，作为输入或参数）之间的关系。for 属性的值是其他元素的 ID 的空格分隔列表。

You can use the for attribute to specify a relationship between the output element and other elements in the document that affected the calculation (for example, as inputs or parameters). The value of the for attribute is a space-separated list of IDs of other elements.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">

         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>

   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>

   </body>
</html>

它将产生以下结果 −

It will produce the following result −

The placeholder attribute

HTML5 引入了一个名为 placeholder 的新属性。在 <input> 和 <textarea> 元素上，此属性为用户提供提示，说明该字段中可以输入什么内容。占位符文本不得包含回车或换行符。

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provide a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.

占位符属性的简单语法如下所示：

Here is the simple syntax for placeholder attribute −

<input type = "text" name = "search" placeholder = "search the web"/>

只有最新版本的 Mozilla、Safari 和 Crome 浏览器支持此属性。

This attribute is supported by latest versions of Mozilla, Safari and Crome browsers only.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput"
            placeholder = "email@example.com"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

这会产生以下结果 −

This will produce the following result −

The autofocus attribute

这是一个简单的单步模式，在文档加载时很容易用 JavaScript 编写，自动聚焦一个特定的表单字段。

This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.

HTML5 引入了一个名为 autofocus 的新属性，它将用于以下内容：

HTML5 introduced a new attribute called autofocus which would be used as follows −

<input type = "text" name = "search" autofocus/>

只有最新版本的 Mozilla、Safari 和 Chrome 浏览器支持此属性。

This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

The required attribute

现在，你不必使用 JavaScript 进行客户端验证，例如永远不会提交空文本框，因为 HTML5 引入了一个名为 required 的新属性，它将用于以下内容并坚持要求提供一个值：

Now you do not need to have JavaScript for client-side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value −

<input type = "text" name = "search" required/>

只有最新版本的 Mozilla、Safari 和 Chrome 浏览器支持此属性。

This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

它将产生以下结果 −

It will produce the following result −