社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
语法
什么是 HTML 必需属性？
HTML 必需属性示例
1. 属性：必填字段
示例#1
3. 属性
Example #2
Conclusion
首页 web前端 html教程 HTML 必需属性

HTML 必需属性

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

它可以表示为布尔属性，有时称为必填项或开发人员友好的必填字段。它应该由任何形式的控件标记，以具有在网页上提交任何表单之前不应保留为空的值。要使字段成为必填字段，请在输入字段的末尾添加属性。客户将收到弹出警报，提示应填写必填字段；同时，它是 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 属性应用于下面列出的最常用的三个元素：它们是

  1. : 该属性在 中指定。元素。此字段包括电子邮件、文本、广播、复选框和 URL 等输入类型。
  2. : 此元素显示固定宽度大小的无限字符。文本区域由编号决定。 的和，同时显示。使用 CSS 进行设计时，应利用高度和宽度属性来指定对象的大小。 HTML5 文本区域具有自动对焦、占位符、表单、最大长度、必填和换行等属性。
  3. 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>
登录后复制

输出：

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>
登录后复制

输出：

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>
登录后复制

输出：

HTML 必需属性

即使在上面的示例中，我们也可以使用最小和最大长度属性来指定它。

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>
登录后复制

输出：

HTML 必需属性

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