القائمة الرئيسية

الصفحات

 HTML5 - Web Forms 2.0

ملاحظة: نحن بحاجة الى دعم لو سمحت شاركه مع اصدقائك 

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.

Web Forms 2.0 هو امتداد لميزات النماذج الموجودة في HTML4. توفر عناصر النموذج والسمات في HTML5 درجة أكبر من الترميز الدلالي مقارنة بـ HTML4 وتحررنا من الكثير من البرمجة النصية والأنماط المملة التي كانت مطلوبة في HTML4.

The <input> element in 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

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

بصرف النظر عن السمات المذكورة أعلاه ، قدمت عناصر إدخال HTML5 عدة قيم جديدة لسمة النوع. هذه مذكورة أدناه.

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

Sr.No.Type & Description
1datetime

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.

2datetime-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.

3date

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

4month

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

5week

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

6time

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

7number

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

8range

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

9email

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.

10url

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.

The <output> element

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.

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.

قدم HTML5 عنصرًا جديدًا <output> والذي يستخدم لتمثيل نتيجة أنواع مختلفة من المخرجات ، مثل الإخراج المكتوب بواسطة برنامج نصي. يمكنك استخدام السمة for لتحديد علاقة بين عنصر الإخراج والعناصر الأخرى في المستند التي أثرت في الحساب (على سبيل المثال ، كمدخلات أو معلمات). قيمة السمة لـ هي قائمة بمعرفات العناصر الأخرى مفصولة بمسافات.

<!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>

The placeholder attribute

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 −

قدم HTML5 سمة جديدة تسمى placeholder. توفر هذه السمة الموجودة في عنصري <input> و <textarea> تلميحًا للمستخدم لما يمكن إدخاله في الحقل. يجب ألا يحتوي نص العنصر النائب على أحرف إرجاع أو موجزات سطر. فيما يلي بناء الجملة البسيط لسمة العنصر النائب -

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

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>

The autofocus attribute

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

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

هذا نمط بسيط من خطوة واحدة ، يمكن برمجته بسهولة في JavaScript في وقت تحميل المستند ، يركز تلقائيًا على حقل نموذج معين واحد. قدم HTML5 سمة جديدة تسمى التركيز التلقائي والتي سيتم استخدامها على النحو التالي -

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

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

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 −

الآن لا تحتاج إلى أن يكون لديك JavaScript لعمليات التحقق من جانب العميل مثل مربع نص فارغ لن يتم إرساله أبدًا لأن HTML5 قدم سمة جديدة تسمى مطلوبة والتي سيتم استخدامها على النحو التالي وتصر على أن يكون لها قيمة -

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

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>

هل اعجبك الموضوع :

تعليقات