Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Use the "required" Attribute on the <select> Element in HTML5
The HTML select element represents a control that displays a menu of options. It is used to make drop-down menus so users can choose the value they want. It is a useful feature for gathering data to be sent to a server. The <select> tag is typically used within a form element, with the items to be chosen coded within another tag, <option>. It can also be used as a stand-alone element that is associated with a form via one of its special attributes, <form>.
The <select> tag in HTML is associated with numerous attributes. They are discussed below.
name: The name must be attached to every form control because it is used to refer to the data after it is submitted to the server.
multiple: The user can select multiple options from the dropdown menu using this attribute.
required: This is frequently used for validation. It prevents the form from submitting unless the user selects at least one option from the dropdown.
disabled: This attribute prevents the user from interacting with the options.
size: The size attribute, expressed in numbers, specifies how many options will be visible at any given time.
autofocus: This attribute is applied to all form inputs, including select, to indicate that the input should be in focus when the page loads.
Example
Here is an example showing the default behavior of the <select> tag when it is used without any particular attributes.
<!DOCTYPE html>
<html>
<head>
<title>Default behavior of select tag</title>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select>
<option value="">choose from the list below</option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<br><br>
<button onclick="acknowledge()">Submit</button>
</form>
<script>
function acknowledge(){
alert("The form has been submitted successfully.")
}
</script>
</body>
</html>
In the above example, the user can submit the form even without selecting an option from the dropdown menu. In order to prevent this, required attribute of the select tag is necessary. In this article we will discuss the ways in which we can use the ‘required’ attribute on the select element in HTML.
Using the ‘required’ Attribute
The "required" attribute indicates that the element is required for form submission. If we do not select a value from the drop-down and try to submit the form, it will not submit and a warning will appear on the web page. HTML5 introduced the required attribute.
It can be written as follows:
<select required="required"> <select required='required'> <select required=required> <select required=""> <select required=''> <select required>
There are some prerequisites for using the "required" attribute with the <select> element:
At least one child element must be present in the select element.
The first child element must contain an empty value attribute. OR
The first child element must not contain any text.
The examples below demonstrate the usage of the required attribute with the select element. When the user tries to submit the form without selecting an option from the dropdown list, a warning message is displayed and the form is not submitted.
Example
In this example we will create a select element with the first child having an empty value attribute and then apply the required attribute to it.
<!DOCTYPE html>
<html>
<head>
<title>
How to Use the "required" Attribute on the <select> Element in HTML5?
</title>
<style>
form{
background-color:wheat;
color:darkslategray;
font-size:20px;
font-weight:bold;
margin:25px;
padding:10px;
width:300px;
}
#btn1{
background-color:sienna;
border:none;
height:30px;
width:60px;
color:white;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select required>
<option value="">choose from the list below</option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<input type="Submit" id=btn1>
</form>
</body>
</html>
Example
In this example we will create a select element with the first child having no content and then apply the required attribute to it.
<!DOCTYPE html>
<html>
<head>
<title>
How to Use the "required" Attribute on the <select> Element in HTML5?
</title>
<style>
form{
background-color:wheat;
color:darkslategray;
font-size:20px;
font-weight:bold;
margin:45px;
padding:10px;
width:300px;
}
#btn1{
background-color:sienna;
border:none;
height:30px;
width:60px;
color:white;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select required>
<option></option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<input type="Submit" id=btn1>
</form>
</body>
</html>
124 Views
