ژ.ب ٢١٤٤

به‌ HTML5 پرۆژه‌كه‌ت باشتر بگوونجێنه‌ [فۆرم له‌ HTML5]


Usability فاكته‌رێكی گرینگه‌ له‌ بواری داڕشتنی وێب و وێبی ئه‌مڕۆ به‌بێ درووست گوونجاندن بۆ به‌كارهێنانی ئاسان زۆربه‌ی كات وێبێكی كێشه‌داره‌. درووست گوونجاندن و ڕێكخستنی هه‌ر ماڵپه‌ڕێك سوودی زۆرتری هه‌یه‌ له‌وه‌ی كه‌ جێبه‌جێ نه‌كرێت، بۆ نموونه‌ له‌ بواری ستاندارێتی وێبدا باشتر گوونجاوه‌، به‌كارهێنه‌رانی ڕه‌زامه‌ندی باشتریان ده‌بێت له‌سه‌ر چۆنیه‌تی كاركردنی ماڵپه‌ڕ، به‌كاربردنی HTML5 وا ده‌كات كه‌ له‌ هه‌موو وێبگه‌ڕه‌كاندا (به‌تایبه‌ت به‌ناوبانگه‌كان) له‌ سه‌ر هه‌موو ئامێرێك دا به‌ درووستی كار بكات كه‌ له‌ خۆیدا كاتی داڕشتنی زۆر پاشه‌كه‌وت ده‌كات بۆ وێبداڕێژ.


گوونجاندنی خانه‌كانی فۆرم به‌ درووستی گرینگترن بۆ ئامێره‌كانی وه‌ك كۆمپیوته‌ری ده‌ستیی Tablet و مۆبایلی ژیر Smartphone به‌ هۆكاری ئه‌وه‌ی كه‌ ڕوومه‌تی بچووكتریان هه‌یه‌ و نووسین له‌سه‌ریان وه‌ك له‌سه‌ر ته‌خته‌كلیلی ئاسایی كۆمپیوته‌ر ئاسان نییه‌، هه‌رچی كاری نووسین له‌سه‌ر ئه‌و ئامێرانه‌ بۆ به‌كارهێنه‌ر ئاسانتر بكرێته‌وه‌ درووسته‌، به‌تایبه‌ت له‌ كاتی پڕكردنه‌وه‌ی فۆرم.


له‌ ئه‌م بابه‌ته‌دا چۆنیه‌تی به‌كاربردنی تایبه‌تمه‌ندییه‌كانی فۆرم له‌ HTML5 ده‌خه‌مه‌ ڕوو كه‌ ده‌كرێت به‌كارببرێن بۆ باشتر گوونجاندنی فۆرمه‌كانی سه‌ر وێب بۆ پێكاندنی مه‌به‌ستی درووست له‌ شوێنی درووست.


فۆرمێكی په‌یوه‌ندی ساده‌ وه‌ك نموونه‌ له‌ بابه‌ته‌كه‌دا هه‌یه‌ كه‌ ٤ خانه‌ی له‌ خۆ گرتووه‌، خانه‌ی ناو، ژماره‌ ته‌له‌فۆن، ئیمه‌یل و په‌یام. خانه‌ی ناو ده‌ق Text ی ئاسایی له‌ خۆ ده‌گرێت، ژماره‌ ته‌له‌فۆن ته‌نیا ژماره‌ Number له‌ خۆ ده‌گرێت، ئیمه‌یل ده‌ق Text له‌ خۆ ده‌گرێت به‌ڵام به‌ فۆرماتی ئیمه‌یل (له‌ درێژه‌ی بابه‌تدا جیاوازی ڕوون ده‌بێته‌وه‌) و له‌ كۆتادا خانه‌ی په‌یام نووسین كه‌ وه‌ك خانه‌ی ناو ته‌نیا ده‌قی ئاسایی له‌ خۆ ده‌گرێت و جۆری TextArea ده‌بێت.


فۆرمه‌كه‌ له‌ كۆده‌كانی خواره‌وه‌ پێكهاتووه‌،


<form action="index.php" method="post" name="html5" id="html5">   

<label>ناو: <input type="text" name="naw" id="naw">
</label>
<label>ژماره‌ی ته‌له‌فۆن:<input type="text" name="tel" id="tel">
</label>
<label>ئیمه‌یل:<input type="text" name="email" id="email">
</label>
<label>په‌یام:<textarea name="msg" cols="35" rows="5" id="msg"></textarea>
</label>
<input name="submit" type="submit" value="ناردن" id="submit">
</form>

كۆده‌كانی سه‌ره‌وه‌ بریتین له‌ خانه‌ ناوبراوه‌كانی سه‌ره‌وه‌ و له‌سه‌ر بنه‌مای HTML ی كۆنتر نووسراون كه‌ هه‌موو خانه‌كان به‌ شێوازی text پێناسه‌ كراون. له‌ ویبگه‌ڕی ئاسایی كۆمپیوته‌ر به‌ درووستی ده‌رده‌كه‌ون، به‌ڵام ئه‌گه‌ر له‌ سه‌ر ئامێرێكی وه‌ك ئایفۆن یان ئایپاد فۆرمه‌كه‌ پیشان بدرێت به‌ شێوازی خواره‌وه‌ ده‌رده‌كه‌وێت. له‌ كاتی كرته‌ كردنه‌ نێو خانه‌ی ژماره‌ی ته‌له‌فۆن ته‌خته‌كلیل ده‌كرێته‌وه‌،


نموونه‌ی ته‌خته‌كلیلی ئایفۆن


به‌كارهێنه‌ر ده‌یه‌وێت ژماره‌ بنووسێت، به‌ڵام ته‌خته‌كلیل ژماره‌كانی پیشان نه‌داوه‌، بۆ ئه‌وه‌ی پیشان بدرێن به‌كارهێنه‌ر ده‌بێت كرته‌ له‌ هێمای ژماره‌كان بكات و ئه‌و كات ژماره‌كانی بۆ ده‌رده‌كه‌وێت.


به‌ هه‌مان شێوه‌ ئه‌گه‌ر بیه‌وێت ئیمه‌یل بنووسێت ته‌خته‌كلیلی خواره‌وه‌ی بۆ ده‌رده‌كه‌وێت،


نموونه‌ی ته‌خته‌كلیلی ئایفۆن له‌ كاتی نووسینی ئیمه‌یل


ئه‌گه‌ر كۆده‌كانی سه‌ره‌وه‌ ده‌ستكاری بكه‌ین و خانه‌ی ژماره‌ی ته‌له‌فۆن بگۆڕین بۆ جۆری number ئه‌و كاته‌ به‌ كرته‌ كردن له‌ نێو خانه‌ی ژماره‌ی ته‌له‌فۆن ڕاسته‌وخۆ ژماره‌كان ده‌رده‌كه‌ون و به‌كارهێنه‌ر ده‌توانێت ده‌ستبه‌جێ زانیارییه‌كانی بنووسێت.


<input type="number" name="tel" id="tel">

ئه‌نجامه‌كه‌ی ده‌بێته‌،


نموونه‌ی ته‌خته‌كلیلی ئایفۆن له‌ كاتی نووسینی ژماره‌


كه‌ به‌ گۆڕانكارییه‌كی بچووك هه‌نگاوێكی بۆ به‌كارهێنه‌ر كه‌م كرده‌وه‌. ده‌توانین باشتر بیگونجێنین؟ به‌ڵێ، له‌ HTML5 خانه‌ی تایبه‌ت به‌ ژماره‌ی ته‌له‌فۆن ده‌كرێت به‌ جۆری Tel پێناس بكرێت كه‌ ته‌نیا ته‌خته‌كلیلی ژماره‌یی پیشان ده‌دات، كۆده‌كانی سه‌ره‌وه‌ ده‌ستكاری ده‌كه‌ین و number ده‌گۆڕین بۆ tel، ئه‌نجامه‌كه‌ی وه‌ك خواره‌وه‌ ده‌بێت،


نموونه‌ی ته‌خته‌كلیلی ئایفۆن له‌ كاتی نووسینی ژماره‌ی ته‌له‌فۆن


وه‌ك ڕوونه‌ به‌ گۆڕینی جۆر له‌ text بۆ tel كاری به‌كارهێنه‌رمان به‌ شێوه‌یه‌كی زۆر باش ئاسان كرده‌وه‌، یه‌كه‌م به‌ پیشاندانی ته‌خته‌كلیلێكی گوونجاوتر بۆ نووسینی ژماره‌ و دووه‌م به‌ ده‌رخستنی ژماره‌كان به‌ شێوازێكی گه‌وره‌ كه‌ نووسینیان ئاسان بێت.


له‌سه‌ر هه‌مان بنه‌ما جۆری خانه‌ی ئیمه‌یل له‌ text ده‌گۆڕین بۆ email، ئه‌و كات هێمای ئیمه‌یل @ ڕاسته‌وخۆ له‌سه‌ر ته‌خته‌كلیل ده‌رده‌كه‌وێت،


نموونه‌ی ته‌خته‌كلیلی ئایفۆن له‌ كاتی نووسینی ئیمه‌یل


تا ئێستا هه‌موو گۆڕانكارییه‌كان به‌ سوودی به‌كارهێنه‌ر بوون و بۆ ئێمه‌ش وه‌ك وێبداڕێژ كاتێكی زۆر كه‌می پێویست بوو بۆ جێبه‌جێ كردنیان، به‌ڵام وه‌ك ڕوونه‌ له‌ بواری وێبداڕشتن، هه‌موو چاره‌سه‌رییه‌كی ئه‌وه‌نده‌ به‌سوود و ئاسان به‌بێ نه‌خۆشی نییه‌. ئه‌گه‌ر خانه‌یه‌كی جۆری number له‌ هه‌مان فۆرم دا زۆر بكه‌ین و له‌ وێبگه‌ڕێكی ئاسایی كۆمپیوته‌ر بكه‌ینه‌وه‌ بۆ نموونه‌ Google Chrome ئه‌و كاته‌ شتێكی وه‌ك ئه‌وه‌ی خواره‌وه‌ ده‌بینین،


نموونه‌ی فۆرم له‌ وێبگه‌ڕی Google Chrome


هه‌موو تایبه‌تمه‌ندییه‌كانی فۆرم له‌ HTML5 به‌ درووستی له‌ هه‌موو وێبگه‌ڕه‌كاندا ده‌رناكه‌ون، وه‌ك ده‌بینین خانه‌ی ژماره‌ به‌ هه‌مان شێوه‌ ده‌رناكه‌وێت كه‌ وه‌ك له‌سه‌ر ئافۆن بینیمان، كێشه‌ی ناوبراو چه‌ند چاره‌سه‌ریی هه‌یه‌،


چاره‌سه‌ركردن به‌ JavaScript

چاره‌سه‌ركردن به‌ شێوازێكی دیكه‌ی كۆد نووسین


چاره‌سه‌رییه‌كی بچووك كه‌ تا ئێستا به‌ درووستی بۆ من كاری كردووه‌ بریتییه‌ له‌ چه‌ند دێڕ كۆدی PHP خواره‌وه‌،


له‌ سه‌ره‌تای په‌ڕه‌كه‌ت له‌ هه‌ر شوێنێك كۆدی خواره‌وه‌ دابنێ كه‌ جۆری وێبگه‌ڕی به‌كارهێنه‌ر ده‌دۆزێته‌وه‌،


<?php

$agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/Android|webOS|iPhone|iPod|BlackBerry|iPad/i',$agent)){
$field = "number";
}else{
$field = "text";
}
?>

دواتر كۆدی HTML ی تایبه‌ت به‌ خانه‌ به‌ شێوازی خواره‌وه‌ ده‌نووسین،


<input type="<?php echo $field; ?>" name="temen" id="temen">


واته‌ ئه‌گه‌ر وێبگه‌ڕی به‌كارهێنه‌ر جۆری مۆبایل بوو ئه‌و كاته‌ شێوازی خانه‌ بگۆڕه‌ بۆ tel، ئه‌گه‌ر وێبگه‌ڕی ئاسایی كۆمپیوته‌ر بوو ئه‌و كاته‌ وه‌ك text ی ئاسایی پیشانی بدات.


ئه‌نجامی كۆتایی هه‌موو كۆده‌كانی سه‌ره‌وه‌ پێكه‌وه‌،


<?php

$agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/Android|webOS|iPhone|iPod|BlackBerry|iPad/i',$agent)){
$field = "number";
}else{
$field = "text";
}
?>
<form action="index.php" method="post" name="html5" id="html5">
<label>ناو:
<input type="text" name="naw" id="naw">
</label>
<label>ته‌مه‌ن:
<input type="<?php echo $field; ?>" name="temen" id="temen">
</label>
<label>ژماره‌ی ته‌له‌فۆن:
<input type="tel" name="tel" id="tel">
</label>
<label>ئیمه‌یل:
<input type="email" name="email" id="email">
</label>
<label>په‌یام:
<textarea name="msg" cols="35" rows="5" id="msg"></textarea>
</label>
<input name="submit" type="submit" value="ناردن" id="submit">
</form>

به‌ ئه‌و شێوه‌یه‌ فۆرمه‌كه‌ بزۆك ده‌بێت و فۆرم و شێوازی درووست بۆ به‌كارهێنه‌ری درووست پیشان ده‌دات.
كۆتایی.


نووسه‌ر: ئاسۆ نادری

تكایه‌ هه‌ژمارێك درووست بكه‌ بۆ ئه‌وه‌ی بتوانیت بۆچوون بنووسیت، كرته‌ له‌ ئێره‌ بكه‌ بۆ درووستكردنی هه‌ژمار
logo2013-03-15

شێوازێکی دروست و گونجاوە ، بژیت .

ئاسۆ نادری2013-03-01

سوپاس هاوڕێیان.

گەردیلەى زانست-0001-11-30

بابەتەکەت زۆر لە شوێنی خۆیەتى دەستەکانت خۆش

ayman_kurd-0001-11-30

بابه‌تێکی به‌ سووده‌

ده‌ستخۆش کاک ئاسۆ