Form Container and Submission Attributes

This chapter focuses on attributes that control how a form behaves as a whole when data is prepared and submitted.

Main Tags Covered

• <form>
• <fieldset>
• <legend>
• <label>
• <output>
• <datalist>

<form> Attributes

• action
• method
• autocomplete
• novalidate
• target
• name
• enctype
• accept-charset

Possible method values:

• get
• post

Common enctype values:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

<fieldset> and <legend>

Purpose:

• group related controls
• provide a visible group label

Useful attributes:

• disabled on <fieldset>
• global attributes on both elements

<label> Attributes

• for

Purpose:

• connects label text to a control

<output> Attributes

• for
• name

Purpose:

• displays calculation results from form inputs

<datalist> Usage

Purpose:

• provides suggestions for an input

Connected through:

• list on <input>
• id on <datalist>

Example:

<label for="city">City</label>
<input id="city" name="city" list="cities">
<datalist id="cities">
    <option value="Mumbai">
    <option value="Delhi">
</datalist>