i stood up a little quiz about html forms today.
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>
the goal of having people skim this completely broken html form was just to see people's line of thinking with this: the backbone of html interfaces
following are some sample answers, grouped roughly by category, and feedback to them
fubar doctype
sample reponses
- No doctype. It makes it difficult to figure out what flavor of HTML it is, which should lead to interesting responses...
Mixes xhtml style empty tags with HTML tags.
Inconsistent quoting. Both work, pick one already...
line 1: DELETE is not an action supported in HTML forms:
method=delete isn't directly supported in most/any? browsers.o
forms don't support delete in older browsers
Method delete
form method='DELETE' -- that's not allowed
enctype="multipart/form-data" not enctype="multipart/file-upload"
enc-type="multipart/file-upload makes no sense if our intention is to DELETE
text input tags in the first fieldset have the name
duplicate "" tags. Or two tags with the same name again
2 text fields named "tags" only the last one will be used.
Two inputs with same 'tags' name. Second one would overwrite value of 1st.
Two inputs with name 'foo' (not self closed)
text inputs with the same name would override re: inputs w/ name tags
duplicate assignments to input name='tags'
duplicate assignments to input name='vehicle'
No for on the 'Bar:' label.
unbound label: (label for what?)
readonly input with no value is pointless
action="./" seems like bad practice to me
form action is invalid as a unix filepath descriptor -- to submit to the current url remove the action entirely as that is the default
file upload can't have a value attribute (bad security)
Fieldset nesting
file inputs don't take default values -- user must select
it automatically selects your ~/.bashrc file for upload
disabled should have quotes around it (also a bad mix of single and double quotes throughout)
Unclosed options for select dropdown and no text included
missing quotes around disabled attribute in improper password input declaration
No type on the password field (nor on email field, but less important there)
password input should be of type password
should be
disabled=disabled should be disabled
No text for female option, nor radio button for 'Sex' radio buttons, radio buttons not setup properly for value submission / toggle in group. Its just all bad in that area.
fieldset "sex" radio buttons are not constructed correctly. should be Male -- tags are used with select lists not radio buttons. All radio buttons in a group need the same name attribute
radio inputs don't take options, but should instead have the same name w/ different values
buttons need to be opened and closed -- the submit should be an input instead
checkboxes with the same name would override re: checkbox inputs w/ name vehicle
Tweet