html如何制作表单

HTML表单是网页中用于收集用户输入的一种重要元素，它们可以用于各种目的，如注册、登录、搜索等，在HTML中，表单是由<form>标签定义的，它包含了一系列的输入控件，如文本框、密码框、单选按钮、复选框等，这些输入控件可以通过<input>标签来创建，下面是一个简单的HTML表单制作教程。

（图片来源网络，侵删）

1、创建一个HTML文件

你需要创建一个HTML文件，可以使用任何文本编辑器，如Notepad++、Sublime Text等，将以下代码复制到一个名为index.html的文件中：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <title>表单示例</title>
</head>
<body>
</body>
</html>

2、添加表单标签

接下来，在<body>标签内添加一个<form>标签，这个标签用于包裹表单的所有内容，将以下代码添加到<body>标签内：

<form action="submit_form.php" method="post">

这里，action属性指定了当用户提交表单时，数据将被发送到哪个页面进行处理，在这个例子中，我们将数据发送到名为submit_form.php的文件。method属性指定了数据发送的方式，这里我们使用post方法，因为它可以更安全地传输敏感信息。

3、添加输入控件

现在，我们可以开始添加输入控件了，添加一个用户名和密码输入框，将以下代码添加到<form>标签内：

<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>

这里，我们使用了<label>标签来为输入控件添加描述性文本。for属性与<input>标签的id属性相对应，这样当用户点击描述性文本时，光标会跳转到相应的输入框。type属性指定了输入控件的类型，这里我们使用text类型表示文本框，使用password类型表示密码框。id和name属性分别指定了输入控件的唯一标识符和名称，我们使用了required属性来表示这两个输入框是必填项。

4、添加其他输入控件

接下来，我们可以添加一些其他类型的输入控件，如单选按钮、复选框等，将以下代码添加到<form>标签内：

<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<br>
<label><input type="checkbox" name="interests" value="reading"> 阅读</label>
<label><input type="checkbox" name="interests" value="traveling"> 旅行</label>
<label><input type="checkbox" name="interests" value="music"> 音乐</label>

这里，我们使用了<input>标签的type属性来创建不同类型的输入控件，对于单选按钮，我们使用了radio类型；对于复选框，我们使用了checkbox类型，注意，对于同一组的单选按钮或复选框，它们的name属性必须相同，这样，用户只能选择一个单选按钮或选中一个复选框，我们为每个输入控件添加了一个描述性文本。

5、添加提交按钮

我们需要添加一个提交按钮，以便用户可以提交表单，将以下代码添加到<form>标签内：

<input type="submit" value="提交">

这里，我们使用了type="submit"属性来创建一个提交按钮，用户点击这个按钮后，表单中的数据将被发送到指定的处理页面，我们还为按钮添加了一个描述性文本。

6、保存并预览表单

现在，你可以保存并预览你的HTML表单了，在浏览器中打开index.html文件，你应该可以看到一个简单的表单，填写表单并点击提交按钮，你将被重定向到指定的处理页面（在这个例子中是submit_form.php），如果没有自动重定向，请检查你的浏览器设置或查看源代码以确认表单数据是否已正确发送。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/448213.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。