HTML & CSS: Forms

This tutorial is basically going to be a bit of a tag (and attribute) dump on form elements, so expect it to be a bit more linear than some of the other tutorials. All these elements are obviously useful in creating forms for the user to fill in (although we can't actually submit them without using some server-side language), but can also be useful for other purposes that you might not immediately think of. It's worth noting that we certainly aren't covering all form elements (especially not some of the awesome new elements introduced in HTML5) in this tutorial – just some of the most common ones. So let's get to it.

Forms Themselves

Before you place any actual form elements on the page for the user to input data into, you'll probably want to place a form (singular) element around them. This simply provides an area for a set of form elements and becomes much more useful when you are actually submitting data from the form. Unsurprisingly, the markup for a simple form could look something like this:

1
2
3

<form>
	<!-- Form elements here -->
</form>

Now wasn't that exciting? /sarcasm. But seriously – it's kind of useful when placing form elements (especially when you want to submit all the data from a form). Now let's actually learn about creating some form elements that we can put inside a basic form.

Textboxes

Quite a few form elements are accomplished through use of the input element (or tag – it's an empty element). As you've probably guessed from the fact I said the previous sentence under a big heading of 'Textboxes', the textbox is one of these. We create the input element in our code using a single tag, and then set the type attribute to text to tell the browser we want a textbox input type (which is obviously used to get some kind of text input from the user). And it's as simple as that – we should then have a textbox on the page.

1

<input type="text"/>

If the data in the textbox is being submitted, it's probably worth setting the name attribute too as only elements with this attribute will have their data submitted. So if the data is being submitted, you might want something like this: (if it's not, don't worry about it)

1

<input type="text" name="descriptive_name_here"/>

This whole thing with the name attribute being set if you want the data to be submitted applies to every other form element that contains data in this tutorial too, so keep that in mind.

A textbox's length is usually around 20 characters long by default, but this can easily be changed with CSS using the width property. It's also worth a quick note that setting the type attribute to password instead of text yields a password input field (where the characters are hidden).

Radio Buttons

Radio buttons are of course another important form of input where one option of a group can be selected. Radio buttons are accomplished using the input element much like textboxes, and through setting the type attribute to radio. The name attribute is a bit more functional for radio buttons too as radio buttons with the same name will act as a group (so only one of them can be selected). You can also set the value attribute if you are submitting the data so that the radio button that is selected is actually converted to a value which can be stored on submission. There isn't really much more to explain here, you could create a simple radio button group with something like the following:

1
2

<input type="radio" name="gender" value="Male"/>Male<br/>
<input type="radio" name="gender" value="Female"/>Female

Note that the above isn't really brilliant usage of br, however it is being used here purely for the purpose of simplicity.

Checkboxes

Checkboxes are created almost exactly like radio buttons, however the checkbox type attribute is used. Checkboxes are obviously used when the user can select multiple options out of a group and can be seen in a lot of forms online. It's worth noting that the same concepts I talked about in the radio buttons section with name creating a group and value setting a value for submission, also applies here. So we could create a basic checkbox group with something like the following:

1
2
3

<input type="checkbox" name="transport" value="Walk"/>Walk<br/>
<input type="checkbox" name="transport" value="Bike"/>Bike<br/>
<input type="checkbox" name="transport" value="Car"/>Car<br/>

Once again, the above usage of br isn't really recommended but it works fine for this demonstration.

Buttons

Although it might seem a bit strange to insert buttons at this stage in the tutorial (I was planning to have them last as they're usually at the bottom of a form), we are going to cover them at this point because they also use the input element. You can use a type of button to just create a regular button, however for most purposes if you're using simple HTML and CSS, you'll want to use a styled a instead - buttons are used mainly in conjunction with JavaScript. What may be of more use is the type of submit which creates a submit button for your form (which will of course submit all the data if you have it 'wired up' correctly). You can set the value on both the submit button and the "regular" button to whatever you want the text on the button to be. Something like the following would work fine for a submit button:

1

<input type="submit" value="Submit"/>

Dropdown Boxes

Finally a breath of fresh air, something that doesn't use the input element! Dropdowns are achieved using the select element, with various option elements inside (think of the structure a bit like a ul with many lis inside). Everything I've talked about with name still applies here (You'll probably want to set one for the select if you're submitting data, but as far as I'm aware you don't need any for the options), and you can set the default selected option (if you want one) by tagging on selected to the end of the starting option tag (this also works with checkboxes, radio buttons and most other forms of input which can have multiple options – try it!). It's worth noting that option is not an empty tag and hence requires two tags to represent it, as the text in-between the tags is shown as the option on the dropdown menu as it appears on the screen:

1
2
3
4
5

<select>
	<option value="Red">Red</option>
	<option value="Green">Green</option>
	<option value="Blue" selected>Blue</option>
</select>

There are also some more "extra bits you can tag on" to many form elements as well as selected - these include checked, disabled and readonly. I'll leave it up to you to figure these out (their names really explain them perfectly).

Textareas

Hazzah, another one which doesn't use the input element (Honestly, I'm getting bored writing about that element)! This one is extremely simple, it's just the textarea element. Although you might expect this to be an empty element, it in fact is divisible and requires two tags to represent it as any text inside these tags will be set as the default text. If you didn't already know (I kind of assumed you would), a textarea is simply a multi-line textbox for longer text inputs. You could create one very simply with something like the following:

1
2
3

<textarea>
	Default Text
</textarea>

The width and height of textareas can be modified using the width and height properties in CSS (either give it an ID/class or just target textarea generally).

So those are all the elements we're going to cover in this tutorial, there are a handful more (especially in HTML5) which can be found in many articles and pieces of documentation online, so if you're interested in some of the more uncommon elements - have a search around and you'll probably run into something.