HTML 表单是网页中常用的一种交互式元素，它允许用户输入数据并将其发送到服务器，在 HTML 中，可以使用多种标签来创建表单，包括 <form>、<input>、<textarea>、<button> 等，下面将详细介绍如何使用这些标签来创建一个简单的表单。
1. 使用 <form> 标签创建表单
<form> 标签用于定义整个表单，它可以包含多个表单元素，如输入框、下拉列表、单选按钮等，当用户填写完表单并点击提交按钮时，表单数据将被发送到服务器。
<!DOCTYPE html>
<html>
<head>
<title>简单表单示例</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在上面的代码中，action 属性指定了表单数据提交到的 URL,method 属性指定了数据的传输方式(POST)。required 属性表示该字段为必填项。
2. 使用 <input> 标签创建输入框
<input> 标签用于创建各种类型的输入框，如文本框、数字框、复选框等，根据需要，可以将 <input> 标签与不同的类型和属性结合使用。
type="text":创建文本输入框。
type="number":创建数字输入框。
type="email":创建电子邮件输入框。
type="password":创建密码输入框，输入的内容会以星号或圆点显示。
type="checkbox":创建复选框。
type="radio":创建单选按钮。
type="submit":创建提交按钮。
type="reset":创建重置按钮，用于清空表单中的所有字段。
required:表示该字段为必填项。
disabled:禁用该输入框。
readonly:只读模式，用户无法修改该输入框的内容。
placeholder:在输入框中显示提示信息。
以下代码创建了一个文本输入框和一个密码输入框：
<label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="pwd">密码：</label> <input type="password" id="pwd" name="pwd"><br><br>
3. 使用 <textarea> 标签创建多行文本输入框
<textarea> 标签用于创建多行文本输入框，通常用于编辑长篇文本内容，与 <input> 标签类似，也可以设置不同的类型和属性。
以下代码创建了一个多行文本输入框：
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/264591.html
微信扫一扫 