learn html 5

‫اﻟﻤﺮﺟﻊ اﻟﻌﺮﺑﻲ‬

‫5‪HTML‬‬

‫إﻋﺪاد اﻟﻤﻬﻨﺪس: إﺳﻤﺎﻋﻴﻞ ﻋﻨﺠﺮﻳﻨﻲ‬



‫اﻹﺻﺪار 0.1‬



‫‪ismaeel.enjreny@gmail.com‬‬

‫س‬ ‫ا‬

‫ھ ا ـ 5‪HTML‬؟ ...............................................................................................................................................5‬

‫ف دأت رة 5‪HTML‬؟ .....................................................................................................................................5‬

‫5‪5.................................................................................................................................. HTML‬‬ ‫ا زات ا د دة‬

‫ت ......................................................................................................................................5‬ ‫د م 5‪HTML‬‬

‫5‪6.................................................................................................................................. HTML‬‬ ‫ر ا د دة‬ ‫ا‬

‫5‪6..................................................................................................... HTML‬‬ ‫ت ‪ Markup‬ا د دة‬ ‫را‬

‫ددة...................................................................................................................8‬ ‫ر ا د دة د م ا و ط ا‬ ‫ا‬

‫ر ‪9............................................................................................................................................. Canvas‬‬ ‫ا‬

‫ذج ................................................................................................................................9‬ ‫ا‬ ‫ر ا د دة‬ ‫ا‬

‫ر ‪9......................................................................................................... input‬‬ ‫ا‬ ‫‪type‬‬ ‫ا ما دد‬

‫5‪11................................................................................................................................ HTML‬‬ ‫ر ‪video‬‬ ‫ا‬

‫5‪11.................................................................................................................... HTML‬‬ ‫أ واع ا د و ا د و‬

‫ر ‪11.............................................................................................................................video‬‬ ‫دم ا‬ ‫ف‬

‫‪12.................................................................................................................................................. IE‬‬ ‫ا‬

‫ر ‪12................................................................................................................................... video‬‬ ‫واص ا‬

‫5‪12................................................................................................................................ HTML‬‬ ‫ر ‪audio‬‬ ‫ا‬

‫5‪12............................................................................................................... HTML‬‬ ‫ا د و‬ ‫و‬ ‫تا‬ ‫ا‬

‫ر ‪13............................................................................................................................... audio‬‬ ‫لا‬ ‫ف‬

‫‪13.................................................................................................................................................. IE‬‬ ‫ا‬

‫ر ‪13................................................................................................................................ audio‬‬ ‫صا‬

‫ر ‪14............................................................................................................................................... canvas‬‬ ‫ا‬

‫5‪14.................................................................................................................. HTML‬‬ ‫ر ‪canvas‬‬ ‫ھو ا‬

‫ر ‪14.................................................................................................................................... canvas‬‬ ‫ءا‬ ‫إ‬

‫دام ‪14................................................................................................. JavaScript‬‬ ‫ر ‪canvas‬‬ ‫ار م‬

‫ر ‪15......................................................................................................................... canvas‬‬ ‫ا‬ ‫د‬ ‫ما‬

‫‪15........................................................................................................................... canvas‬‬ ‫ن ار م‬ ‫أ‬

‫ر م ط ..................................................................................................................................................51‬

‫ر م دا رة ................................................................................................................................................71‬

‫ط ل درج ا ون ............................................................................................................................81‬ ‫ر م‬

‫‪19.......................................................................................................................... canvas‬‬ ‫ورة‬ ‫و‬

‫5‪20............................................................................................................... HTML‬‬ ‫دم‬ ‫دا‬ ‫ت‬ ‫زنا‬



‫2‬

20.................................................................................................................................... localStorage ‫ا‬

21................................................................................................................................ sessionStorage ‫ا‬

22............................................................................................................. HTML5 input ‫ر‬ ‫ا واع ا د دة‬

23................................................................................................ input ‫ر‬ ‫ا‬ ‫واع ا د دة‬ ‫ت‬ ‫د ما‬

23................................................................................................................................. email ‫ل ا د ل‬ ‫وع‬

23...................................................................................................................................... url ‫ل ا د ل‬ ‫وع‬

24............................................................................................................................. number ‫ل ا د ل‬ ‫وع‬

25................................................................................................................................. range ‫ل ا د ل‬ ‫وع‬

25...................................................................................... Date Pickers ‫وا و ت‬ ‫تا ر‬ –‫لا د ل‬ ‫وع‬

26............................................................................................................................... search ‫ل ا د ل‬ ‫وع‬

26...............................................................................................................Form Elements ‫ذج ا د دة‬ ‫را‬

26....................................................................................................................... ‫ر ا د دة‬ ‫ت‬ ‫د ما‬

27.......................................................................................................................................... datalist ‫ر‬ ‫ا‬

27........................................................................................................................................... keygen ‫ر‬ ‫ا‬

28........................................................................................................................................... output ‫ر‬ ‫ا‬

28.................................................................................................................... HTML5 ‫ذج ا د دة‬ ‫صا‬

29.............................................................................................................................. autocomplete ‫ا‬

30..................................................................................................................................... autofocus ‫ا‬

30............................................................................................................................................. form ‫ا‬

31................................................................................................. Form ‫ر‬ ‫نا‬ ‫وزھ‬ ‫ن‬ ‫صا‬ ‫ا‬

32............................................................................................................................................ width ‫ا‬

32........................................................................................................................................... height ‫ا‬

32................................................................................................................................................ list ‫ا‬

32............................................................................................................................................... min ‫ا‬

33.............................................................................................................................................. max ‫ا‬

33.............................................................................................................................................. step ‫ا‬

33........................................................................................................................................ multiple ‫ا‬

33.................................................................................................................................... novalidate ‫ا‬

34......................................................................................................................................... pattern ‫ا‬

34.................................................................................................................................. placeholder ‫ا‬

34....................................................................................................................................... required ‫ا‬

34................................................................................................................. HTML5 ‫ر‬ ‫ص ا د دة‬ ‫ا‬



3

4

‫ھ ا ـ 5‪HTML‬؟‬

‫ﺗﻌﺘﱪ 5‪ HTML‬ﻫﻲ اﳉﻴﻞ اﳉﺪﻳﺪ اﻟﻘﻴﺎﺳﻲ ﻟﻜﻞ ﻣﻦ ‪ HTML, XHTML‬و ‪ ,HTML DOM‬وﻳُﺬﻛﺮ أن‬

‫اﻹﺻﺪار اﻟﻘﺪﱘ ﻣﻦ ‪ HTML‬ﻛﺎن 9991 وﻗﺪ ﺗﻐﲑ ﻋﺎﱂ اﻟﺸﺒﻜﺔ اﻟﻌﻨﻜﺒﻮﺗﻴﺔ ‪ Internet‬ﻛﺜﲑاً ﻣﻨﺬ ذﻟﻚ اﻟﻮﻗﺖ, وﻣﺎزال‬

‫5‪ HTML‬ﻗﻴﺪ اﻟﺘﻄﻮﻳﺮ ﺣﱴ ﺗﺎرﳜﻪ ﻣﻊ اﻟﻌﻠﻢ أن ﺑﻌﺾ اﻹﺻﺪارات اﻷﺧﲑة ﻣﻦ اﳌﺘﺼﻔﺤﺎت ﺗﺪﻋﻢ ﺑﻌﺾ ﻣﻴﺰات 5‪.HTML‬‬





‫أت ة 5‪HTML‬؟‬

‫إن 5‪ HTML‬ﻫﻮ ﲦﺮة اﻟﺘﻌﺎون ﺑﲔ ‪ (World Wide Web Consortium) w3c.org‬وﺑﲔ ا‪‬ﻤﻮﻋﺔ‬

‫‪ .(Web Hypertext Application Technology Working Group) WHATWG‬وﻗﺮروا أن أﻫﻢ‬

‫ﻗﻮاﻋﺪ 5‪ HTML‬ﻫﻲ:‬



‫• اﳌﻴﺰات اﳉﺪﻳﺪة ﳚﺐ أن ﻳﺘﻢ ﺑﻨﺎؤﻫﺎ اﻋﺘﻤﺎداً ﻋﻠﻰ ‪ HTML, CSS, DOM‬و ‪.JavaScript‬‬

‫• ﺗﻘﻠﻴﻞ اﳊﺎﺟﺔ إﱃ ﻋﻨﺎﺻﺮ ﺧﺎرﺟﻴﺔ ﻣﺜﻞ اﻟﻔﻼش ﻣﺜﻼً.‬

‫• ﻣﻴﺰات أﻓﻀﻞ ﰲ ﻋﻤﻠﻴﺔ ﻣﻌﺎﳉﺔ اﻷﺧﻄﺎء.‬

‫• اﳌﺰﻳﺪ ﻣﻦ اﻟﻌﻼﻣﺎت ‪ Markup‬ﻟﻼﺳﺘﻌﺎﺿﺔ ﻋﻦ ﻛﺘﺎﺑﺔ ﺷﻴﻔﺮة ‪.JavaScript‬‬

‫• ﳚﺐ أن ﺗﻜﻮن 5‪ HTML‬ﻣﺴﺘﻘﻠﺔ ﻋﻦ ﻧﻮع اﻷﺟﻬﺰة اﻟﱵ ﺗﻌﻤﻞ ﻋﻠﻴﻬﺎ.‬

‫• ﻋﻤﻠﻴﺔ ﺗﻄﻮﻳﺮ 5‪ HTML‬ﳚﺐ أن ﺗﻜﻮن ﻣﻌﻠﻨﺔ ﳉﻤﻴﻊ اﳌﻬﺘﻤﲔ ﺑﻌﺎﱂ اﻟﺸﺒﻜﺔ اﻟﻌﻨﻜﺒﻮﺗﻴﺔ ‪.Internet‬‬





‫ة 5‪HTML‬‬ ‫ات ا‬ ‫ا‬

‫• اﻟﻌﻨﺼﺮ ‪ canvas‬ﻟﺘﻨﻔﻴﺬ اﻟﻌﻤﻠﻴﺎت اﻟﺮﺳﻮﻣﻴﺔ.‬

‫• اﻟﻌﻨﺼﺮﻳﻦ ‪ video, audio‬ﻟﺘﺸﻐﻴﻞ ﻣﻠﻔﺎت اﻟﺼﻮت واﻟﺼﻮرة.‬

‫• دﻋﻢ أﻓﻀﻞ ﻟﺘﺨﺰﻳﻦ اﻟﺼﻔﺤﺎت ﰲ ﳕﻂ ﻋﺪم اﻻﺗﺼﺎل ‪.offline storage‬‬

‫• ﻋﻨﺎﺻﺮ ﺟﺪﻳﺪة ﻟﺪﻋﻢ أﻧﻮاع ﻣﻌﻴﻨﺔ ﻣﻦ اﶈﺘﻮى ﻣﺜﻞ ‪ article, footer, header, nav, section‬وﻏﲑﻫﺎ.‬

‫• ﻋﻨﺎﺻﺮ إدﺧﺎل ﺟﺪﻳﺪة ﻣﺜﻞ ‪.calendar, date, time, email, url, search‬‬





‫ت‬ ‫5‪HTML‬‬ ‫د‬

‫ﻓﺎﻳﺮﻓﻮ‬

‫ﺣﱴ ﺗﺎرﻳﺦ ﻛﺘﺎﺑﺔ ﻫﺬﻩ اﳌﻘﺎﻟﺔ ﻓﺈن اﻹﺻﺪارات اﻷﺧﲑة ﻣﻦ ﺳﻔﺎري ‪ ,Safary‬ﻛﺮوم ‪ ,Chrome‬ﻛﺲ ‪,Firefox‬‬

‫أوﺑﺮا ‪ Opera‬ﺗﺪﻋﻢ ﺑﻌﺾ ﻣﻴﺰات 5‪ ,HTML‬و 9‪ IE‬ﺳﻴﺪﻋﻢ ﺑﻌﺾ ﻣﻴﺰات 5‪.HTML‬‬







‫5‬

‫ة 5‪HTML‬‬ ‫ا‬ ‫ا‬

‫ﻟﻘﺪ ﻃﺮأ اﻟﻜﺜﲑ ﻣﻦ اﻟﺘﻐﲑ ﻋﻠﻰ ﻋﺎﱂ اﻟﺸﺒﻜﺔ اﻟﻌﻨﻜﺒﻮﺗﻴﺔ ‪ Internet‬ﻣﻨﺬ 9991 ﻋﻨﺪﻣﺎ اﻋﺘﻤﺪت اﳌﻮاﺻﻔﺎت اﻟﻘﻴﺎﺳﻴﺔ ﻟـ‬

‫10.4‪ ,HTML‬وﺣﺎﻟﻴﺎً ﺑﻌﺾ ﻋﻨﺎﺻﺮ 4‪ HTML‬ﱂ ﺗﻌﺪ ﺗُﺴﺘﺨﺪم أو ﻻ ﺗﺴﺘﺨﺪم ﺑﺎﻟﻄﺮﻳﻘﺔ اﻟﱵ ﻛﺎن ﻣﻦ اﳌﻔﱰض أن ﺗﺴﺘﺨﺪم‬

‫‪‬ﺎ, ﻟﺬﻟﻚ 5‪ HTML‬وﻟﺘﺤﻘﻴﻖ ﺣﺎﺟﺎت اﻟﺸﺒﻜﺔ اﻟﻌﻨﻜﺒﻮﺗﻴﺔ ‪ Internet‬اﳌﺘﺠﺪدة ﺗﻀﻢ ﻋﻨﺎﺻﺮ ﺟﺪﻳﺪة ﻟﺒﻨﺎء ﺑﻨﻴﺔ أﻓﻀﻞ, ﺗﺪع‬

‫اﻟﺮﺳﻮﻣﻴﺎت واﻟﻮﺳﺎﺋﻂ اﳌﺘﻌﺪدة إﺿﺎﻓﺔ إﱃ ﺑﻨﺎء أﻓﻀﻞ ﻟﻠﻨﻤﺎذج.‬



‫5‪HTML‬‬ ‫ة‬ ‫ت ‪ Markup‬ا‬ ‫ا‬

‫>‪‪‪‪‪‪ ,‪‪‪.‪‪‪‪‪‪‪‪‪‪‪.‪‪‪‪‪‪‪‪‪‪‪‪‪ ‪ "‪‪"‪/ "‪/ "4‪‪‪‪ ‪ ‪ audio"‪"‪/ "‪/ "‪‪‪"‪‪‪











Your browser does not support the canvas element.











var c=document.getElementById("myCanvas");



var cxt=c.getContext("2d");



cxt.moveTo(10,10);



cxt.lineTo(150,50);



cxt.lineTo(10,50);



cxt.stroke();





















16

‫دا ة‬ ‫ر‬

canvas ‫ﺎ وﻣﻮﻗﻌﻬﺎ ﺿﻤﻦ اﻟﻌﻨﺼﺮ‬‫ﻳﺘﻢ رﺳﻢ اﻟﺪاﺋﺮة ﺑﺘﺤﺪﻳﺪ ﺣﺠﻤﻬﺎ وﻟﻮ‬



















Your browser does not support the canvas element.











var c=document.getElementById("myCanvas");



var cxt=c.getContext("2d");



cxt.fillStyle="#FF0000";



cxt.beginPath();



cxt.arc(70,18,15,0,Math.PI*2,true);



cxt.closePath();



cxt.fill();















17

‫رج ا ن‬ ‫ر‬

‫ﻣﺘﺪر‬

‫رﺳﻢ ﻣﺴﺘﻄﻴﻞ ج اﻟﻠﻮن ﺑﺘﺤﺪﻳﺪ اﻷﻟﻮان اﻟﱵ ﺳﺘﺴﺘﺨﺪم وأﺑﻌﺎد ﻫﺬا اﳌﺴﺘﻄﻴﻞ‬



















Your browser does not support the canvas element.











var c=document.getElementById("myCanvas");



var cxt=c.getContext("2d");



var grd=cxt.createLinearGradient(0,0,175,50);



grd.addColorStop(0,"#FF0000");



grd.addColorStop(1,"#00FF00");



cxt.fillStyle=grd;



cxt.fillRect(0,0,175,50);





18



















canvas ‫رة‬ ‫و‬

canvas ‫وﺿﻊ ﺻﻮرة ﻓﻮق اﻟﻌﻨﺼﺮ‬



















Your browser does not support the canvas element.











var c=document.getElementById("myCanvas");



var cxt=c.getContext("2d");



var img=new Image()



img.src="img_flwr.png"





19

‫;)0,0,‪cxt.drawImage(img‬‬



‫>‪‪‪"‪



:‫وﻓﻴﻤﺎ ﻳﻠﻲ ﻣﺜﺎل ﻋﻦ ﻛﻴﻔﻴﺔ ﲣﺰﻳﻦ ﻋﺪد ﻣﺮات زﻳﺎرة اﳌﺴﺘﺨﺪم ﻟﻠﺼﻔﺤﺔ‬







if (localStorage.pagecount)



{



localStorage.pagecount=Number(localStorage.pagecount) +1;



}



else



{



localStorage.pagecount=1;



}



document.write("Visits "+ localStorage.pagecount + " time(s).");







sessionStorage ‫ا‬

‫ ﳛﺰن اﻟﺒﻴﺎﻧﺎت ﳉﻠﺴﺔ واﺣﺪة ﻓﻘﻂ وﻳﺘﻢ ﺣﺬف ﻫﺬﻩ اﻟﺒﻴﺎﻧﺎت ﲟﺠﺮد أن ﻳﻐﻠﻖ اﳌﺴﺘﺨﺪم‬sessionStorage ‫اﳌﻨﻬﺞ‬

:‫اﳌﺘﺼﻔﺢ, وﻓﻴﻤﺎ ﻳﻠﻲ ﻛﻴﻔﻴﺔ إﻧﺸﺎء واﺳﱰﺟﺎع اﻟﺒﻴﺎﻧﺎت‬







sessionStorage.lastname="Smith";



document.write(sessionStorage.lastname);







21

:‫وﻓﻴﻤﺎ ﻳﻠﻲ ﻣﺜﺎل ﻋﻦ ﻛﻴﻔﻴﺔ ﲣﺰﻳﻦ ﻋﺪد ﻣﺮات زﻳﺎرة اﳌﺴﺘﺨﺪم ﻟﻠﺼﻔﺤﺔ ﰲ اﳉﻠﺴﺔ اﳊﺎﻟﻴﺔ‬







if (sessionStorage.pagecount)



{



sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;



}



else



{



sessionStorage.pagecount=1;



}



document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");









HTML5 input ‫ة‬ ‫اع ا‬ ‫ا‬

‫ ﰲ ﳕﺎذج اﻹدﺧﺎل, ﻫﺬﻩ اﳌﻴﺰات اﳉﺪﻳﺪة ﺗﻘﺪم ﲢﻜﻢ أﻓﻀﻞ‬input ‫ ﲢﺘﻮي ﻋﻠﻰ أﻧﻮاع ﺟﺪﻳﺪة ﻟﻠﻌﻨﺼﺮ‬HTML5

‫ﺷﺮ‬

:‫ﺑﻌﻤﻠﻴﺎت إدﺧﺎل اﻟﺒﻴﺎﻧﺎت واﻟﺘﺤﻘﻖ ﻣﻦ ﺻﺤﺘﻬﺎ. وﻓﻴﻤﺎ ﻳﻠﻲ ﺳﻴﺘﻢ ح اﻷﻧﻮاع اﻟﺘﺎﻟﻴﺔ‬



.email •

.url •

.number •

.range •

.Date pickers (date, month, week, time, datetime, datetime-local) •

.search •



22

‫• ‪.color‬‬



‫‪input‬‬ ‫ا‬ ‫ة‬ ‫اع ا‬ ‫ت‬ ‫ا‬ ‫د‬

‫‪Safari‬‬ ‫‪Chrome‬‬ ‫‪Opera‬‬ ‫‪Firefox‬‬ ‫‪IE‬‬ ‫اﻟﻨﻮع‬

‫ﻻ‬ ‫ﻻ‬ ‫0.9‬ ‫ﻻ‬ ‫ﻻ‬ ‫‪email‬‬

‫ﻻ‬ ‫ﻻ‬ ‫0.9‬ ‫ﻻ‬ ‫ﻻ‬ ‫‪url‬‬

‫ﻻ‬ ‫ﻻ‬ ‫0.9‬ ‫ﻻ‬ ‫ﻻ‬ ‫‪number‬‬

‫0.4‬ ‫0.4‬ ‫0.9‬ ‫ﻻ‬ ‫ﻻ‬ ‫‪range‬‬

‫ﻻ‬ ‫ﻻ‬ ‫0.9‬ ‫ﻻ‬ ‫‪ Date pickers‬ﻻ‬

‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫‪search‬‬

‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫‪color‬‬





‫ﻣﻼﺣﻈﺔ: اﳌﺘﺼﻔﺢ أوﺑﺮا ‪ Opera‬ﻳﻘﺪم اﻟﺪﻋﻢ اﻷﻓﻀﻞ ﻟﻸﻧﻮاع اﳉﺪﻳﺪة, وﻋﻠﻰ ﻛﻞ ﳝﻜﻦ اﻟﺒﺪء ﺑﺎﺳﺘﺨﺪام ﻫﺬﻩ اﻷﻧﻮاع ﺣﱴ ﻟﻮ أ‪‬ﺎ ﻏﲑ‬

‫ﻣﺪﻋﻮﻣﺔ ﻣﻦ ﻗﺒﻞ اﳌﺘﺼﻔﺢ ﺣﻴﺚ أ‪‬ﺎ ﺳﺘﻈﻬﺮ ﻛﺤﻘﻞ ﻧﺼﻲ ﻋﺎدي.‬



‫ا د ل ‪email‬‬ ‫ع‬

‫اﻟﻨﻮع ‪ email‬ﻳُﺴﺘﺨﺪم ﰲ ﺣﻘﻞ اﻹدﺧﺎل ﰲ ﺣﺎل أن اﻟﻘﻴﻤﺔ اﻟﱵ ﺳﻴﺘﻢ إدﺧﺎﳍﺎ ﻫﻲ ﻋﻨﻮان ﺑﺮﻳﺪ إﻟﻜﱰوﱐ, وﻳﺘﻢ اﻟﺘﺄﻛﺪ ﻣﻦ‬

‫ﺻﺤﺔ ﺻﻴﻐﺔ اﻟﱪﻳﺪ اﻹﻟﻜﱰوﱐ اﳌﺪﺧﻞ ﲟﺠﺮد إرﺳﺎل ﻗﻴﻢ اﻟﻨﻤﻮذج:‬

‫ُ‬

‫>/ "‪E-mail: / "‪Homepage: / "01"=‪oints: ‪‪‪"‪/ "01"=‪Points: / "‪‪‪‪/ "01"=‪/ "‪Date: / "‪/ "‪Time: / "‪/ "‪/ "‪"‪/ "‪/ "‪/ "‪‪"‪/ "‪Username: / "‪Encryption: / "‪‪





HTML5 ‫ة‬ ‫ا ذج ا‬

:‫ ﻛﻤﺎ ﻳﻠﻲ‬input ‫ واﻟﻌﻨﺼﺮ‬form ‫ ﺗﻮﺟﺪ ﺧﺼﺎﺋﺺ ﺟﺪﻳﺪة ﻟﻠﻌﻨﺼﺮ‬HTML5 ‫ﰲ‬



:form •

.autocomplete o

.novalidate o

:input •

.autocomplete o

.autofocus o

.form o

.(formoverrides) formaction o

.(formoverrides) formenctype o

.(formoverrides) formmethod o

.(formoverrides) formnovalidate o

.(formoverrides) formtarget o

.height o

.width o

.list o

.min o

.max o





28

.step o

.multiple o

.pattern (regexp) o

.placeholder o

.required o



Safari Chrome Opera Firefox IE ‫اﳋﺎﺻﻴﺔ‬

4.0 3.0 9.5 3.5 8.0 autocomplete

4.0 3.0 10.0 ‫ﻻ‬ ‫ﻻ‬ autofocus

‫ﻻ‬ ‫ﻻ‬ 9.5 ‫ﻻ‬ ‫ﻻ‬ form

‫ﻻ‬ ‫ﻻ‬ 10.5 ‫ﻻ‬ ‫ ﻻ‬formoverrides

4.0 3.0 9.5 3.5 8.0 height

4.0 3.0 9.5 3.5 8.0 width

‫ﻻ‬ ‫ﻻ‬ 9.5 ‫ﻻ‬ ‫ﻻ‬ list

‫ﻻ‬ 3.0 9.5 ‫ﻻ‬ ‫ﻻ‬ min

‫ﻻ‬ 3.0 9.5 ‫ﻻ‬ ‫ﻻ‬ max

‫ﻻ‬ 3.0 9.5 ‫ﻻ‬ ‫ﻻ‬ step

4.0 3.0 ‫ﻻ‬ 3.5 ‫ﻻ‬ multiple

‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ novalidate

‫ﻻ‬ 3.0 9.5 ‫ﻻ‬ ‫ﻻ‬ pattern

3.0 3.0 ‫ﻻ‬ ‫ﻻ‬ ‫ﻻ‬ placeholder

‫ﻻ‬ 3.0 9.5 ‫ﻻ‬ ‫ﻻ‬ required



autocomplete ‫ا‬

‫ ﻳﺘﻤﺘﻊ ﲞﺎﺻﻴﺔ اﻹﻛﻤﺎل اﻟﺘﻠﻘﺎﺋﻲ‬input ‫ أو ﺣﻘﻞ اﻹدﺧﺎل‬form ‫ ﲢﺪد ﻫﻞ اﻟﻨﻤﻮذج‬autocomplete ‫اﳋﺎﺻﻴﺔ‬

text, :‫ ‫ ‫ ﻋﻠﻰ اﻟﻌﻨﺼﺮ‬autocomplete ‫, وﺗﻌﻤﻞ اﳋﺎﺻﻴﺔ‬autocomplete

‫. ﺣﻴﺚ ﳎﺮد أن ﻳﺒﺪأ اﳌﺴﺘﺨﺪم ﺑﻜﺘﺎﺑﺔ‬search, url, tel, email, password, datepickers, range, color

:‫اﻟﻨﺺ ﻓﺈن اﳌﺘﺼﻔﺢ ﻳُﻈﻬﺮ ﻗﻴﻢ ﳝﻜﻦ أن ﻳﺘﻢ إدﺧﺎﳍﺎ ﰲ اﳊﻘﻞ اﻟﻨﺼﻲ‬









29

First name:



Last name:



E-mail:

















.‫ ﻟﻜﻲ ﺗﻌﻤﻞ ﻫﺬﻩ اﳋﺎﺻﻴﺔ ﺑﺸﻜﻞ ﺻﺤﻴﺢ‬autocomplete ‫ﻣﻼﺣﻈﺔ: ﺑﻌﺾ اﳌﺘﺼﻔﺤﺎت ﺗﺘﻄﻠﺐ ﺗﻔﻌﻴﻞ ﺧﺎﺻﻴﺔ اﻟـ‬



autofocus ‫ا‬

‫ ﻣﻊ‬autofocus ‫ ﺑﺄن ﻣﺆﺷﺮ اﻟﻜﺘﺎﺑﺔ ﻳﻌﲔ ﰲ اﳊﻘﻞ ﲟﺠﺮد ﲢﻤﻴﻞ اﻟﺼﻔﺤﺔ, وﺗﻌﻤﻞ اﳋﺎﺻﻴﺔ‬autofocus ‫ﲢﺪد اﳋﺎﺻﻴﺔ‬

:input ‫ﲨﻴﻊ أﻧﻮاع اﻟﻌﻨﺼﺮ‬







form ‫ا‬

‫, وﳝﻜﻦ أن ﻳﻨﺘﻤﻲ ﻋﻨﺼﺮ اﻹدﺧﺎل ﻣﻊ أﻛﺜﺮ ﻣﻦ ﳕﻮذج‬input ‫ ﲢﺪد اﻟﻨﻤﻮذج اﻟﺬي ﻳﺘﺒﻊ ﻟﻪ ﻋﻨﺼﺮ اﻹدﺧﺎل‬form ‫اﳋﺎﺻﻴﺔ‬

‫ ﻟﻠﻨﻤﻮذج ﻣﻊ ﻓﺮاغ ﺑﲔ ﻛﻞ ﻗﻴﻤﺔ ﰲ ﺣﺎل أن ﻋﻨﺼﺮ اﻹدﺧﺎل ﳝﻜﻦ أن ﻳﻨﺘﻤﻲ إﱃ أﻛﺜﺮ ﻣﻦ ﳕﻮذج, وﺗﻄﺒﻖ‬id ‫وذﻟﻚ ﺑﺴﺮد ﻗﻴﻤﺔ اﳋﺎﺻﻴﺔ‬

: ‫ ﻋﻠﻰ ﲨﻴﻊ أﻧﻮاع اﻟﻌﻨﺼﺮ‬form ‫اﳋﺎﺻﻴﺔ‬







First name:











30

Last name:



Form ‫ا‬ ‫وزھ‬ ‫ا‬ ‫ا‬

:‫ ‫وﻫﻲ ﺑﻌﺾ اﳋﺼﺎﺋﺺ اﻟﱵ ﳝﻜﻦ ﻣﻦ ﺧﻼﳍﺎ ﲡﺎوز اﳋﺼﺎﺋﺺ اﶈﺪدة ﰲ اﻟﻌﻨﺼﺮ‬



.form ‫ ﻟﻠﻌﻨﺼﺮ‬action ‫: وﺗﺴﻤﺢ ﺑﺘﺠﺎوز اﳋﺎﺻﻴﺔ‬formaction •

.form ‫ ﻟﻠﻌﻨﺼﺮ‬enctype ‫: وﺗﺴﻤﺢ ﺑﺘﺠﺎوز اﳋﺎﺻﻴﺔ‬formenctype •

.form ‫ ﻟﻠﻌﻨﺼﺮ‬method ‫: وﺗﺴﻤﺢ ﺑﺘﺠﺎوز اﳋﺎﺻﻴﺔ‬formmethod •

.form ‫ ﻟﻠﻌﻨﺼﺮ‬novalidate ‫: وﺗﺴﻤﺢ ﺑﺘﺠﺎوز اﳋﺎﺻﻴﺔ‬formnovalidate •

.form ‫ ﻟﻠﻌﻨﺼﺮ‬target ‫: وﺗﺴﻤﺢ ﺑﺘﺠﺎوز اﳋﺎﺻﻴﺔ‬formtarget •



‫ ﻓﻘﻂ, وﺗﺴﺎﻋﺪ ﻫﺬﻩ اﳋﺼﺎﺋﺺ ﻋﻠﻰ إﻧﺸﺎء أﻛﺜﺮ‬submit, image ‫ ‫وﺗﻌﻤﻞ اﳋﺼﺎﺋﺺ اﻟﺴﺎﺑﻘﺔ ﻣﻊ اﻟﻌﻨﺼﺮ‬

.‫ﻣﻦ زر إرﺳﺎل ﳌﻌﻠﻮﻣﺎت اﻟﻨﻤﻮذج‬







E-mail:





































31

width ‫ا‬

:‫ ‫ ﻟﻠﻌﻨﺼﺮ‬image ‫ﺗﺴﺘﺨﺪم اﳋﺎﺻﻴﺔ ﻟﺘﺤﺪﻳﺪ ﻋﺮض اﻟﺼﻮرة اﻟﱵ ﺗﺴﺘﺨﺪم ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻨﻮع‬







height ‫ا‬

:‫ ‫ ﻟﻠﻌﻨﺼﺮ‬image ‫ﺗﺴﺘﺨﺪم اﳋﺎﺻﻴﺔ ﻟﺘﺤﺪﻳﺪ ارﺗﻔﺎع اﻟﺼﻮرة اﻟﱵ ﺗﺴﺘﺨﺪم ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻨﻮع‬







list ‫ا‬

,‫ ﳎﻤﻮﻋﺔ ﻣﻦ اﻟﻘﻴﻢ ﻛﺨﻴﺎرات ﳊﻘﻞ اﻹدﺧﺎل‬datalist ‫ ﳊﻘﻞ اﻹدﺧﺎل, ﺣﻴﺚ ﲢﺪد‬datalist ‫ ﲢﺪد اﻟﻌﻨﺼﺮ‬list ‫اﳋﺎﺻﻴﺔ‬

text, search, url, tel, email, date pickers, :‫ ‫وﺗﻌﻤﻞ ﻫﺬﻩ اﳋﺎﺻﻴﺔ ﻣﻊ أﻧﻮاع اﻟﻌﻨﺼﺮ‬

.number, range, color



Webpage:























min ‫ا‬

‫ اﻟﻘﻴﻤﺔ‬min ‫ أو ﻗﻴﻢ اﻟﺘﺎرﻳﺦ, وﲢﺪد اﳋﺎﺻﻴﺔ‬number ‫ ﺗﺴﺘﺨﺪم ﻟﻔﺮض ﻗﻴﻮد ﻋﻠﻰ ﺣﻘﻮل اﻹدﺧﺎل اﻟﺮﻗﻤﻴﺔ‬min ‫اﳋﺎﺻﻴﺔ‬

:date pickers, number, range :‫ ‫اﻟﺪﻧﻴﺎ اﳌﺴﻤﻮح ﺑﺈدﺧﺎﳍﺎ وﺗﻌﻤﻞ ﻫﺬﻩ اﳋﺎﺻﻴﺔ ﻣﻊ أﻧﻮاع اﻟﻌﻨﺼﺮ‬



Points:









32

‫‪max‬‬ ‫ا‬

‫اﳋﺎﺻﻴﺔ ‪ max‬ﺗﺴﺘﺨﺪم ﻟﻔﺮض ﻗﻴﻮد ﻋﻠﻰ ﺣﻘﻮل اﻹدﺧﺎل اﻟﺮﻗﻤﻴﺔ ‪ number‬أو ﻗﻴﻢ اﻟﺘﺎرﻳﺦ, وﲢﺪد اﳋﺎﺻﻴﺔ ‪max‬‬

‫اﻟﻘﻴﻤﺔ اﻟﻌﻈﻤﻰ اﳌﺴﻤﻮح ﺑﺈدﺧﺎﳍﺎ وﺗﻌﻤﻞ ﻫﺬﻩ اﳋﺎﺻﻴﺔ ﻣﻊ أﻧﻮاع اﻟﻌﻨﺼﺮ >‪ / "3"=‪Points: ‪ / "3"=‪Points: ‪:email, file :/ "‪Select images: ‪ ‪text, search, url, tel, email, :"‪/ "‪E-mail: / "‪‪‪:text, search, url, tel, email, password :/ "‪title="Three letter country code‬‬



‫‪placeholder‬‬ ‫ا‬

‫اﳋﺎﺻﻴﺔ ‪ placeholder‬ﻫﻲ ﻋﺒﺎرة ﻋﻦ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﺗﻈﻬﺮ ﰲ ﺣﻘﻞ اﻹدﺧﺎل ﻛﻤﺴﺎﻋﺪة ﻟﻠﻘﻴﻤﺔ اﳌﺘﻮﻗﻊ إدﺧﺎﳍﺎ, وﺗﻌﻤﻞ ﻫﺬﻩ‬

‫اﳋﺎﺻﻴﺔ ﻋﻠﻰ اﻷﻧﻮاع اﻟﺘﺎﻟﻴﺔ ﻟﻠﻌﻨﺼﺮ >‪ ,text, search, url, tel, email, password :/ "ا‬









‫‪required‬‬ ‫ا‬

‫اﳋﺎﺻﻴﺔ ‪ required‬ﲢﺪد أن ﺣﻘﻞ اﻹدﺧﻞ ﳚﺐ ﺗﻌﺒﺌﺘﻪ ﺑﻘﻴﻤﺔ ﻗﺒﻞ إرﺳﺎل ﻣﻌﻠﻮﻣﺎت اﻟﻨﻤﻮذج, وﺗﻌﻤﻞ ﻫﺬﻩ اﳋﺎﺻﻴﺔ ﻋﻠﻰ‬

‫اﻷﻧﻮاع اﻟﺘﺎﻟﻴﺔ ﻟﻠﻌﻨﺼﺮ >‪text, search, url, tel, email, password, date pickers, number, :/ "‪Name: ‪ ”‪1‪HTML‬‬



‫>1‪ HTML”‪‪"‪‪‪‪‪ syrdev.net"‪