HTML - forms and tables
This is the 3rd post in the Getting Started series.
In this post, I will be introducing more HTML elements, mainly the form and table elements.
For forms, the two main attribute are
action tells the form where to submit the values, and
method tells the form how to sumbit the form, the value can be either
GET (default) or
POST. If you have no idea what I am rambling about, read the rest first, then head over to this article to get it all sorted out.
What’s more important here is the form elements. These comprises everything that makes up a form. When rendered, the browser will display the form with the different field, depending on the element used.
Each element will have the tag
name and it would correspond to the different fields in the form (eg. ‘email’ and ‘password’ for a login form).
input (the fundamental one)
This is the one you probably will use the most often. The
input element is usually accompanied by a
type tag. For those usual text input that you see on most forms, the
type value is
text, but there are other types of inputs too, like
date, just to name a few.
One commonly used
input will be the
input. Instead of displaying the text, asterixs are used instead to hide the input text from prying eyes.
Most input type will also have the
placeHolder attribute. For modern browsers, the
placeHolder value will be displayed when the value of the
input is empty.
input (the special kind)
There are some special kinds of
input too. When the
input is typed
submit, a button will be rendered to submit the form where the input resides in.
There is also a type
input tags. This tag will not be displayed and is usually used to submit “behind-the-scene” information that users do not need to enter directly.
textarea (the bigger text input)
For form inputs which are longer (eg. addresses, paragraph of text), there is the
textarea element. This element allows for multiline text input. For long input, the
textarea is usually used.
option (the dropdown list)
In some inputs you only want to give your users a few options (their month of birth for example).
So you make use of
select to create the dropdown list they can choose from.
select is the tag that encloses the different options, in the aptly named tag,
radio buttons (choosing between options)
This is another way of allowing your users to choose from different options. When using radio buttons, all the options are shown, as compared to dropdown lists, where the options are revealed only after a click. Radio buttons are displayed when
input are typed
radio and are activated when the attribute
checked exist for the element.
checkbox (either on or off)
For this element, it used for fields where there is only two choices (eg. ‘remember password’ for a login form) – selected or not. A checkbox is displayed when an
input is typed
HTML5 inputs (specialized pickers)
As I mentioned before, the
input tag is the mother of all inputs. In HTML5, there are some new types of inputs that triggers specialized pickers for choosing (eg. colors, dates). There is really too many types to go through throughly here. Visit this article to view the kinds of input available for use.
input (the expansion pack)
Libraries such as AnyPicker and jqueryUI extends the form functionality of existing browsers by providing even more specialized pickers for different form fields. Anyone interested should go and check them out.
sample (basic HTML forms)
<form> <input name="input_text" type="text" placeHolder="text input" /> <input name="input_hidden" type="hidden" value="not_be_shown" /> <textarea name="input_textarea" placeHolder="textarea"></textarea> <select name="input_select"> <option>Option 1</option> <option>Option 2</option> </select> <div class="radio"> <div> Option 1 </div> <div> Option 2 </div> </div> <div> Yes or No </div> <input type="submit" value="Click Me" /> </form>
tables (displaying information)
Most data are displayed in tabular format, it allows the users to quickly see the relation between the different entities and compare data more efficiently.
The tables in HTML are enclosed in the
table tags. Within the section, all the information will be formatted by its row and column.
tr & td (basic table elements)
For tables, the most important thing will be the rows and columns. In HTML, the rows are represented using the
tr tag and the column, using
thead and tbody (table styling)
When displaying data, the headings are very important. In HTML, the headings and the data itself is separated using the
tbody tags. This way, the headings can be styled separately from the rest of the table.
additional data formatting
Sometimes, tables are not as simple as they seem. In more complex arrangement, a single table cell could span over multiple rows or columns, and this is where
rowspan comes in. Read this article to have a better understand of how to use those attributes.
sample (basic HTML tables)
<table> <thead> <tr> <td>Index</td> <td>Name</td> </tr> </thead> <tbody> <tr> <td>01</td> <td>Metta Ong</td> </tr> <tr> <td>02</td> <td>Alex Malcolm</td> </tr> <tbody> </table>