Continuing from Part 2 of this tutorial, we move on the very crucial topic of Forms and its controls. Forms are primary way of providing input to the website or webapp. For example if we log on to a website, the portion of the webpage requiring our login name and password is actually an HTML Form and input fields and submit button thereon are its controls.
Form
Let’s create a new HTML file named form.html in the same folder as index.html. To quickly do that, just copy paste the index.html file and rename the copy file as form.html. Now, change the body part of this file as follows;
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form action='index.html'>
<button type='submit'>Submit</button>
</form>
</body>
</html>The form is defined by the <form></form> tags. Everything between <form> and </form> will become part of the form and on submission all the data within the form’s fields will be passed on to the address given in ‘action’ attribute of the <form> tag. Normally ‘action’ attribute contains address of some server script to which all the values from form’s fields are passed on to; however here in above code, we’ve put ‘index.html’ for demonstration purpose only. What this will do on submission is call the ‘index.html’ and pass on the form’s fields values.
Next, we have a button which is defined by the <button></button> tags. <button> has ‘type’ attribute which defines its behavior; here it’s the submit type means on pressing the button the form will submit.
Save and load the form.html file in browser; ‘Submit’ button will appear on webpage, go ahead and press it. The form data will be submitted to the ‘action’ address which is currently the address of ‘index.html’. So the browser will simply approach the index.html and render the result. Nothing interesting here to note. So let’s move on to different types of inputs and fields; insert the follow code between <form> and </form> just right before submit button;
<input type='text' name='first'>
<input type='checkbox' name='accept'>
Here, we’re inserting couple of input type of fields; first one is the ‘text’ type of input, other is the ‘checkbox’ type of input. Both input fields have an attribute ‘name’ which defines the field name for each of them. Save and reload the form.html in browser. You’ll see one empty text box and one empty checkbox just before ‘Submit’ button. Now, press submit button without any input in empty fields. Browser will take us to index.html as explained previously. Look closer in the address bar of browser; you see the address as …index.html?first=
‘?’ in URL address represents the start of field names and values which have been passed on to this current location. Next will be pairs of field names and their respective values; field name and its value are linked with ‘=’ sign. Here we haven’t submitted any values in the form’s fields, therefore ‘first=’ represents that field named ‘first’ has no value. Also note that there is no mention of second field i.e. checkbox.
Now go back to form.html. Put value ‘hello’ in textbox and click on checkbox to fill it with check. Press submit button and notice the address bar which looks like …index.html?first=hello&accept=on
Now both fields ‘first’ and ‘accept’ have values which are ‘hello’ and ‘on’ respectively. Also notice the ‘&’ between two pairs of field name and value which acts as separator for field-value pairs.
Let’s go back to form.html and put another type of input field after checkbox;
<input type='radio' name='country' value='England'>
<input type='radio' name='country' value='Germany'>
<input type='radio' name='country' value='Japan'>
These input fields are called radio buttons. Although above radio buttons are multiple in count, but they are joined together with ‘common name’ which in above case is ‘country’. The value which will be passed on, is of the radio button which is selected; the other two will automatically be set as unselected. Save form.html and reload it browser. Now we have three radio buttons next to checkbox. Go ahead and select the middle radio button and press submit button. Look in the address bar and in field name-value pair you’ll see …country=Germany. Go back and select last radio button and press submit button. Now the value is …country=Japan.
Let’s put couple of other form fields after radio buttons;
<textarea name='message' rows='10' cols='30'>
Type your comments here.
</textarea>
<select name='manufacturer'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Volkswagen'>Volkswagen</option>
</select>
The <textarea> field provides a text area to hold more text than input text type. It is used for input of paragraphs such as feedback, complaints and suggestions. <textarea> has attributes of ‘rows’ and ‘cols’ to define the initial size of the box; in above <textarea> the value of ‘rows’ attribute is 10, so when the webpage is loaded, 10 rows will initially be there for text input. Similarly the value of ‘cols’ attribute is 30, therefore the initial columns or character spaces will be 30.
Next, we have ‘select’ input field which acts as a list of selectable options; obviously the inner <option> tags define the options or list of selectable items. These tags are self-explanatory, so just save form.html and reload it in the browser.
Type something in textarea and select an option from dropdown menu. Press submit and observe the name-value pairs that appear in the address bar of the browser.
Our form.html now looks as follows;
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form action='index.html'>
<input type='text' name='first'>
<input type='checkbox' name='accept'>
<input type='radio' name='country' value='England'>
<input type='radio' name='country' value='Germany'>
<input type='radio' name='country' value='Japan'>
<textarea name='message' rows='10' cols='30'>
Type your comments here.
</textarea>
<select name='manufacturer'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Volkswagen'>Volkswagen</option>
</select>
<button type='submit'>Submit</button>
</form>
</body>
</html>All looks good. Well, not that good! Nobody knows what each field of input represents. So, let’s put labels for each of them. For labeling input fields, we have <label></label> tags. <label> tag takes an attribute ‘for’ that holds the id of the corresponding input field. Therefore, we’ll need to put ‘id’ attribute in each input field for the purpose of referring it in its label tag. For example, our first input text field with proper label would become like that;
<label for='first'>First Name:</label>
<input id='first' type='text' name='first'>Note that the value of ‘for’ attribute in label corresponds with ‘id’ attribute in input field. Let’s change our form.html with proper labeling for each field of input;
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form action='index.html'>
<label for='first'>First Name:</label>
<input id='first' type='text' name='first'>
<label for='accept'>Accept?</label>
<input id='accept' type='checkbox' name='accept'>
<input id='England' type='radio' name='country' value='England'>
<label for='England'>England</label>
<input id='Germany' type='radio' name='country' value='Germany'>
<label for='Germany'>Germany</label>
<input id='Japan' type='radio' name='country' value='Japan'>
<label for='Japan'>Japan</label>
<label for='message'>Feedback:</label>
<textarea id='message' name='message' rows='10' cols='30'>
Type your comments here.
</textarea>
<label for='manufacturer'>Car maker:</label>
<select id='manufacturer' name='manufacturer'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Volkswagen'>Volkswagen</option>
</select>
<button type='submit'>Submit</button>
</form>
</body>
</html>Save and reload form.html in the browser. Much legible now! But everything is inline, so before concluding this tutorial, let’s cover yet another important topic of <div></div> tags.
Div and Span
<div></div> tags represent a block on our webpage. <div> tag provides a container functionality i.e. a container of other HTML tags. <div> tag is handy when you want to apply specific styling and/or positioning to a part of your webpage; in fact modern web development makes use of <div> in abundance. So let’s put controls in our form into different <div> tags and see the result;
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form action='index.html'>
<div>
<label for='first'>First Name:</label>
<input id='first' type='text' name='first'>
</div>
<div>
<label for='accept'>Accept?</label>
<input id='accept' type='checkbox' name='accept'>
</div>
<div>
<input id='England' type='radio' name='country' value='England'>
<label for='England'>England</label>
<input id='Germany' type='radio' name='country' value='Germany'>
<label for='Germany'>Germany</label>
<input id='Japan' type='radio' name='country' value='Japan'>
<label for='Japan'>Japan</label>
</div>
<div>
<label for='message'>Feedback:</label>
<textarea id='message' name='message' rows='10' cols='30'>
Type your comments here.
</textarea>
</div>
<div>
<label for='manufacturer'>Car maker:</label>
<select id='manufacturer' name='manufacturer'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Volkswagen'>Volkswagen</option>
</select>
</div>
<div>
<button type='submit'>Submit</button>
</div>
</form>
</body>
</html>
Now, each field is in separate block, although we haven’t really used the real magic of <div> yet, but things have started to take shape. Just remember for the time being that <div> provides container functionality as block.
There is a little cousin of <div> which is <span> tag; this tag provides the container functionality too, albeit inline (remember when things were showing all in one line before applying <div>? that’s called inline).
It’s OK if Div and Span tags seem ambiguous for the time being; These container tags would make more sense in CSS tutorial where styling and positioning come into play.
1 thought on “Essential HTML Tutorial – Part 3”