When I browse the internet I see too much forms styled in a table. Keep notice that tables are only used for tabular data such as your dvd collection for example. In this tutorial I show you a way to style a form with all the elements that are developed for this purpose.
form
Everyone who surfs on the internet uses forms. Sending emails, register on web-pages, they can be used for countless purposes. Read more about forms.
Required parameters
- action required- The url of the file where the form is pointing to
fieldset
The fieldset adds a border to your form. I recommend to add always a fieldset in your html. You can hide the border with a css file. You can add multiple fieldsets to one form to make some categories for more structure.
legend
The legend is placed in line with the fieldset. The combination of these two elements .
The title
label
Labels are very useful to add more functionality tor your form. When a user clicks on the label the input it highlights the input element with a corresponding id. Read more about labels
Required parameters
- for – Boe
input
There are a lot of input types you can use to build your form.
Required parameters
- name – When a user clicks on the label the input it highlights the input element with a corresponding id
The html
The css
The following css is used in the example:
fieldset {
width: 450px;
border:1px solid #EEE;
border-bottom: none;
padding: 10px;
}
fieldset p {
margin: 0px 0px 3px 0px;
}
legend {
font: bold 0.9em Georgia, "Times New Roman", Times, serif;
color: #f8991d;
}
label {
width: 220px;
padding: 5px 0px;
float: left;
display: block;
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
.inputbox {
width: 200px;
padding: 5px;
border:1px solid #EEE;
font: 12px "Courier New", Courier, monospace;
color: #333;
}
select.inputbox {
width: 212px;
}
.radio {
float: left;
display: block;
width: 200px;
margin-bottom: 3px;
}
