Sun of Day

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-

<input type=”radio” name=”test” id=”test_id” value=”something” /> Click on this Radio button

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

<input type=”radio” name=”test” id=”test_id” value=”something” /> <label for=”test_id”> Click on this Radio button</label>


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

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.

<input type="text" name="full_name" value="My Name Here" readonly="readonly" />

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.

<input type="text" name="email" value="my@email.here" disabled="disabled" />

If we set the attribut 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.

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.

<form name="contactForm"  method="post" action="thank-you.php">
Name : <input type="text" name="name" id="name" /> <br />
E-mail : <input type="text" name="email" id="email" /> <br />
<input type="submit" value="Submit" />
</form>

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
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;
}

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
<form name="contactForm"  method="post" action="thank-you.php" target="popupWin" onsubmit="return openWindow('thank-you.php', 'popupWin', 600, 500);">

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.