Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
Syntax
What is the HTML Required Attribute?
Examples of HTML Required Attribute
1. <input> Attribute: Required Field
Example #2
2. <Text Area> Attribute
3. <select > Attribute
Conclusion
Home Web Front-end HTML Tutorial HTML Required Attribute

HTML Required Attribute

王林
王林
Sep 04, 2024 pm 04:17 PM
html html5 HTML Tutorial HTML Properties HTML tags

It can be stated as the Boolean attribute, sometimes termed compulsory or mandatory fields with developers-friendly. It should be marked by any form of control to have a value that shouldn’t be kept blank before any form is submitted on a webpage. To make a field required, add the attribute at the end of the input field. The clients would be notified by a popup alert saying the required field should be filled; meanwhile, it’s new to HTML5 and works well with input fields like checkbox, radio buttons, texts, etc., which probably helps in front-end validation.

This article covers basic concepts on required attributes with simple examples to start and get work in browsers like Chrome 6, Firefox, and Opera, and each has a different default behavior. Speaking, attributes, being a special word, provides functionality to any element in the HTML. As with HTML5, the required attributes are visible as a UI helper. When a user submits a form, the server will validate the request regardless of whether it contains data or not.

Syntax

The syntax is given below, and a slight change you can make is to make the text input field with the keyword ‘Attribute ‘in the forms. Before submitting a form, a mandatory field must be filled out. To do so, ‘required’ attributes are given.

General Syntax: The possible values used here are either null or required.

<element required>
Copy after login

 The syntax for the Input element:

< input type =" " required>
Copy after login

Syntax for Text area: 

<text area rows ="   " cols = " " name =" " required> < /text area>
Copy after login

The syntax for Select Area:

<select name =" "required>
<option value >
</option> </select>
Copy after login

What is the HTML Required Attribute?

Did you know that HTML5 has attributes that can be represented as true or false values? Let me explain this further. They permit us to do the following:

  • Please ensure you fill out all the fields before submitting the form to avoid any issues.
  • On any unchecked field, provide a notification message.

The Html required attribute is applied to the most frequently used three elements listed below: They are

  1. : This attribute is specified in elements. This field includes input types like email, text, radio, checkboxes, and URLs.
  2. : This element displays unlimited characters with fixed-width sizes. And the text area is determined by the no. of and , which are displayed simultaneously. When designing with CSS, you should utilize the height and width properties to specify the size of an object. HTML5 text area has attributes like autofocus, placeholder, form, max length, required, and wrap.
  3. attribute.

    1. Attribute: Required Field

    Add the “required “attribute into the input element to mark a field as simple. The web browser functions as needed when the user completes and submits all necessary fields. Let’s see if adding the required attribute wherever it is appropriate.

    Example #1

    Code:

    <html>
<head>
<h3>
Implementation of required attribute using input element
</h3>
<style>
div
{
padding: 12px 1;
}
</style>
<head>
<body>
<form>
<div>
<label> Full Name</label>
<input type="text" placeholder="Enter Full Name" name="name" required>
</div>
<div>
<label> E-id </label>
<input type="email" placeholder="Enter E-ID" name="email" required>
</div>
<div>
<label> Location </label>
<input type="text" placeholder="Enter the Location." name="Loc" required>
</div>
<div>
<label>Password Pin</label>
<input type="password" placeholder="Enter PIN Password" name="pwd" required>
<br>
</div>
<button type="submit" VALUE="SUBMIT"> Login </button>
</form>
</body>
</html>
    Copy after login

    Output:

    HTML Required Attribute

    Example #2

    We will focus on detecting when someone leaves a radio button unchecked.

    Code:

    <!DOCTYPE html>
<html>
<head>
<h2>
Required Attribute
<h2>
<style>
h1,
h2 {
color: Orange;
font-style: Verdina;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>EDUCBA Tutorial</h1>
<h2>
HTML required Attribute with Input
</h2>
<form action="">
<label for="name"> Full Name (5 to 9 characters): </label>
<input type="text" id="name" name=" Full name" required
minlength="5" maxlength="9" size="14">
Mandatory:
<input type="radio"
name="radiocheck"
required>
<br>
<input type="submit">
</form>
</body>
</html>
    Copy after login

    Output:

    HTML Required Attribute

    2. Attribute

    This Boolean attribute specifies that the text area element should never leave alone before submitting and also specifies multi-line input control. The below example illustrates the use of this attribute outside the form.

    Code:

    <!DOCTYPE>
<html>
<head>
<title>Required Attribute implementation</title>
<style>
h1
{
color: brown;
font-style: Arial;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1> Text Area Required Attribute</h1>
<form action="updates.jsp" id="user idform">
E-mail id: <input type="text" name="username">
<input type="submit">
</form>
<br>
<textarea rows="10" cols="60" name="comment" form="user idform">
Enter text here... </textarea>
    Copy after login

    Output:

    HTML Required Attribute

    Even in the above example, we can specify it using the min and max length attributes.

    3. usage. It allows a browser to select from the form control and submit.

    Example #1

    Code:

    <!DOCTYPE html>
<html>
<body>
<form action="/act_page.php">
<select required>
<option value="">Select</option>
<option value="Air India">Hadoop</option>
<option value="Emirates"> R programming</option>
<option value="Doha">PHP</option>
<option value="Spice Jet"> Java</option>
</select>
<input type="submit">
</form>
</body>
</html>
    Copy after login

    Output:

    HTML Required Attribute

    Note: Also, check their working without attempting the selection option in the