Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html5: Significance of attribute named required in checkbox/radio

On form submission, how could you possibly mark a checkbox/radiobutton as required?

Source of inspiration: Pekka's answer to a question

like image 291
naveen Avatar asked Feb 04 '11 18:02

naveen


People also ask

What is the use of the required attribute in html5?

The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

What is the purpose of the attribute checked for radio buttons and checkboxes?

The purpose of the HTML checked attribute is to define whether a checkbox or a radio button is checked (i.e. selected). HTML checked attribute supports input element.

Is required attribute can be set on button in html5?

If you put required on a radio button, one radio button of the same named group of radio buttons will be required, though not necessarily the one with the required attribute on it. On checkboxes, each individual checkbox with the required attribute is required, and must be checked.

What is the use of value attribute in radio button?

The value attribute is a string containing the radio button's value. The value is never shown to the user by their user agent. Instead, it's used to identify which radio button in a group is selected.


1 Answers

Required checkboxes are not unusual. Practically every registration form uses some form of the "I have read and accept the User Agreement" checkbox.

If you have Opera handy try out the code below. The form won't submit unless the checkbox is checked.

<!doctype html>
<html>

<head>
  <title>html5</title>
</head>

<body>
  <h1>html5 test</h1>
  <form action="/">
    <input type="checkbox" required="required" id="cb" name="cb">
    <label for="cb">required checkbox</label>
    <input type="submit">
  </form>
</body>

</html>
like image 71
Emily Avatar answered Oct 12 '22 23:10

Emily