J'ai préparé un petit quiz sur les formulaires HTML aujourd'hui.
ref: 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>
L'objectif de faire passer ce formulaire HTML complètement cassé aux gens était juste de
voir la ligne de pensée des gens avec cela : le pilier des interfaces html
Voici quelques réponses échantillon, regroupées par catégorie, et des commentaires sur chacune d'elles
fubar doctype
- Pas de doctype. Cela rend difficile de déterminer quelle variante de HTML il s'agit, ce qui devrait mener à des réponses intéressantes…
- Mélange des balises vides de type xhtml avec des balises HTML.
Bien sûr, la plupart des gens ont manqué que de nombreuses erreurs dépendaient de la déclaration de doctype.
Le style des balises que vous pouvez utiliser dépend entièrement du doctype.
method=delete
- ligne 1 : DELETE n'est pas une action supportée dans les formulaires HTML :
- method=delete n'est pas directement supporté dans la plupart/tous ? les navigateurs.
- les formulaires ne supportent pas delete dans les anciens navigateurs
- Méthode delete
- form method='DELETE' – ce n'est pas autorisé
Même si nous pensons aux verbes http avec les API client, y compris javascript.
Pour la majorité des navigateurs, vous obtenez GET et POST. C'est important si vous avez
envisagé une API basée sur xhtml.
enctype=bunk
- enctype="multipart/form-data" et non enctype="multipart/file-upload"
- enc-type="multipart/file-upload n'a aucun sens si notre intention est de SUPPRIMER
Les bugs d'enctype font toujours perdre une journée. Si vous vous trompez, vous perdrez la journée
en postant le nom de votre fichier sous forme de chaîne, au lieu du contenu réel du fichier
encodé. Il est également important de noter que le type d'enctype dicte simplement comment le
formulaire est encodé et est entièrement orthogonal au verbe http utilisé.
input=foo && input=foo
- Les balises d'entrée de texte dans le premier fieldset ont le même nom
- balises "tags" en double. Ou deux balises avec le même nom encore
- 2 champs de texte nommés "tags" seul le dernier sera utilisé.
- Deux entrées avec le même nom 'tags'. La seconde écraserait la valeur de la 1ère.
- Deux entrées avec le nom 'foo' (non auto-fermées)
- Les entrées de texte avec le même nom écraseraient les entrées avec le nom tags
- assignations en double à l'entrée name='tags'
- assignations en double à l'entrée name='vehicle'
Beaucoup de malentendus sur celui-ci. Il est tout à fait légitime de poster le même
paramètre > 1 fois dans un formulaire. La spécification le supporte et même l'ancien support cgi
supporte la notion de poster plusieurs valeurs sous la même clé. Il n'est
qu'une convention que beaucoup de contrôleurs déversent ceux-ci dans un hachage où 'dernier gagnant'
Vous pouvez le prouver facilement vous-même. Postez ceci à partir d'un formulaire
<input name='answer' value='40'>
<input name='answer' value='2'>
et vous verrez ce qui suit dans la console du navigateur
<img
style ='max-height:420px;' src='http://cl.ly/image/3I2Q2v0D1B1G/Screen%20Shot%202013-06-17%20at%204.09.23%20PM.png'
Si vous gérez la publication du formulaire comme suit
def form
return if request.get?
parsed = Parser.new(env).parse
render :json => parsed.as_json, :layout => true
end
# hack the rack parser to show that http DOES post multiple values
# and that, if we want, we could accumulate them
#
class Parser < Rack::Multipart::Parser