ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

تگ های جدید فرم در HTML 5 مطلب ویژه

توسط 10 تیر, 1393 5162 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

html5-form-3HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شده است. اولین بار در ژوئن 2004 بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه 2010 نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند.
Html 5 برای کارایی بهتر و سهولت طراحی فرم های وب 3 المنت جدید را به تگ های فرم اضافه کرده است . این تگ ها در فرم ها ویژگی های گوناگونی را اعمال می کنند مثلا keygen  که یک کادر ارسال رمز و دریافت رمز ایجاد می کند این تگ های جدید عبارتند از :

Html 5 برای کارایی بهتر و سهولت طراحی فرم های وب 3 المنت جدید را به تگ های فرم اضافه کرده است . این تگ ها در فرم ها ویژگی های گوناگونی را اعمال می کنند مثلا keygen  که یک کادر ارسال رمز و دریافت رمز ایجاد می کند این تگ های جدید عبارتند از :

این تگ چندین آیتم از پیش تعیین شده را برای یک کنترل لیست <input> تعیین می کند .    


<datalist>

از این تگ برای ایجاد یک کادر ارسال رمز یا کلمه عبور به سرور استفاده می شود .


<keygen>

از این تگ برای محاسبه و نمایش خروجی یک عمل ریاضی در Html استفاده می شود .


<output>

از المنت های جدیدی که در بالا معرفی شد اکثر مرورگرهای مطرح از آن ها پشتیبانی نمی کنند. اگر پشتیبانی نکند یک کادر معمولی را نشان می دهد .

 

تگ <datalist> :
تگ <datalist> یک لیست از چند آیتم از پیش تعیین شده را برای یک کنترل <input> تعیین می کند . هدف از تعیین این تگ برای کنترل <input> تهیه یک لیست برای تکمیل اتوماتیک گزینه هاست.
به عبارت دیگر هنگامی که این تگ را برای یک کنترل تعیین می کنید ، در هنگام کلیک بر روی آن کنترل لیست آیتم ها بصورت یک منو به کاربر نمایش داده می شود .
از خاصیت List کنترل <input> برای اتصال آن به تگ <datalist> استفاده می شود .

شکل کلی استفاده از این تگ در زیر نشان داده شده است :

 

<input   list='datalist_id'>
<datalist   id='datalist_id'>
    <option value='value 1'>
    <option value='value 2'>
    <option value='value 3'>
<datalist>


توضیح ویژگی های datalist_id , option  , value در این تگ :
•    datalist_id : یک id را برای تگ <datalist> تعیین می نماید .
•    option : یک آیتم را برای تگ <datalist> ایجاد می نماید .
•    Value : مقدار هر آیتم تگ <datalist>  را تعیین می نماید .

این تگ در مرورگرهای کروم ، فایرفاکس و اپرا پشتیانی می شود .

در مثال زیر یک کنترل <input> تگ را ایجاد کرده و به وسیله یک تگ <datalist> ، آیتم های آن را تعیین نموده ایم . برای مشاهده آیتم های از پیش تعیین شده برای کنترل input ، موس را داخل کادر متن آن کلیک نمایید :

 

<form action='demo_form.asp' method='get'>
     <input  list='browsers' name='browser'>
     <datalist  id='browsers'>
             <option value='Internet Explorer'>
             <option value='Firefox'>
             <option value='Chrome'>
             <option value='Opera'>
     </datalist>
     <input type='submit'>
<form/>

تگ <keygen> :
هدف از قرار دادن تگ <keygen> در یک فرم ، ایجاد راهی برای شناسایی هویت کاربران است . این تگ یک فیلد کلید جفتی ( کلید رمز نگاری شده ) را در فرم های Html ایجاد می کند . هنگامی که کاربر مقدار را در فیلد وارد کرده و فرم را ارسال می کند ، دو کلید تولید می شود . یکی کلید خصوصی و دیگری کلید عمومی .
 کلید خصوصی بصورت محرمانه بر روی کامپیوتر کاربر ذخیره شده و کلید عمومی به سرور ارسال می شود . کلید عمومی می تواند به عنوان یک شناسه یا مدرک برای شناسایی کاربر در آینده استفاده می شود .

برنامه برای شناسایی کاربر در آینده مقدار جفت کلید عمومی و خصوصی را مقایسه کرده و هویت آن را شناسایی می کند .

شکل کلی استفاده از این تگ به صورت زیر می باشد :

<keygen  id='id'  name ='name> 


این تگ در مرورگرهای کروم ، فایرفاکس و اپرا پشتیانی می شود .
در مثال زیر یک کنترل <input> تگ را ایجاد کرده و به وسیله یک تگ <keygen> ، مقدار وارد شده در آن را ، قبل از ارسال به سرور ، کد  گذاری کرده ایم .

برای  مشاهده خروجی مثال ، یک نام را در کادر متن وارد کرده و سپس Enter را بزنید . صفحه جاری به صفحه مقصد ارسال شده و دو پارامتر به نام های user_name و security به نوار آدرس صفحه اضافه می شوند :

 

<form action='receive_keygen.html' method='get'>
     Username: <input type='text' name='user_name'
     Encryption: <keygen name='security'>
    <input type='submit'>
<form/>

تگ <output> :

این تگ می تواند خروجی یک عمل محاسباتی را بر روی صفحه نمایش دهد . این عمل محاسباتی معمولا توسط یک اسکریپت اجرا می شود .

شکل کلی استفاده از تگ <output>  بصورت زیر است :

 

<output  name='name'  for='value'>   </output>   

 

توضیح ویژگی های name و for  برای این تگ :
•    Name : این خاصیت یک نام را برای کنترل تعیین می کند .
•    For : این خاصیت ارتباط بین نتیجه محاسبه و المنت هایی که در عمل محاسبه بکار برده شده اند را مشخص می کند .

این تگ در مرورگرهای کروم ، فایرفاکس و اپرا پشتیانی می شود .

در مثال زیر یک عمل محاسباتی جمع مقدار دو کنترل را انجام داده و خروجی آن را توسط یک تگ <output> ، نمایش داده ایم :

 

<form action='output.aspx' oninput='x.value=parseInt(a.value)+parseInt(b.value)'> 0
      <input type='range' id='a' value='50'> 100   +   <input type='number' id='b' value='50'>
      = <output name='x' for='a b'></output>
<form/>
{code brush:php}

 
خاصیت autocomplete :
خاصیت autocomplete تعیین می کند که آیا کادر های متن موجود در فرم بایستی قابلیت پر شدن خودکار داشته باشند یا خیر . هنگامی که فیلد های موجود در یک فرم قابلیت پر شدن خودکاردارند ، مرورگر بصورت اتوماتیک مقادیر آنها را بر حسب مقادیری که قبلا کاربر وارد نموده است ، پر می کند .
این خاصیت در حالت پیش فرض خاموش است و در یک فرم با کنترل های زیر کار می کند :

•    text
•    search
•    url
•    password
•    date
•    rang
•    email
•    color

شکل کلی استفاده از این تگ به صورت زیر می باشد :

 

<input   autocomplete = ' on | off” >

 توضیح ویژگی های on و off در این تگ :
•    on : در این حالت قابلیت پرشدن خودکار فیلد ها در فرم فعال است .
•    off : در این حالت قابلیت پرشدن خودکار فیلد ها در فرم غیر فعال است .

این خاصیت در تمام مرورگرهای اصلی به جز اپرا ، پشتیانی می شود .

در مثال زیر ، دو فرم را برای روی صفحه قرار داده ایم . در فرم اول مقدار خاصیت autocomplete روی on و در فرم دوم روی off تنظیم شده است .

 

<form id='form1' autocomplete='on'>
      First name:<input type='text' name='fname'><br />
      E-mail: <input type='email' name='email'><br />
     <input type='submit' value='form1' >
</form>
<br />
<br />
<form id='form2' autocomplete='off'>
      First name:<input type='text' name='fname'><br />
      E-mail: <input type='email' name='email'><br />
      <input type='submit' value='form2'>
<form/>

 
خاصیت novalidate :

این خاصیت در یک فرم تعیین می کند که آیا مقادیر وارد شده در فیلد های آن در هنگام ارسال اعتبارسنجی شوند یا خیر .

این خاصیت یک مقدار Boolean است و اگر آن را در تگ ابتدایی <form> قرار دهید ، مانع اعتبارسنجی داده های ورودی در فیلد های فرم می شود . برای مثال اگر در یک کنترل Email در فرم وجود داشته باشد و این خاصیت را برای فرم تنظیم کرده باشید ، حتی اگر آدرس ایمیل با فرمت نادرست نیز وارد کنید ، فرم ارسال می شود .

شکل کلی استفاده از این تگ به صورت زیر می باشد :

<form   novalidate >    

 

این خاصیت در مرورگرهای گوگل کروم, اینترنت اکسپلورر, موزیلا فایرفاکس , اپرا  پشتیبانی می شود .

در مثال زیر ، دو فرم را برای روی صفحه قرار داده  و  برای فرم دوم مقدار خاصیت novalidate آن را تنظیم کرده ایم . همانطور که می بینید ، در فرم دوم قابلیت اعتبار سنجی آن از بین رفته و می توانید ایمیل با فرمت های نا صحیح نیز وارد نمایید .:

 

<form id='form1' >
      First name:<input type='text' name='fname'><br />
      E-mail: <input type='email' name='email'><br />
     <input type='submit' value='form1' >
</form>
<br />
<br />
<form id='form2' novalidate>
      First name:<input type='text' name='fname'><br />
      E-mail: <input type='email' name='email'><br />
      <input type='submit' value='form2'>
<form/>

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا