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.
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
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
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.
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)
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 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
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:
Note that the above isn't really brilliant usage of
br, however it is being used here purely for the purpose of simplicity.
Checkboxes are created almost exactly like radio buttons, however the
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
Once again, the above usage of
br isn't really recommended but it works fine for this demonstration.
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
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 -
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:
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
There are also some more "extra bits you can tag on" to many form elements as well as
selected - these include
readonly. I'll leave it up to you to figure these out (their names really explain them perfectly).
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
The width and height of textareas can be modified using the
height properties in CSS (either give it an ID/class or just target
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.