<form> 标签的元素

htmlweb developmentfront end technology更新于 2025/4/20 7:40:17

用户输入通过表单收集。表单可用于多种用途,包括网站注册、登录、创建个人资料等。表单可以收集各种不同类型的信息。后端管理表单数据。我们可以使用各种表单元素,例如文本字段、文本区域、下拉列表、选择框、单选按钮等。

语法

以下是 HTML 中 <form> 标签的语法

<form action="" method="">
    // 根据用户需求使用不同的表单元素
</form>

让我们深入研究本文,了解更多关于 <form> 标签中不同类型的元素的信息。我们可以找到很多 HTML 表单元素,让我们来讨论其中几个。

HTML <input> 元素

HTML 中的基础表单元素是 <input> 元素。它用于构建表单字段并收集用户输入。我们可以使用多个输入字段来获取用户的各种信息。

语法

以下是 HTML <input> 元素的语法

<form>
   <input type=" …. " name="….">
</form>

示例

下面是我们将使用 <input> 元素并创建用户输入字段的示例。

<!DOCTYPE html>
<html>
<body style="background-color:#D2B4DE;">
   <form style="text-align:center;"> Enter E-Mail: <input type="text" name="e-mail">
   </form>
</body>
</html>

运行上述程序后,将弹出输出窗口,显示用户输入字段,供用户在网页上输入内容。

HTML <label> 元素

它用于指定我们定义的字段的标签。当用户努力将注意力集中在输入元素上时,它会很有帮助。如果标签元素的"for"属性等于输入元素的"id"属性,则我们将 <label> 元素与输入元素一起使用。

语法

以下是 HTML <label> 元素的语法

<form>
<label>……</label>
</form>

示例

在下面的示例中,我们将创建简单的登录表单。

<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
   <form>
      <label for="uname">UserName: </label>
      <input type="text" id="uname" name="uname">
      <br/>
      <label for="password">Password: </label>
      <input type="password" id="password" name="password">
   </form>
</body>
</html>

执行上述代码后,将生成一个输出,其中包含在网页上显示的简单网页。

HTML <select> 元素

该元素用于创建下拉菜单。用户可以根据需要选择任意数量的选项。当我们使用此元素构建下拉列表时,该属性的行为可以根据情况进行更改。让我们来看看这些属性。

  • multiple − 此功能允许用户从一个或多个选项中进行选择。根据此特定属性,我们可以将其与单选按钮和复选框进行比较。

  • size − 此属性用于显示列表中值的数量。例如,列表中的选项超过四个。因此,使用 size 属性可以使选项可见。

语法

以下是 HTML <select> 元素的语法

<form>
   <select>
      <option>…</option>
   </select>
</form>

示例

考虑以下示例,我们将使用不带属性的 <select> 元素

<!DOCTYPE html>
<html>
<body>
   <form style="text-align:center;"> Choose The Car: 
      <select>
         <option>RS7</option>
         <option>AUDI</option>
         <option>BMW</option>
      </select>
   </form>
</body>
</html>

运行上述程序后,将弹出输出窗口,显示下拉列表并允许用户选择下拉列表中可用的选项。

示例

在下面的示例中,我们将使用带有 multiple 属性的 <select> 元素。

<!DOCTYPE html>
<html>
<body>
   <h2 style="text-align:center;"> Choose The Best Cars</h2>
   <form style="text-align:center;">
      <select id="car" name="car" multiple>
         <option>CIAZ</option>
         <option>CRUZE</option>
         <option>SAIL</option>
         <option>I20</option>
      </select>
   </form>
</body>
</html>

执行上述代码后,将生成包含下拉列表的输出,允许用户从下拉列表中选择多个选项。

HTML <button> 元素

这样做是为了提供一个可点击的按钮。它有一个属性,即"type"属性。此属性用于根据具体情况提供将在页面上使用的按钮。按钮在各个浏览器中的默认样式可能会有所不同。

语法

以下是 HTML <button> 元素的语法

<form>
<button>….</button>
</form>

示例

以下示例我们将使用 <button> 元素在网页上创建一个可点击的按钮。

<!DOCTYPE html>
<html>
<body>
   <h2 style="color:#6C3483;">Clickable Button</h2>
   <button type="submit">Click</button>
</body>
</html>

运行上述代码后,将弹出输出窗口,显示网页上的点击按钮。


相关文章


有用资源