Difference Between a Radio Button & Drop-Down

Radio buttons and drop-down lists are two types of input fields that Web developers can build into websites to get information from the user. The fields can be used to do things like toggle site features, send the user to desired website pages, gather information for mailing lists and set up order forms. Radio buttons and drop-downs display information differently from each other and take different approaches to utilize screen space. Both elements are used to let the user select between predetermined options, but neither allows the user to type in custom content.

Radio buttons and drop-down lists are types of input fields used within a HTML feature called Forms. HTML forms gather information from the user and interpret that information to perform the programmer's intended task. According to W3Schools.com, "HTML forms are used to pass data to a server." A single form may include a single entry field or dozens of entry fields including multiple radio button groups and multiple drop-down lists. The form will include some sort of submission method that sends the content to the server or adjusts other active elements on the page.

Radio buttons are a "select only one" type of listing used in HTML forms. The programmer sets up multiple radio buttons that are unified in a single selection group to let the user select one of multiple options. The radio button element is named after analog car radios that would use a series of buttons to choose from station presets: pushing one button would cause an already pushed button to pop out because you could only listen to one radio station at a time.

In forms, radio buttons look like small circles and the selected button in a group is signified by placing a dot inside of the related circle. Radio buttons are usually accompanied with text or an image that signifies which selection relates to which button. On the programming side, radio buttons are grouped together by sharing the same "name" attribute and pass the selection value to the server with the "value" attribute. A radio button group might be used in a search function to toggle the results date range.

The drop-down name comes from the field expanding downward when activated. Drop-down lists are officially referred to as "Select" elements in HTML and create a small text box that when clicked on or tapped reveals a list of selection options. The user can choose from these options by clicking on or tapping on the related text. Drop-down lists only allow single option selections by default but the field type can be configured so that the user can select multiple choices from the list, unlike with radio buttons. On the programming side, drop-down lists are tied together by using a parent "select" element that sets the content field name with the "name" element and children "option" elements to set the submission values and display text. Drop-down lists might be used to list shirt-sizes or color choices on an order form.

Radio buttons and drop-down lists can be used interchangeably, but a Web designer may opt to use one over the other depending on the use case. Radio buttons display all options on the screen by default, whereas drop-down lists expose the options when activated. However, drop-down lists take up less screen space.

Selecting an option from a drop-down list can act as the submission command, which might be used for tasks like site navigation.