Hi Dinesh,
If I read the question correctly, you're asking how this HTML form can maintain state between page reloads, assuming the user has selected a radio button option other than the default checked value of "BE/B.Tech".
In general, the answer is, "You can't guarantee that will happen." In practice, the behavior of the page depends on the browser in which your user is loading the page. For example, on my system (Mac OS X, Firefox 4), Your HTML snippet loads initially with "BE/B.Tech" selected. I can select a different option, and do a "soft" refresh of the page (CMD-R, or press the "Reload current page" button), and my selection is maintained. However, if I do a "hard" refresh (a Shift-CMD-R), then the browser reloads the page from disk rather than from cache, and "forgets" my previous selection.
That behavior is different in other browsers; older versions of IE, for example, "forget" the selection upon every page reload.
If you want the selection to maintain between page refreshes, you will have to persist the state somehow outside of the HTML code itself. The two suggestions that come to mind are:
Submit the form to your server and remember the incremental state in the session. When the page is loaded, you can set the "checked" attribute based on the previous value.Code a JavaScript routine to store the value in a session cookie in the browser, and do the same thing with the "checked" attribute.
Which one to use depends on your particular requirements, but a good rule of thumb is not to store too much information in a browser cookie.
As an aside, I've pasted some suggested revisions to your code sample below. Of specific note: the
label element should only be associated with a single form control; each radio button qualifies as one control and should therefore be labeled individually. In addition, adding a
label element to each radio control allows a user to click the text of the label, rather than only the radio button itself. This is a usability improvement, since it's easier to click a large text label than a little radio button.
Finally, if the
class="epara" attributes on your radio button inputs are used only as CSS selectors for styling, you can remove them in favor of the CSS selector path
#qualification input, where
#qualification is the element ID of a DOM element that contains the radio buttons you wish to style. Below, the
fieldset element fulfills that function.
Hope this helps.
--T
