Checkboxes, Radio and Button Inputs

    The purpose of this post is to think out loud and remind myself the types of inputs available for HTML. Three that I most commonly use are the radio, checkboxes and a input type button (not the button tag). Which are the focus of this article since none of them allow me to achieve what I want.

The UI I want:
     I want to give my users a place to select from a group of item and only select one item as well as give them the option to deselect that option if they change their mind of selecting that set of group. This is how the input  check-boxes but without the grouping like a radio button. So really combining the two (radio and check-boxes) types of input together. You have the look and feel of a check-box but the logic of a radio and the add logic of unselecting from a check-box. There are other types of inputs/UI's that I did not look at but this was just a starting point for my research. 

Radio Button
    Here is an Example of what a radio button does. As you can see once selected, the selected can not be unselected. It does only allow one selection which is close to how I want it to work. "How to unchecked a radio-button by clicking on it a second time: was Q/A I found awhile back on how to achieve this but the best answer I found that states how this UI change might confuse users, which I completely agree with. Still I don't think it would confuse users with a check-box. Since a Check-box as much of this logic already just lacking the piece where only one box of a particular subset may be selected. 

 Checkbox
     There's always someone on Stackoverflow how has already asked the question that I'm about ask myself as if they're reading my mind. So if it seems like all I do it copy and paste its because a lot of the times I did my research before trying to reinvent the wheel. Besides its good to see a starting point before trying something new so you know what has already been attempted. As I research section shows, I did find one solution however it seemed to be buggy for me. Still I think this is the right path to head down for the UI I want but I will look at a button just to be sure.

Button (not input type)
    An example here can show the functions of a html button, is much like a input type button. One thing to notes with buttons is "Different browsers use different default types for the <button> element." Which may be a reason to use if you are looking to make your ui style dependent on the platform you are designing for.

Button tag vs. Input type Button?
    I don't normally use a button tag, but after putting them side by side I asked myself if I should start. Like both section define their differences however it may not be clear when to use which ui "input". I find myself using a input type button for forms since that is there main purpose and button for my applications that I intend to styled across multiple platforms but this will vary from project to project.


Research
HTML input tag
HTML button tag
Button vs. Input type="button"

Comments

Popular posts from this blog

Ng-repeat: Order a List Vertically rather Horizontal

HTML5 Audio doesn't Autoplay for Chrome on Android

Updating Razor 2.0 to 3.0 with Asp.net MVC