How do you create multiple-choice and single-choice options in HTML forms?

由人工智能和领英社区提供技术支持

If you want to create interactive web pages that allow users to select from different options, you need to use HTML forms and input types. HTML forms are elements that collect and submit user data to a server or a script. Input types are attributes that define the type of data that the user can enter or choose. In this article, you will learn how to create multiple-choice and single-choice options in HTML forms using the checkbox and radio input types.

此文章中的业界达人

由社区从 4 条内容中精选。了解更多

Neeru Gangarh

CSE’27 UG @CTU?? | GSSoC'24 (Ranked 18th ??) | Open Source Contributor @SWOC'25 | WoB | Hacktoberfest'24 ?? | HTML |…
FALADE Ben A. Basty

Frontend Developer | HTML ? CSS ? JAVASCRIPT ? REACT.JS

1 What are checkboxes and radios?

Checkboxes and radios are input types that let users select one or more options from a list. Checkboxes allow users to select multiple options, while radios allow users to select only one option. To create checkboxes and radios, you need to use the input element with the type attribute set to checkbox or radio . You also need to use the name and value attributes to identify and send the selected options to the server or the script.

添加您的观点

Neeru Gangarh

CSE’27 UG @CTU?? | GSSoC'24 (Ranked 18th ??) | Open Source Contributor @SWOC'25 | WoB | Hacktoberfest'24 ?? | HTML | CSS | Daily Python Updates ?? | 100+ Days of DSA & JS ?? |
举报内容
To create multiple-choice (checkboxes) and single-choice (radio buttons) options in HTML forms: 1. Checkboxes: Use <input type="checkbox"> for multiple-choice options. Each checkbox should have a unique id, the same name for grouping, and a value. 2. Radio Buttons: Use <input type="radio"> for single-choice options. Each radio button should have a unique id, the same name for grouping, and a value.

已翻译

赞
FALADE Ben A. Basty

Frontend Developer | HTML ? CSS ? JAVASCRIPT ? REACT.JS
(已编辑)
举报内容
In case you want to use a "yes" or "no" type of question or a question that allows multiple selections in a response to a choice-given question, you can use checkboxes. <input type="checkbox" name="food1" value="rice" /> <input type="checkbox" name="food2" value="chicken" /> The name of each checkbox must be unique so they identify separately. The values should also be unique to represent the value of each option. Radio buttons are intended to allow a single selection among multiple options in response to a single choice given. <input type="radio" name="fun" value="gaming" /> <input type="radio" name="fun" value="hiking" /> The name of each group of radio buttons has to be identical so that they can be identified as a group.

已翻译

赞

2 How to create checkboxes in HTML forms?

To create checkboxes in HTML forms, you need to begin by creating a form element with the action and method attributes that specify where and how to send the user data. Inside the form , add a fieldset element with the legend element that describes the group of options. Then, create multiple input elements with the type attribute set to checkbox . Give each one a unique id attribute and a common name , as well as a value . You can also use the checked attribute to pre-select any option that you want. Lastly, use the label element with the for attribute that matches each input 's id to display the option text.

添加您的观点

FALADE Ben A. Basty

Frontend Developer | HTML ? CSS ? JAVASCRIPT ? REACT.JS
(已编辑)
举报内容
Here is an example of how to create checkboxes in HTML form. <form action="/action_page.php" method="post"> <fieldset> <legend>Creating checkboxes:</legend> <label for="food1">First food:</label> <input type="checkbox" name="food1" id="food1" value="chicken" /> Chicken <label for="food2">Second food:</label> <input type="checkbox" name="food2" id="food2" value="rice" /> Rice <label for="food3">Third food:</label> <input type="checkbox" name="food3" id="food3" value="potato" /> Potato </fieldset> </form>

已翻译

赞

3 How to create radios in HTML forms?

In order to create radios in HTML forms, you must first create a form element with the action and method attributes that specify where and how to send the user data. Inside this element, add a fieldset element with the legend element that describes the group of options. Then, insert multiple input elements with the type attribute set to radio , giving each a unique id attribute and a common name . Also assign each input a value , and use the checked attribute to pre-select any option that you want. Finally, use the label element with the

for</
###### How to style checkboxes and radios in HTML forms?
By default, checkboxes and radios have a simple appearance that may not match your web design. You can use CSS to style them according to your preferences. For example, you can use the 
<code>
:checked

pseudo-class to change the color or shape of the selected options. You can also use the :hover and :focus pseudo-classes to add some interactivity and feedback to the user. You can also use the ::before and ::after pseudo-elements to create custom icons or labels for the options.

添加您的观点

FALADE Ben A. Basty

Frontend Developer | HTML ? CSS ? JAVASCRIPT ? REACT.JS
(已编辑)
举报内容
Here is an example of how to create radio buttons in HTML form. <form action="/action_page.php" method="post"> <fieldset> <legend>Creating radio buttons:</legend> <input type="radio" id="ps5" name="fav_gaming_device" value="PS5" checked> <label for="ps5">PS5</label><br> <input type="radio" id="nintendo" name="fav_gaming_device" value="Nintendo"> <label for="nintendo">Nintendo</label><br> <input type="radio" id="xbox" name="fav_gaming_device" value="XBOX"> <label for="xbox">XBOX</label> </fieldset> </form> Note that here I put the checked attribute in the first input element.

已翻译

赞

4 How to validate checkboxes and radios in HTML forms?

Sometimes, you may want to ensure that the user selects at least one option from a group of checkboxes or radios. You can use the HTML5 required attribute to make an input type mandatory. However, the required attribute only works for radios, not for checkboxes. To validate checkboxes, you need to use JavaScript or a server-side script to check if any of the options with the same name are checked. You can also use the HTML5 min and max attributes to specify the minimum and maximum number of options that the user can select from a group of checkboxes.

添加您的观点

5 How to access checkboxes and radios in HTML forms?

Once the user submits the form, you can access the selected options from the checkboxes and radios using the name and value attributes. For instance, if you have a group of checkboxes with the name hobbies and the values reading , cooking , and gaming , you can use different syntax to access them. In PHP, you can use either the $_POST or $_GET arrays depending on the method of the form; for example, $_POST['hobbies'] will return an array of the selected values. Whereas in JavaScript, you can use either the document.forms collection or the document.getElementById method to access the form elements; for instance,

document.forms[0].hobbies</
######Here’s what else to consider
This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

HTML

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How do you create multiple-choice and single-choice options in HTML forms?

1

2

3

4

5

1 What are checkboxes and radios?

2 How to create checkboxes in HTML forms?

3 How to create radios in HTML forms?

4 How to validate checkboxes and radios in HTML forms?

5 How to access checkboxes and radios in HTML forms?

HTML

给文章评分

感谢您的反馈

更多HTML相关文章

更多相关阅读内容