HTML input fields
HTML offers a handful of input fields that let us build forms where the user can enter and submit information to the server, as we've seen in the previous HTML forms tutorial.
Using the mother of all input tags <input type="text" /> as example, we'll have a look at how input fields work in general and how to make them accessible. All things discussed here apply to all form input tags.
Input name
Let's start out with a simple form with one text field and a submit button:
Simple HTML form
<div>
Enter some text:
<input type="text" />
<input type="submit" value="Click to submit" />
</div>
</form>
Output
If you try to submit above form, nothing will happen, even though the markup's all correct and the text field is there. Why's that? A vital part is missing: the name attribute!
Every input field needs a name in order to be sent to the server and HTML will simply refuse to send input fields without name.
This is required because the script that receives the form data needs a way of identifying the input fields. Think of the script saying: "Hey, let's check what value was sent for the text field called so-and-so.". Without name attribute this wouldn't be possible.
So let's try again with a name attribute this time:
Input field with name
<div>
Enter some text:
<input type="text" name="usertext" />
<input type="submit" value="Click to submit" />
</div>
</form>
Output
As you can see, the form is now working and the script is able to detect what data was sent!
Input labels
Even though the form's working, we're not completely happy yet.
Forms, more so than other things on a web page, should be as accessible as possible because they actively involve the user. Handicapped people should be able to fill out a form just as easily as everyone else.
In our form above we tried to describe the text field by writing Enter some text: next to it. Although this works fine for people who can see it well enough, others using a screen reader might not pick it up or associate it with the text field.
Thankfully HTML provides a special tag just for this: the label tag <label for="">...</label>.
It has a single for attribute for="" which holds the id of the input field it describes. The description is written between the tags. For the for="" attribute to make sense, we need to add an id attribute id="" to the input field we wish to describe.
Let's apply this to our form:
Accessible input field
<div>
<label for="usertext">Enter some text:</label>
<input type="text" name="usertext" id="usertext" />
<input type="submit" value="Click to submit" />
</div>
</form>
Output
Now screen readers will read it 100% of the time as the description for our text field!
Fieldsets and legends
While labels work well for individual input tags, sometimes in larger forms it can be helpful to group multiple input fields together and give them a name. This not only improves accessibility but also usability for regular users.
The grouping is done using the fieldset tag <fieldset>...</fieldset> and the naming is done with the legend tag <legend>...</legend>.
The fieldset is a block-level element that holds all content that you wish to group together. The legend comes as the first element inside the fieldset and appears as the fieldset's title. Note that this can be used anywhere, not just for forms.
The following example should make things clearer:
Fieldsets and legends
<fieldset>
<legend>Required information</legend>
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" /><br />
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname" />
</fieldset>
<fieldset>
<legend>Optional information</legend>
<label for="hobbies">Hobbies:</label>
<input type="text" name="hobbies" id="hobbies" />
</fieldset>
<div>
<input type="submit" value="Click to submit" />
</div>
</form>
Output
Input field types
What we've learned so far about forms pretty much covers all the basics of form functionality on the client side.
All that's left are the different input field types and tags you can use to build forms, which will be covered as soon as the HTML tag reference is up and running! Coming soon™