Oggi ho preparato un piccolo quiz sui moduli HTML.
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>Sesso</legend>
<input type="radio" name="sex">
<option value='male'>Maschio</option>
<option value='female'/>
</input>
<fieldset>
<legend>Trasporto</legend>
<input type="checkbox" name="vehicle" value="Bike">Ho una bici<br>
<input type="checkbox" name="vehicle" value="Car">Ho una macchina
</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'obiettivo di far scorrere alle persone questo modulo HTML completamente rotto era solo per
vedere il loro modo di pensare con questo: la spina dorsale delle interfacce HTML
Seguono alcune risposte di esempio, raggruppate approssimativamente per categoria, e i feedback ad esse
doctype fubar
risposte di esempio
- Nessun doctype. Rende difficile capire quale versione di HTML sia, il che dovrebbe portare a risposte interessanti…
-
Mischia tag vuoti in stile xhtml con tag HTML.
-
Virgolette non coerenti. Entrambe funzionano, scegline una…
- linea 1: DELETE non è un'azione supportata nei moduli HTML:
- method=delete non è direttamente supportato nella maggior parte/tutti i browser.
- I moduli non supportano delete nei browser più vecchi
- Metodo delete
-
form method=’DELETE’ – non è permesso
- enctype=”multipart/form-data” non enctype=”multipart/file-upload”
-
enc-type=”multipart/file-upload non ha senso se la nostra intenzione è ELIMINARE
- I tag di input di testo nel primo fieldset hanno il nome
- tag “” duplicati. O due tag con lo stesso nome di nuovo
- 2 campi di testo chiamati “tags” solo l'ultimo verrà utilizzato.
- Due input con lo stesso nome ‘tags’. Il secondo sovrascriverebbe il valore del primo.
- Due input con il nome ‘foo’ (non auto chiusi)
- gli input di testo con lo stesso nome sovrascriverebbero riguardo agli input con nome tags
- assegnazioni duplicate all'input name=’tags’
-
assegnazioni duplicate all'input name=’vehicle’
- Nessun ‘for’ sull'etichetta ‘Bar:’.
-
etichetta non associata: (etichetta per cosa?)
-
input readonly senza valore è inutile
- action=”./” sembra una cattiva pratica
-
l'azione del modulo non è valida come descrittore di percorso di file unix – per inviare all'URL corrente, rimuovi completamente l'azione in quanto è l'impostazione predefinita
- il caricamento del file non può avere un attributo di valore (cattiva sicurezza)
- Nidificazione del fieldset
- gli input di file non prendono valori predefiniti – l'utente deve selezionare
-
seleziona automaticamente il tuo file ~/.bashrc per il caricamento
- disabilitato dovrebbe avere virgolette attorno (anche una cattiva combinazione di virgolette singole e doppie in tutto il documento)
- Opzioni non chiuse per il menu a discesa di selezione e nessun testo incluso
-
virgolette mancanti attorno all'attributo disabled nella dichiarazione impropria dell'input della password
- Nessun tipo nel campo della password (né nel campo email, ma meno importante lì)
- l'input della password dovrebbe essere di tipo password
-
dovrebbe essere <input type=’email’ name=’email’ …>
-
disabled=disabled dovrebbe essere disabled
- Nessun testo per l'opzione femminile, né pulsante radio per i pulsanti radio ‘Sesso’, i pulsanti radio non sono impostati correttamente per l'invio del valore / attivazione nel gruppo. Tutto è sbagliato in quell'area.
- i pulsanti radio del fieldset “sesso” non sono costruiti correttamente. Dovrebbe essere Maschio – i tag vengono utilizzati con le liste di selezione non con i pulsanti radio. Tutti i pulsanti radio in un gruppo necessitano dello stesso attributo di nome
-
gli input radio non prendono opzioni, ma dovrebbero invece avere lo stesso nome con valori diversi
- i pulsanti devono essere aperti e chiusi – l'invio dovrebbe essere un input invece
- le caselle di controllo con lo stesso nome sovrascriverebbero riguardo agli input di controllo con nome vehicle