(X)HTML forms

Derek Bridge

Department of Computer Science,
University College Cork

(X)HTML forms



<form method="dummy.php" action="get">

The input and the type attribute

Text entry fields

Use an input element with type="text" if you want a text entry field (for a single line of text)

What is your user id?

<input type="text" name="userid" size="25"
 maxlength="30" value="enter your user id" />

Submit and reset buttons

<input type="submit" value="GO!" />
<input type="reset" />

When the user presses submit...

And then...



Accessibility: the label element

Accessibility: the fieldset and legend elements

 <legend>Visitor's name</legend>
  <label for="firstnameField">First name:</label>
  <input type="text" name="first" id="firstnameField" />
  <label for="surnameField">Surname:</label>
  <input type="text" name="surname" id="surnameField" />

Accessibility: the accesskey and tabindex attributes

<input type="text" name="first" accesskey="f" tabindex="1" />
<input type="text" name="surname" accesskey="s" tabindex="2" />

CSS for forms

label {                            
 width: 12em;                       
 float: left;                       
 text-align right;                                        
 margin-right: 0.5em;
 display: block;