HTML tag label is useful for Radio buttons

Radio Buttons

To click on a Radio button is very boring things to me. A radio button is maximum 15 x 15 pixels. So need extra care to click on Radio buttons.

When I work with Radio buttons in my web applications, I use HTML tag – ‘Label‘.

For example, I have a Radio button like this-

[sourcecode language=”html”]

Click on this Radio button

[/sourcecode]

This Radio button require extra care to click. I write the above code like bellow, so that the visitors can select the Radio button clicking on the text – “Click on this Radio button“.

[sourcecode language=”html”]

[/sourcecode]

Now the visitors can select the Radio button clicking on the text. Enjoy easy clicking on the Radio buttons.

HTML form :: difference between disabled and readonly element

I was working with HTML forms. In the forms I used readonly and disabled input elements. What is the deference between these two attributes of input element?

Say for I have an input element in HTML form.

If we set the attribute readonly="readonly" then the input element is not editable. This attribute allows the user to highlight and copy the text inside the input field, but not change the value.

This attribute is only used if the type attribute of the input element is set to “text” or “password”.

I have another text field like bellow.

If we set the attribute disabled="disabled", the input element is disabled, un-editable and un-selectable. This attribute not allow the users to highlight and copy the text inside the input field. Another thing happen here, the data within the input element will not be submitted to the action page.

Submit HTML form to pop up window

Some times we may need to submit HTML form to a pop up window. Let’s take a look into the details.
Say for I have a HTML form.

[sourcecode language=”html”]

Name :
E-mail :

[/sourcecode]

We may submit this form to a blank window by setting target=”_blank”, but when we need to submit the form to a pop up window then we should do some extra code. Let’s try.

Step one: Defining a JavaScript function
[sourcecode language=”javascript”]function openWindow(url, wname, width, height) {
window.open(url, wname, “height=” + height + “,width=” + width + “location = 0, status = 1, resizable = 0, scrollbars=1, toolbar = 0”);
return true;
}[/sourcecode]

Above function opens a pop up window according to the supplied arguments. There is a tricky thing. ‘name’ is a keyword in JavaScript. We should not put the variable name as ‘name’. IE reports error if we put name as a variable name.

Step two: Setting the form attributes
Now we set the form attributes like bellow
[sourcecode language=”html”]

[/sourcecode]

Step three: Preparing thank you page
Now we are ready to prepare the thank-you.php page for processing the form data.

Some more things must follow for security and to protect spamming. We should apply both JavaScript and server side validation into the form, protect spamming and XSS.