📌  相关文章
📜  HTML5-Web Forms 2.0

📅  最后修改于: 2020-10-23 06:13:30             🧑  作者: Mango

Web Forms 2.0是对HTML4中的表单功能的扩展。与HTML4相比，HTML5中的表单元素和属性提供了更高程度的语义标记，使我们摆脱了HTML4所需的繁琐脚本和样式。

HTML4中的元素

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

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.

以下是使用标签，单选按钮和提交按钮的简单示例-

... 

  
   
 
       
      
 
   
       
      
 
   
       
      
 
   
       Male
 
       Female
 
        
   
 

 
 ...

HTML5中的元素

除了上述属性外，HTML5输入元素还为type属性引入了几个新值。这些在下面列出。

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

Sr.No. Type & Description
1 datetime

A 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-local

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

A 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 week

A date consisting of a year and a week number encoded according to ISO 8601.
6 time

A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
7 number

It accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
8 range

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

It 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 url

It 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 http://www.example.com format or in http://example.com format.

元素

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

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

现场演示

   
   
   

      

         Enter a value :

它将产生以下结果-

占位符属性

HTML5引入了一个名为placeholder的新属性。 和