UI to specify a Partially Required field in a web form?
I have a set of radio buttons where a selection is required. In addition, there is an optional text box that appears next to one of the options.
What's the best way to make it clear what is required and what is optional?
<strong>User Availability:</strong><br>
<input value="Available" type="radio"> Available<br />
<input value="Unvailable" type="radio"> Unvailable
until <input type="text"> <small>MM/DD/YYYY</small>
Thanks in advance for any ideas. I am also open to a completely different approach.
Clarification: The "optional" part is the date. You MUST select either Available or Not Available. But the date is optional.
This is a user interface issue, not a technical one.
Assuming "mm / dd / yyy" is a textbox, I would put that text in the textbox, clearing it when the user clicks or otherwise sets focus to the textbox:
(date) (optional)
You can simply add a message next to this field. For example (the post may not be the best here).
[] Available
[] Not available (for "Not available") until _______________
You can also just create a text box only if you select Not Available.
[X] Available
[] Not available
[] Available
[X] Not available until [_____________________________]
You can also specify that they must include a date when they select Not Available.
Are you asking from a UI or technical perspective?
You can hide the required text box and only show it if the user selects the "Available" option.
you can do it in javascript or maybe in an updated panel of your code.
Are you using .NET? In your page_init, you can add an attribute to your radio button.
Attribute.Add ("onClick", "RevealTextbox ();")
then your javascript is just:
RevealTextBox () function {
textbox.style.display = 'block'
}
Why bother that nobody cares? If you or your users cared about the date, then this would be a must.