HTML 必需属性
- 王林原创
- 2024-09-04 16:17:57839浏览
它可以表示为布尔属性，有时称为必填项或开发人员友好的必填字段。它应该由任何形式的控件标记，以具有在网页上提交任何表单之前不应保留为空的值。要使字段成为必填字段，请在输入字段的末尾添加属性。客户将收到弹出警报，提示应填写必填字段；同时，它是 HTML5 的新功能，可以很好地处理复选框、单选按钮、文本等输入字段，这可能有助于前端验证。
本文介绍了所需属性的基本概念，并提供了在 Chrome 6、Firefox 和 Opera 等浏览器中启动和使用的简单示例，每个浏览器都有不同的默认行为。说起来，属性是一个特殊的词，它为 HTML 中的任何元素提供功能。与 HTML5 一样，所需的属性作为 UI 助手可见。当用户提交表单时，无论请求是否包含数据，服务器都会验证请求。
语法
语法如下所示，您可以做的一个小小的更改是在表单中使用关键字“Attribute”创建文本输入字段。在提交表格之前，必须填写必填字段。为此，需要给出“必需”属性。
一般语法：此处使用的可能值要么为空，要么为必填。
<element required>
输入元素的语法：
< input type =" " required>
文本区域的语法：
<text area rows =" " cols = " " name =" " required> < /text area>
选择区域的语法：
<select name =" "required> <option value > </option> </select>
什么是 HTML 必需属性？
您知道 HTML5 具有可以表示为 true 或 false 值的属性吗？让我进一步解释一下。它们允许我们执行以下操作：
- 请确保在提交表格之前填写所有字段，以避免出现任何问题。
- 在任何未选中的字段上，提供通知消息。
Html required 属性应用于下面列出的最常用的三个元素：它们是
- : 该属性在 中指定。元素。此字段包括电子邮件、文本、广播、复选框和 URL 等输入类型。
-
: 此元素显示固定宽度大小的无限字符。文本区域由编号决定。
的和，同时显示。使用 CSS 进行设计时，应利用高度和宽度属性来指定对象的大小。 HTML5 文本区域具有自动对焦、占位符、表单、最大长度、必填和换行等属性。 - Html select 元素提示用户通过添加一个带有空值的简单模式“required”从列表中进行选择。
HTML 必需属性示例
让我们尝试 HTML 代码来了解 HTML 中的必需属性。首先，我们将使用 属性。
1. 属性：必填字段
将“required”属性添加到输入元素中以将字段标记为简单。当用户填写并提交所有必填字段时，网络浏览器将根据需要运行。让我们看看是否在适当的地方添加必需的属性。
示例#1
代码：
<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>
输出：
示例#2
我们将专注于检测何时有人未选中单选按钮。
代码：
<!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>
输出：
2. 属性
这个布尔属性指定文本区域元素在提交之前永远不应该离开，并且还指定多行输入控制。下面的示例说明了在表单之外使用此属性。
代码：
<!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>
输出：
即使在上面的示例中，我们也可以使用最小和最大长度属性来指定它。
3. 属性
下面的示例演示了带有
示例#1
代码：
<!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>
输出：
