<form> 标签的元素
用户输入通过表单收集。表单可用于多种用途,包括网站注册、登录、创建个人资料等。表单可以收集各种不同类型的信息。后端管理表单数据。我们可以使用各种表单元素,例如文本字段、文本区域、下拉列表、选择框、单选按钮等。
语法
以下是 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>
运行上述代码后,将弹出输出窗口,显示网页上的点击按钮。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/

