j'ai préparé un petit quiz sur les formulaires HTML aujourd'hui.
réf : https://gist.github.com/ahoward/98591ebc9113bea1cf02
<!--
fork this. do not use the internet. take < 10 minutes to find at least 10
distinct errors on this form. submit your answer in the comments field of
your fork and email me (ara[at]dojo4.com) the url.
-->
<form method='DELETE' ACTION='./' enctype="multipart/file-upload">
<fieldset>
<legend> tags </legend>
<input type='text' name='tags' value='foo'/>
<input type='text' name='tags' value='bar'/>
</fieldset>
<label for='foo'>Foo: </label> <input name='foo'> <input name='foo'>
<label>
Bar: <input name='bar'>
</label>
<input name='email' readonly/>
<input name='password' disabled=disabled/>
<input type='file' name='file' value='.bashrc'/>
<fieldset>
<legend>Sex</legend>
<input type="radio" name="sex">
<option value='male'>Male</option>
<option value='female'/>
</input>
<fieldset>
<legend>Transportation</legend>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</fieldset>
</fieldset>
<select name='web-develop-skilz'>
<option value='A'>
<option value='B'>
<option value='C'>
<option value='D'>
<option value='F'>
</select>
<hr>
<button type='submit'>
</form>
le but de faire parcourir ce formulaire HTML complètement cassé était juste de
voir les lignes de pensée des gens avec cela : le fondement des interfaces HTML
voici quelques réponses d'exemple, regroupées grossièrement par catégorie, et des retours à leur sujet
fubar doctype
réponses d'exemple
- Pas de doctype. Cela rend difficile de déterminer quelle version de HTML est utilisée, ce qui devrait conduire à des réponses intéressantes…
-
Mélange les balises vides de style xhtml avec les balises HTML.
-
Guillemets inconsistants. Les deux fonctionnent, choisis-en un déjà…
- ligne 1 : DELETE n'est pas une action supportée dans les formulaires HTML :
- method=delete n'est pas directement supporté dans la plupart des navigateurs, voire aucun ?
- les formulaires ne supportent pas delete dans les anciens navigateurs
- Méthode delete
-
form method='DELETE' – ce n'est pas permis
- enctype="multipart/form-data" et non enctype="multipart/file-upload"
-
enc-type="multipart/file-upload n'a pas de sens si notre intention est de DELETE
- les balises de texte dans le premier fieldset ont le même nom
- balises "tags" en double. Ou deux balises avec le même nom à nouveau
- 2 champs texte nommés "tags" seul le dernier sera utilisé.
- Deux entrées avec le même nom 'tags'. La deuxième écraserait la valeur de la première.
- Deux entrées avec le nom 'foo' (non auto-fermées)
- les entrées texte avec le même nom remplaceraient les entrées avec le nom tags
- affectations en double à input name='tags'
-
affectations en double à input name='vehicle'
- Pas de for sur le label 'Bar:'.
-
label non lié : (label pour quoi ?)
-
entrée readonly sans valeur est inutile
- action="./" semble être une mauvaise pratique pour moi
-
l'action du formulaire est invalide en tant que descripteur de chemin de fichier unix – pour soumettre à l'URL actuelle, supprimez l'action entièrement car c'est le comportement par défaut
- le téléchargement de fichier ne peut pas avoir d'attribut de valeur (mauvaise sécurité)
- Imbrication de fieldset
- les entrées de fichier ne prennent pas de valeurs par défaut – l'utilisateur doit sélectionner
-
il sélectionne automatiquement votre fichier ~/.bashrc pour le téléchargement
- disabled devrait avoir des guillemets autour de lui (aussi un mauvais mélange de guillemets simples et doubles partout)
- Options non fermées pour la liste déroulante de sélection et aucun texte inclus
-
guillemets manquants autour de l'attribut disabled dans la déclaration incorrecte de l'entrée de mot de passe
- Pas de type sur le champ de mot de passe (ni sur le champ email, mais moins important là)
- l'entrée de mot de passe doit être de type password
-
doit être <input type='email' name='email' …>
-
disabled=disabled devrait être disabled
- Pas de texte pour l'option féminine, ni bouton radio pour les boutons radio 'Sex', les boutons radio ne sont pas configurés correctement pour la soumission de valeur / bascule dans le groupe. C'est tout simplement mauvais dans cette zone.
- les boutons radio du fieldset "sex" ne sont pas construits correctement. devrait être Male – les balises sont utilisées avec les listes de sélection et non les boutons radio. Tous les boutons radio d'un groupe doivent avoir le même attribut de nom
-
les entrées radio ne prennent pas d'options, mais devraient plutôt avoir le même nom avec différentes valeurs
- les boutons doivent être ouverts et fermés – le soumettre devrait être une entrée à la place
- les cases à cocher avec le même nom remplaceraient les entrées de cases à cocher avec le nom de véhicule