home

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.

HTML forms

For forms, the two main attribute are action and method. 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 number and date, just to name a few.

One commonly used input will be the password typed 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 hidden for 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 option and select to create the dropdown list they can choose from. select is the tag that encloses the different options, in the aptly named tag, option.

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 checkbox.

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)

Of course, everything is flexible in frontend development. With sufficient knowledge in styling and javascript, almost everything is possible.

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>

rendered:

See the Pen html basics: forms by Metta Ong (@ongspxm) on CodePen.

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 td tag.

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 thead and 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 colspan and 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>

rendered:

See the Pen html basics: tables by Metta Ong (@ongspxm) on CodePen.

end

Now, here is the end to the third part of the get started tutorial series. In the next few tutorials, you will be working on CSS styling and JavaScript coding.