[{"data":1,"prerenderedAt":1147},["ShallowReactive",2],{"page-\u002Fhtml\u002Fformulaires-et-validation":3,"pieces-html":1105,"autour-\u002Fhtml\u002Fformulaires-et-validation":1130,"prerequis-\u002Fhtml\u002Fformulaires-et-validation":1134,"plan-html":1136},{"id":4,"title":5,"body":6,"description":1075,"extension":1076,"ligne":54,"meta":1077,"motsCles":1078,"navigation":1082,"niveau":1083,"path":1084,"prerequis":1085,"ressources":1087,"seo":1099,"sources":1100,"stem":1103,"__hash__":1104},"docs\u002Fhtml\u002F06.formulaires-et-validation.md","Formulaires et validation",{"type":7,"value":8,"toc":1061},"minimark",[9,14,40,44,48,272,293,297,303,320,323,336,340,350,450,464,468,580,595,606,610,619,630,634,642,712,782,785,789,798,865,872,876,882,922,936,940,946,955,959,1001,1005,1057],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,34,37],"ul",{},[18,19,20,21,25,26,29,30,33],"li",{},"Écrire un formulaire avec ",[22,23,24],"code",{},"\u003Cform>",", ",[22,27,28],{},"\u003Clabel>"," et ",[22,31,32],{},"\u003Cinput>",".",[18,35,36],{},"Choisir le bon type de champ pour chaque donnée.",[18,38,39],{},"Valider la saisie avec les attributs natifs, sans JavaScript.",[10,41,43],{"id":42},"un-formulaire-complet","Un formulaire complet",[45,46,47],"p",{},"Sur un site de recettes, un visiteur peut proposer la sienne :",[49,50,56],"pre",{"className":51,"code":52,"filename":53,"language":54,"meta":55,"style":55},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cform action=\"\u002Frecettes\" method=\"post\">\n  \u003Cp>\n    \u003Clabel for=\"titre\">Nom de la recette\u003C\u002Flabel>\n    \u003Cinput type=\"text\" id=\"titre\" name=\"titre\" required>\n  \u003C\u002Fp>\n  \u003Cp>\n    \u003Clabel for=\"email\">Ton e-mail\u003C\u002Flabel>\n    \u003Cinput type=\"email\" id=\"email\" name=\"email\" required>\n  \u003C\u002Fp>\n  \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n","proposer.html","html","",[22,57,58,93,103,127,162,172,181,202,231,240,262],{"__ignoreMap":55},[59,60,63,67,71,75,78,82,85,87,90],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"scfrF","\u003C",[59,68,70],{"class":69},"s5JFL","form",[59,72,74],{"class":73},"s5iOY"," action",[59,76,77],{"class":65},"=",[59,79,81],{"class":80},"shWOn","\"\u002Frecettes\"",[59,83,84],{"class":73}," method",[59,86,77],{"class":65},[59,88,89],{"class":80},"\"post\"",[59,91,92],{"class":65},">\n",[59,94,96,99,101],{"class":61,"line":95},2,[59,97,98],{"class":65},"  \u003C",[59,100,45],{"class":69},[59,102,92],{"class":65},[59,104,106,109,112,115,117,120,123,125],{"class":61,"line":105},3,[59,107,108],{"class":65},"    \u003C",[59,110,111],{"class":69},"label",[59,113,114],{"class":73}," for",[59,116,77],{"class":65},[59,118,119],{"class":80},"\"titre\"",[59,121,122],{"class":65},">Nom de la recette\u003C\u002F",[59,124,111],{"class":69},[59,126,92],{"class":65},[59,128,130,132,135,138,140,143,146,148,150,153,155,157,160],{"class":61,"line":129},4,[59,131,108],{"class":65},[59,133,134],{"class":69},"input",[59,136,137],{"class":73}," type",[59,139,77],{"class":65},[59,141,142],{"class":80},"\"text\"",[59,144,145],{"class":73}," id",[59,147,77],{"class":65},[59,149,119],{"class":80},[59,151,152],{"class":73}," name",[59,154,77],{"class":65},[59,156,119],{"class":80},[59,158,159],{"class":73}," required",[59,161,92],{"class":65},[59,163,165,168,170],{"class":61,"line":164},5,[59,166,167],{"class":65},"  \u003C\u002F",[59,169,45],{"class":69},[59,171,92],{"class":65},[59,173,175,177,179],{"class":61,"line":174},6,[59,176,98],{"class":65},[59,178,45],{"class":69},[59,180,92],{"class":65},[59,182,184,186,188,190,192,195,198,200],{"class":61,"line":183},7,[59,185,108],{"class":65},[59,187,111],{"class":69},[59,189,114],{"class":73},[59,191,77],{"class":65},[59,193,194],{"class":80},"\"email\"",[59,196,197],{"class":65},">Ton e-mail\u003C\u002F",[59,199,111],{"class":69},[59,201,92],{"class":65},[59,203,205,207,209,211,213,215,217,219,221,223,225,227,229],{"class":61,"line":204},8,[59,206,108],{"class":65},[59,208,134],{"class":69},[59,210,137],{"class":73},[59,212,77],{"class":65},[59,214,194],{"class":80},[59,216,145],{"class":73},[59,218,77],{"class":65},[59,220,194],{"class":80},[59,222,152],{"class":73},[59,224,77],{"class":65},[59,226,194],{"class":80},[59,228,159],{"class":73},[59,230,92],{"class":65},[59,232,234,236,238],{"class":61,"line":233},9,[59,235,167],{"class":65},[59,237,45],{"class":69},[59,239,92],{"class":65},[59,241,243,245,248,250,252,255,258,260],{"class":61,"line":242},10,[59,244,98],{"class":65},[59,246,247],{"class":69},"button",[59,249,137],{"class":73},[59,251,77],{"class":65},[59,253,254],{"class":80},"\"submit\"",[59,256,257],{"class":65},">Envoyer\u003C\u002F",[59,259,247],{"class":69},[59,261,92],{"class":65},[59,263,265,268,270],{"class":61,"line":264},11,[59,266,267],{"class":65},"\u003C\u002F",[59,269,70],{"class":69},[59,271,92],{"class":65},[45,273,274,276,277,280,281,284,285,288,289,292],{},[22,275,24],{}," entoure l'ensemble. Son attribut ",[22,278,279],{},"action"," indique l'adresse qui recevra les données, et ",[22,282,283],{},"method"," la manière de les envoyer (",[22,286,287],{},"get"," ou ",[22,290,291],{},"post",").",[10,294,296],{"id":295},"le-label-indispensable","Le label : indispensable",[45,298,299,300,302],{},"Chaque champ a besoin d'un ",[22,301,28],{},", le texte qui le décrit. Le lien se fait avec deux attributs qui portent la même valeur :",[15,304,305,314],{},[18,306,307,310,311,313],{},[22,308,309],{},"for"," sur le ",[22,312,28],{}," ;",[18,315,316,319],{},[22,317,318],{},"id"," sur le champ.",[45,321,322],{},"Les gains sont concrets : un lecteur d'écran annonce le nom du champ, et un clic sur le texte place le curseur dans le champ. Pour une case à cocher, cela agrandit la zone cliquable.",[324,325,326],"warning",{},[45,327,328,329,332,333,335],{},"Un ",[22,330,331],{},"placeholder"," n'est pas un label. Il disparaît dès qu'on tape, et son contraste est souvent faible. Garde toujours un vrai ",[22,334,28],{}," visible.",[10,337,339],{"id":338},"les-types-de-champ","Les types de champ",[45,341,342,343,346,347,349],{},"L'attribut ",[22,344,345],{},"type"," de ",[22,348,32],{}," choisit le champ. Il change le clavier proposé sur mobile et l'aide à la saisie.",[351,352,353,366],"table",{},[354,355,356],"thead",{},[357,358,359,363],"tr",{},[360,361,362],"th",{},"Type",[360,364,365],{},"Usage",[367,368,369,380,390,400,410,420,430,440],"tbody",{},[357,370,371,377],{},[372,373,374],"td",{},[22,375,376],{},"text",[372,378,379],{},"Texte court",[357,381,382,387],{},[372,383,384],{},[22,385,386],{},"email",[372,388,389],{},"Adresse e-mail",[357,391,392,397],{},[372,393,394],{},[22,395,396],{},"password",[372,398,399],{},"Mot de passe masqué",[357,401,402,407],{},[372,403,404],{},[22,405,406],{},"number",[372,408,409],{},"Nombre",[357,411,412,417],{},[372,413,414],{},[22,415,416],{},"date",[372,418,419],{},"Date",[357,421,422,427],{},[372,423,424],{},[22,425,426],{},"checkbox",[372,428,429],{},"Case à cocher",[357,431,432,437],{},[372,433,434],{},[22,435,436],{},"radio",[372,438,439],{},"Un choix parmi plusieurs",[357,441,442,447],{},[372,443,444],{},[22,445,446],{},"file",[372,448,449],{},"Envoi d'un fichier",[45,451,452,453,456,457,460,461,33],{},"Pour un texte long, utilise ",[22,454,455],{},"\u003Ctextarea>",". Pour une liste déroulante, ",[22,458,459],{},"\u003Cselect>"," avec des ",[22,462,463],{},"\u003Coption>",[10,465,467],{"id":466},"cases-à-cocher-et-boutons-radio","Cases à cocher et boutons radio",[49,469,471],{"className":51,"code":470,"language":54,"meta":55,"style":55},"\u003Cfieldset>\n  \u003Clegend>Difficulté\u003C\u002Flegend>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"niveau\" value=\"facile\"> Facile\u003C\u002Flabel>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"niveau\" value=\"moyen\"> Moyen\u003C\u002Flabel>\n\u003C\u002Ffieldset>\n",[22,472,473,482,496,536,572],{"__ignoreMap":55},[59,474,475,477,480],{"class":61,"line":62},[59,476,66],{"class":65},[59,478,479],{"class":69},"fieldset",[59,481,92],{"class":65},[59,483,484,486,489,492,494],{"class":61,"line":95},[59,485,98],{"class":65},[59,487,488],{"class":69},"legend",[59,490,491],{"class":65},">Difficulté\u003C\u002F",[59,493,488],{"class":69},[59,495,92],{"class":65},[59,497,498,500,502,505,507,509,511,514,516,518,521,524,526,529,532,534],{"class":61,"line":105},[59,499,98],{"class":65},[59,501,111],{"class":69},[59,503,504],{"class":65},">\u003C",[59,506,134],{"class":69},[59,508,137],{"class":73},[59,510,77],{"class":65},[59,512,513],{"class":80},"\"radio\"",[59,515,152],{"class":73},[59,517,77],{"class":65},[59,519,520],{"class":80},"\"niveau\"",[59,522,523],{"class":73}," value",[59,525,77],{"class":65},[59,527,528],{"class":80},"\"facile\"",[59,530,531],{"class":65},"> Facile\u003C\u002F",[59,533,111],{"class":69},[59,535,92],{"class":65},[59,537,538,540,542,544,546,548,550,552,554,556,558,560,562,565,568,570],{"class":61,"line":129},[59,539,98],{"class":65},[59,541,111],{"class":69},[59,543,504],{"class":65},[59,545,134],{"class":69},[59,547,137],{"class":73},[59,549,77],{"class":65},[59,551,513],{"class":80},[59,553,152],{"class":73},[59,555,77],{"class":65},[59,557,520],{"class":80},[59,559,523],{"class":73},[59,561,77],{"class":65},[59,563,564],{"class":80},"\"moyen\"",[59,566,567],{"class":65},"> Moyen\u003C\u002F",[59,569,111],{"class":69},[59,571,92],{"class":65},[59,573,574,576,578],{"class":61,"line":164},[59,575,267],{"class":65},[59,577,479],{"class":69},[59,579,92],{"class":65},[45,581,582,583,586,587,590,591,594],{},"Les boutons radio d'un même groupe partagent le même ",[22,584,585],{},"name"," : un seul peut être choisi. ",[22,588,589],{},"\u003Cfieldset>"," regroupe des champs liés, et ",[22,592,593],{},"\u003Clegend>"," donne le titre du groupe, lu par le lecteur d'écran avant chaque option.",[45,596,597,598,600,601,603,604,33],{},"Ici, le ",[22,599,28],{}," entoure le champ : le lien se fait sans ",[22,602,309],{}," ni ",[22,605,318],{},[10,607,609],{"id":608},"le-bouton-denvoi","Le bouton d'envoi",[45,611,612,615,616,618],{},[22,613,614],{},"\u003Cbutton type=\"submit\">"," envoie le formulaire. Écris toujours son ",[22,617,345],{},". Sans lui, un bouton placé dans un formulaire est un bouton d'envoi par défaut, ce qui surprend.",[45,620,621,622,625,626,629],{},"Utilise ",[22,623,624],{},"type=\"button\""," pour un bouton qui ne doit rien envoyer, et ",[22,627,628],{},"type=\"reset\""," seulement si tu en as vraiment besoin.",[10,631,633],{"id":632},"la-validation-native","La validation native",[45,635,636,637,641],{},"La ",[638,639,640],"strong",{},"validation"," vérifie la saisie avant l'envoi. Le navigateur sait le faire seul avec quelques attributs :",[351,643,644,654],{},[354,645,646],{},[357,647,648,651],{},[360,649,650],{},"Attribut",[360,652,653],{},"Effet",[367,655,656,666,679,692,702],{},[357,657,658,663],{},[372,659,660],{},[22,661,662],{},"required",[372,664,665],{},"Le champ ne peut pas rester vide",[357,667,668,676],{},[372,669,670,25,673],{},[22,671,672],{},"minlength",[22,674,675],{},"maxlength",[372,677,678],{},"Longueur minimale et maximale du texte",[357,680,681,689],{},[372,682,683,25,686],{},[22,684,685],{},"min",[22,687,688],{},"max",[372,690,691],{},"Bornes pour un nombre ou une date",[357,693,694,699],{},[372,695,696],{},[22,697,698],{},"pattern",[372,700,701],{},"Doit correspondre à une expression régulière",[357,703,704,709],{},[372,705,706],{},[22,707,708],{},"type=\"email\"",[372,710,711],{},"Doit ressembler à une adresse e-mail",[49,713,715],{"className":51,"code":714,"language":54,"meta":55,"style":55},"\u003Clabel for=\"portions\">Nombre de portions\u003C\u002Flabel>\n\u003Cinput type=\"number\" id=\"portions\" name=\"portions\" min=\"1\" max=\"20\" required>\n",[22,716,717,737],{"__ignoreMap":55},[59,718,719,721,723,725,727,730,733,735],{"class":61,"line":62},[59,720,66],{"class":65},[59,722,111],{"class":69},[59,724,114],{"class":73},[59,726,77],{"class":65},[59,728,729],{"class":80},"\"portions\"",[59,731,732],{"class":65},">Nombre de portions\u003C\u002F",[59,734,111],{"class":69},[59,736,92],{"class":65},[59,738,739,741,743,745,747,750,752,754,756,758,760,762,765,767,770,773,775,778,780],{"class":61,"line":95},[59,740,66],{"class":65},[59,742,134],{"class":69},[59,744,137],{"class":73},[59,746,77],{"class":65},[59,748,749],{"class":80},"\"number\"",[59,751,145],{"class":73},[59,753,77],{"class":65},[59,755,729],{"class":80},[59,757,152],{"class":73},[59,759,77],{"class":65},[59,761,729],{"class":80},[59,763,764],{"class":73}," min",[59,766,77],{"class":65},[59,768,769],{"class":80},"\"1\"",[59,771,772],{"class":73}," max",[59,774,77],{"class":65},[59,776,777],{"class":80},"\"20\"",[59,779,159],{"class":73},[59,781,92],{"class":65},[45,783,784],{},"Si la valeur est invalide, le navigateur bloque l'envoi et affiche un message sur le premier champ en erreur.",[10,786,788],{"id":787},"un-motif-avec-pattern","Un motif avec pattern",[45,790,342,791,793,794,797],{},[22,792,698],{}," prend une ",[638,795,796],{},"expression régulière"," : une description du format attendu.",[49,799,801],{"className":51,"code":800,"language":54,"meta":55,"style":55},"\u003Clabel for=\"code\">Code postal (5 chiffres)\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"code\" name=\"code\" pattern=\"[0-9]{5}\" inputmode=\"numeric\">\n",[22,802,803,823],{"__ignoreMap":55},[59,804,805,807,809,811,813,816,819,821],{"class":61,"line":62},[59,806,66],{"class":65},[59,808,111],{"class":69},[59,810,114],{"class":73},[59,812,77],{"class":65},[59,814,815],{"class":80},"\"code\"",[59,817,818],{"class":65},">Code postal (5 chiffres)\u003C\u002F",[59,820,111],{"class":69},[59,822,92],{"class":65},[59,824,825,827,829,831,833,835,837,839,841,843,845,847,850,852,855,858,860,863],{"class":61,"line":95},[59,826,66],{"class":65},[59,828,134],{"class":69},[59,830,137],{"class":73},[59,832,77],{"class":65},[59,834,142],{"class":80},[59,836,145],{"class":73},[59,838,77],{"class":65},[59,840,815],{"class":80},[59,842,152],{"class":73},[59,844,77],{"class":65},[59,846,815],{"class":80},[59,848,849],{"class":73}," pattern",[59,851,77],{"class":65},[59,853,854],{"class":80},"\"[0-9]{5}\"",[59,856,857],{"class":73}," inputmode",[59,859,77],{"class":65},[59,861,862],{"class":80},"\"numeric\"",[59,864,92],{"class":65},[45,866,867,868,871],{},"Indique le format attendu dans le texte du label, ou dans l'attribut ",[22,869,870],{},"title",". Sans cela, l'utilisateur voit une erreur sans savoir quoi corriger.",[10,873,875],{"id":874},"aider-le-navigateur-à-remplir","Aider le navigateur à remplir",[45,877,878,881],{},[22,879,880],{},"autocomplete"," permet au navigateur de proposer les données déjà connues de l'utilisateur :",[49,883,885],{"className":51,"code":884,"language":54,"meta":55,"style":55},"\u003Cinput type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" required>\n",[22,886,887],{"__ignoreMap":55},[59,888,889,891,893,895,897,899,901,903,905,907,909,911,914,916,918,920],{"class":61,"line":62},[59,890,66],{"class":65},[59,892,134],{"class":69},[59,894,137],{"class":73},[59,896,77],{"class":65},[59,898,194],{"class":80},[59,900,145],{"class":73},[59,902,77],{"class":65},[59,904,194],{"class":80},[59,906,152],{"class":73},[59,908,77],{"class":65},[59,910,194],{"class":80},[59,912,913],{"class":73}," autocomplete",[59,915,77],{"class":65},[59,917,194],{"class":80},[59,919,159],{"class":73},[59,921,92],{"class":65},[45,923,924,925,25,927,25,929,25,932,935],{},"Quelques valeurs courantes : ",[22,926,585],{},[22,928,386],{},[22,930,931],{},"tel",[22,933,934],{},"postal-code",". Sur un long formulaire, cela évite de la saisie et des erreurs.",[10,937,939],{"id":938},"valider-aussi-côté-serveur","Valider aussi côté serveur",[941,942,943],"caution",{},[45,944,945],{},"La validation du navigateur est un confort, pas une sécurité. Un utilisateur peut la contourner en une minute avec les outils de développement. Ton serveur doit revérifier chaque donnée reçue.",[45,947,948,949,310,952,954],{},"Pour désactiver la validation native (par exemple si tu fournis la tienne en JavaScript), ajoute ",[22,950,951],{},"novalidate",[22,953,24],{},". Fais-le seulement si tu la remplaces par quelque chose de mieux.",[10,956,958],{"id":957},"une-liste-de-contrôle","Une liste de contrôle",[960,961,962,972,980,986,992,998],"ol",{},[18,963,964,965,967,968,29,970,33],{},"Chaque champ a un ",[22,966,28],{}," relié par ",[22,969,309],{},[22,971,318],{},[18,973,974,975,977,978,33],{},"Les groupes de cases ou de boutons radio sont dans un ",[22,976,589],{}," avec une ",[22,979,593],{},[18,981,982,983,985],{},"Le ",[22,984,345],{}," correspond à la donnée attendue.",[18,987,988,989,991],{},"Les champs obligatoires portent ",[22,990,662],{},", et le texte le dit aussi.",[18,993,994,995,997],{},"Le bouton d'envoi a un ",[22,996,345],{}," explicite.",[18,999,1000],{},"Le formulaire se remplit entièrement au clavier.",[10,1002,1004],{"id":1003},"à-retenir","À retenir",[15,1006,1007,1018,1030,1041,1054],{},[18,1008,1009,1010,1012,1013,1015,1016,33],{},"Un formulaire se compose de ",[22,1011,24],{},", de champs ",[22,1014,32],{}," et d'un ",[22,1017,614],{},[18,1019,964,1020,967,1022,29,1024,1026,1027,1029],{},[22,1021,28],{},[22,1023,309],{},[22,1025,318],{}," : un ",[22,1028,331],{}," ne le remplace pas.",[18,1031,982,1032,1034,1035,1037,1038,1040],{},[22,1033,345],{}," du champ guide la saisie, et ",[22,1036,589],{}," avec ",[22,1039,593],{}," regroupe les choix liés.",[18,1042,1043,25,1045,25,1047,25,1049,29,1051,1053],{},[22,1044,662],{},[22,1046,672],{},[22,1048,685],{},[22,1050,688],{},[22,1052,698],{}," valident la saisie sans JavaScript.",[18,1055,1056],{},"La validation du navigateur ne protège pas : le serveur doit tout revérifier.",[1058,1059,1060],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":55,"searchDepth":95,"depth":105,"links":1062},[1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074],{"id":12,"depth":95,"text":13},{"id":42,"depth":95,"text":43},{"id":295,"depth":95,"text":296},{"id":338,"depth":95,"text":339},{"id":466,"depth":95,"text":467},{"id":608,"depth":95,"text":609},{"id":632,"depth":95,"text":633},{"id":787,"depth":95,"text":788},{"id":874,"depth":95,"text":875},{"id":938,"depth":95,"text":939},{"id":957,"depth":95,"text":958},{"id":1003,"depth":95,"text":1004},"Construire un formulaire accessible avec label, input et fieldset, puis le valider avec les attributs natifs de HTML.","md",{},[70,134,111,479,1079,1080,662,698,1081,880,951],"select","textarea","validation native",true,"avance","\u002Fhtml\u002Fformulaires-et-validation",[1086],"\u002Fhtml\u002Fsemantique-et-accessibilite",[1088,1092,1095],{"nom":1089,"url":1090,"type":1091},"MDN, Votre premier formulaire","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FExtensions\u002FForms\u002FYour_first_form","cours",{"nom":1093,"url":1094,"type":1091},"MDN, Validation des données de formulaire","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FExtensions\u002FForms\u002FForm_validation",{"nom":1096,"url":1097,"type":1098},"MDN, Les formulaires web (vue d'ensemble)","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FExtensions\u002FForms","doc",{"title":5,"description":1075},[1101,1102],{"nom":1093,"url":1094},{"nom":1089,"url":1090},"html\u002F06.formulaires-et-validation","Clf4A8z59RQuOf_y7h76uibqSDO4-0QCj1vxFrhERGY",[1106,1110,1114,1118,1122,1125,1126],{"path":1107,"title":1108,"stem":1109},"\u002Fhtml\u002Fune-page-web","Qu'est-ce que HTML ?","html\u002F01.une-page-web",{"path":1111,"title":1112,"stem":1113},"\u002Fhtml\u002Fstructure-du-document","La structure d'un document","html\u002F02.structure-du-document",{"path":1115,"title":1116,"stem":1117},"\u002Fhtml\u002Ftexte-liens-images","Texte, liens et images","html\u002F03.texte-liens-images",{"path":1119,"title":1120,"stem":1121},"\u002Fhtml\u002Flistes-et-tableaux","Listes et tableaux","html\u002F04.listes-et-tableaux",{"path":1086,"title":1123,"stem":1124},"Sémantique et accessibilité","html\u002F05.semantique-et-accessibilite",{"path":1084,"title":5,"stem":1103},{"path":1127,"title":1128,"stem":1129},"\u002Fhtml","HTML","html\u002Findex",[1131,1133],{"title":1123,"path":1086,"stem":1124,"description":1132,"children":-1},"Découper une page avec header, nav, main, article et footer, et comprendre pourquoi le bon élément rend le web utilisable par tous.",null,[1135],{"path":1086,"title":1123,"ligne":54},[1137,1139,1140,1141,1143,1144,1145],{"path":1107,"title":1108,"niveau":1138,"stem":1109},"debutant",{"path":1111,"title":1112,"niveau":1138,"stem":1113},{"path":1115,"title":1116,"niveau":1138,"stem":1117},{"path":1119,"title":1120,"niveau":1142,"stem":1121},"intermediaire",{"path":1086,"title":1123,"niveau":1142,"stem":1124},{"path":1084,"title":5,"niveau":1083,"stem":1103},{"path":1127,"title":1128,"niveau":1146,"stem":1129},"memo",1794583442795]