Bbelek Web Development Course Part 5: Forms

Welcome back to the development course. Now it’s time to learn about forms. You may have noticed that forms are used all over the web to get user input. This happens in various ways, by entering information into text fields, select something from a drop-down box, chose among multiple options in buttons etc. The one thing that is valid for all of them, is that it is in some way or another a method of getting information (input) from the user. In this part we will go through the basic form and input elements.

The form itself

The typical HTML form is enclosed by the <form> tag, which holds two important attributes, “method” and “action”. The “method” attribute specifies in what (technical) way the information is being submitted. In our example we use the “post” method. If you are interested, you can read more about different methods here. The “action” attribute indicates where the data is being sent to. This should be the program/script that handles the data. We will get further into scripts etc. in future articles, so for now, please accept that this is just the “destination” of the data. This article is meant to describe the HTML form elements. Not the data-handling itself.

<form method="post" action="http://mydomain.com/form_target/">
</form>

Textfields

There are two basic textfields. The most common is single-line textfields, which is used for short text or numeric data, like a name, an email address, a phone number or similar. The second type is for longer pieces of text, and quite fittingly called “textarea”. A texture can hold multiple rows of text, and would normally be seen for example to input a longer message, for example in an email web interface or a website feedback/contact form (please note how we use two different tags <input> and <textarea>, and that <input> can close itself with the slash (/) at the end.

<input type="text" name="subject" />
<textarea name="message"></textarea>

Drop-down

A basic drop-down consists of a <select> tag with multiple <option> tags, for the various possible options to select in the drop-down (logic, huh?).

<select name=”pick_a_number”>

<option value=”1″>One</option>

<option value=”2″>Two</option>

<option value=”3″>Three</option>

</select>

Other field types

There are other field types, such as radio buttons, checkboxes and more. You can get a more in-depth overview here.

Submit button

The final input type I want to describe here, is the submit button. This is a button that sends the form’s data to the target address (specified in the <form> “action” attribute). Every form needs to submit it’s data to have the input processed.

<input type=”submit” value=”Send Data” />

There are a literally unlimited amount of ways to create and style forms (yes, they can also be designed with CSS, like all other HTML elements). This article is a brief overview over the basics, and you find more in-depth information by following the posted links. When the web-development course gets into scripting (programming), we will continue with how to process and “do something” with the submitted data.

Happy coding!