HTML forms – the basics




Everyone has seen a form. Everyone has used one. But have you coded one? Most areas where you can input information into web pages are created using HTML forms, for example entering text or numbers into a text box, checking a tick box, causing a radio button to “fill in”, or selecting an option from a list. The form is then usually submitted to the web site when you submit the form, and the data is used in some way, for example customer details being stored in a database for later use, or a web site being instantly updated after a buyer chooses a product to look at or comments on a blog post. It is easy to create a form, but what about a usable form that your users can fill in painless, rather than getting frustrated and fed up? In this article we’ll cover all the basics you need to know to create elegant, accessible form structures with HTML, starting with the real basics, and working up to some more complex features. We’ll then look at the new form features in HTML5 separately in the next article: HTML5 form additions. We have done it like this because it is useful to see where the distinction is, plus as of the time of this writing (18th August 2011), HTML5 form support is not quite there across all browsers. Step one: The basic code Let’s start building up a comment form, the sort of form you would use on a web site to allow people to give you feedback on something such as an article you’ve written, or a product you’ve sold. We’ll start it off really basic:

Name: Email: Comments:

If you enter this into an HTML document and then open that document in a browser, the code is rendered as shown in Figure 1. Figure 1: The first, basic form example. Try it for yourself — enter the above code into your own sample HTML document and load it in a browser, or click here to navigate to the form in a separate page. Try playing around with the different form controls to see what you can do with them. As you read the code, you’ll see an opening

tag, a

closing tag, and some bits in between the two. The element contains three inputs in which you can enter information: two single line text inputs, and a multiline text input. What have we got here? The

element Theelement is needed to wrap the form — without it you don’t have a web form. Thetag can have a few attributes, which will be explained in Step Two, but please do note that you can’t nest forms inside each other. The element : This element defines an area where you can insert information in some way. The type attribute There are different types of element that we’ll look at later, but in this case we are using to specify that we want single line text input fields (the type attribute is mandatory). We have also put “name” and “email” labels next to them, to give our site visitors an indication of what data we’d like them to enter there. The name attribute Every element must also have a name attribute that you the developer can decide on. The only exceptions to this rule are special cases where the value attribute is always set to the same value as the type attribute, eg type=”submit” or type=”reset”; in those cases the name attribute is not required. The name attribute is needed for the database or other data destination to uniquely identify that piece of data. When the form is submitted, most scripts use the name attribute to place the form data into a database or into an email that can be read by a person. Thus, if the element is for the site visitor to enter their name into, then the name attribute would be name=”name” or name=”first-name”, etc. The value attribute Every element should also have a value attribute. The value this attribute takes depends on the element it is being used on: • In the case where the value is whatever the user types in, the value attribute can be set to blank — value=”” — this will tell the processing script to just insert whatever the site visitor types into the box. If you do enter a value into the value attribute, it will appear in the text input as an initial value that the user can then overwrite. • In the case of a more complex input with a specific choice of options such as a checkbox or radio button you can set the value to equal what you want the initial value to be, out of the choices. • In cases where there is only one value so the user doesn’t enter anything, such as submit or hidden, you set the value to equal the final input. For example, you can set value=”yes” to have the initial choice of a yes/no radiobutton pair set to yes. And you’d use value=”submit” for a submit button Let’s talk through a more in depth example of how the value attribute is used: • For a start, let’s think about a blank value attribute, which the user input determines the value of. o The code says: o The user inputs: Jenifer o The value of first-name is sent as Jenifer when the form is submitted. • Now let’s think about a predetermined value: o The code says: o The user checks the box as they wish to join the website’s mailing list. o The value of mailing-list is sent as “yes” when the form is submitted. the

elements instead. To be perfectly honest, we think either way is fine, so pick the one that suits you best. Labels for accessibility Last but not least in step two, we’ve labeled the form elements. It is best to give all the form elements corresponding

  • Please check all the emotions that apply to you:
  • How satisfied were you with our service?

  • Please check all the emotions that apply to you:

  • How satisfied were you with our service?

elements, and given each one its own

element. For example:

Login details

When rendered in a browser, these look as shown in Figure 4. Figure 4: More structuring with fieldset and legend. Explaining fieldset and legend


are not mandatory, but they are very useful for more complex forms and for presentation. The

element allows you to organize the form into semantic modules. In a more complex form, you could for example use different

s to contain address information, billing information, customer preference information, and so on. The

element allows you to add a label to each

section. A little bit of style… I’ve also applied a little bit of CSS to this form, to style the structural markup. This is applied to the third form example using an external stylesheet — click on this link to see the styles. The two most important tasks I wanted the basic CSS to do is add margins to line up the labels and input boxes, and get rid of the unordered list’s bullet points. Here is the CSS that resides in the external stylesheet: #contact-form fieldset {width:40%;} #contact-form li {margin:10px; list-style: none;} #contact-form input {margin-left:45px; text-align: left;} #contact-form textarea {margin-left:10px; text-align: left;} What does it do? The first line styles the fieldset border to not take up the whole page; you could also set the border to none using {border: none;} if you didn’t want one. The second line puts a margin of 10 pixels on the

  • elements to help give a little visual room between each list item, and gets rid of the bullet points. The third and fourth lines set a left margin on the and

Leave a Reply