Creating a Basic Form


Posted on September 21st, by Learning in HTML, HTML Elements In Context. 9 comments

To create a basic form, you need three elements: the form, input, and button elements. The code below shows an HTML document that contains a simple form.


<!DOCTYPE HTML>
 <html>
 <head>
 <title>Example</title>
 <meta name="author" content="Luís"/>
 <meta name="description" content="A simple example"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 </head>

<body>

<form method="post">
 <input name="fave"/>
 <button>Submit Vote</button>
 </form>

</body>
 </html>

This form is so simple that it isn’t much use, but after you’ve looked at each of the three core elements, you can start to add to the form and make it more meaningful and useful.

Defining the Form

The starting point is the form element, which denotes the presence of a form in an HTML page. The table below summarizes the form element.

Element: form
Element Type: Flow
Permitted Parents: Any element that can contain flow elements, but the form element cannot be a descendant of another form.
Local Attributes: action, method, enctype, name, accept-charset, novalidate, target, autocomplete
Contents: Flow content (but particularly label and input elements)
Tag Style: Start and end tags
New in HTML5? No
Changes in HTML5 The novalidate and autocomplete attributes are new in HTML5.
Style Convention form { display: block; margin-top: 0em; }

The second critical element is input, which allows you to gather input from the user. You can see that the input element has been displayed by the browser as a simple text box, into which the user can type. This is the most basic type of input element and, as you’ll see, there are lots of options for how you gather input from the user (including some nice new additions in HTML5). The table below summarizes the input element.

Element: input
Element Type: Phrasing
Permitted Parents: Any element that can contain phrasing elements
Local Attributes: name, disabled, form, type, plus other attributes based on the value of the type attribute
Contents: None
Tag Style: Void
New in HTML5? No, but there are some new types of input, which are accessed through the type attribute. (See Chapter 13 for details.)
Changes in HTML5 There are new values for the type attribute in HTML5, and there are several new attributes that are used with specific values for the type attribute.
Style Convention None. The appearance of this element is determined by the type attribute.

The final element in the example is button. You need some means for the user to indicate to the browser that all of the data has been entered and that the browser should send the data to the server. The button element is the most commonly used way of doing this. The table below summarizes the button element.

Element: button
Element Type: Phrasing
Permitted Parents: Any parent that can contain phrasing elements
Local Attributes: name, disabled, form, type, value, autofocus, plus other attributes based on the value of the type attribute
Contents: Phrasing Content
Tag Style: Start and end tags
New in HTML5? No
Changes in HTML5 There are new attributes, which are available depending on the value of the type attribute. (See the “Using the button Element” section for details.)
Style Convention None

The button element is a multipurpose element, and I’ll explain the uses it can be later. When used inside a form element and without any attributes, the button element tells the browser to submit the data collected from the user to the server.