Required Attribute
The Required Attribute tells the browser to only submit the form if the field is filled out correctly. If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element and show the specified message.
It is a Boolean attribute, and only needs to be specified on an element. The following are three methods for including boolean attributes:
<input required> only using the name of the boolean attribute<input required=""> setting its value to be an empty quoted value<input required="required"> using the attribute name as the value
When the user hovers the mouse over a required field, they notice a tooltip describing that it is a required field.
Note : This attribute can be set on text, URL, email, select, checkbox, or radio button controls, and on textarea and select elements.
The required
You can style the required element using a stylesheet, as in the following:
input: required
{
background-color: orange;
}
input: focus:invalid
{
background-color: red;
}
input: focus: valid
{
background-color: green;
}
You can change the required message using the setCustomValidity() JavaScript function:
var name = document.getElementById("name");
name.setCustomValidity("CUTOM ERROR MESSAGE");
Syntax
<input type="text" id="given-name" name="given-name" required>
Browser Support
The Required Attribute is supported in all major browsers, such as Firefox, Opera, Chrome and Internet Explorer except Safari.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Required Attribute</title>
</head>
<body>
<h3>HTML5 Required Attribute</h3>
<form action="demo_form.asp">
Firstname:
<input type="text" name="fname" required><br>
Lastname:
<input type="text" id="name" name="lname" required aria-required="true"><br>
Email:
<input type="email" id="email" name="email" required><br>
Repeat Email:
<input type="email" id="email_repeat" name="email_repeat" required><br>
<input type="submit">
</form>
</body>
</html>
Output
![required.jpg]()
Step Attribute
The Step attribute defines the allowed interval between values. It can possibly control the size of each step for elements that accepts a number or date input.
For example, if min is set to "0" and step is set to "1", then only the values 0, 1, 2, 3, and so on are allowed.
The step attribute can be used together with the max and min attributes to create a range of legal values.
NOTE: The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
Syntax
<input type="number" step="3">
Browser Support
The Required Attribute is supported in all major browsers, such as Opera, Chrome and Internet Explorer except Firefox and Safari.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Step Attribute</title>
</head>
<body>
<h3>HTML5 Step Attribute</h3>
<form action="form.asp">
Points:
<input type="number" name="points" step="3"><br>
Even Number:
<input type="number" min="0" max="10" step="2" /><br>
<input type="submit">
</form>
</body>
</html>
Output
![step.jpg]()