【前端 04】一文学会HTML表单

最新推荐文章于 2024-07-23 14:51:29 发布

终末圆

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量471

点赞数 12

分类专栏：前端文章标签：前端 html javascript css

本文链接：https://blog.csdn.net/delepaste/article/details/140630719

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在网页设计中，表单（Form）是不可或缺的一部分，它主要负责数据采集功能，如用户注册、登录、信息提交等场景。通过表单，用户可以输入数据，并提交给服务器进行处理。本文将详细介绍HTML中的表单标签及其属性，并通过一个示例来展示表单的多种用法。
英梨梨才不是败犬！

表单标签 `<form>`

<form> 标签是创建表单的容器，它包含了一系列用于收集用户输入的表单项。<form> 标签有两个重要的属性：action 和 method。

action：规定当提交表单时，表单数据应发送到的URL。如果留空，则数据会发送到当前页面。
method：规定用于发送表单数据的方式，主要有两种：GET 和 POST。

GET 与 POST 的区别

GET：表单数据会被追加到URL后面，以?分隔URL和传输数据，多个参数之间以&连接。由于URL长度有限制，因此GET方式提交的数据量有限。此外，GET请求的数据会出现在浏览器地址栏中，可能会泄露敏感信息。
POST：表单数据包含在表单请求体中，不会附加在URL之后。POST方式提交的数据量没有限制，且不会在浏览器地址栏中显示，因此适用于提交敏感信息，如用户密码。

表单项标签

表单中包含了多种表单项标签，用于收集不同类型的用户输入。

<input>：最灵活的表单项标签，通过type属性可以定义多种输入形式，如文本（text）、密码（password）、单选按钮（radio）、复选框（checkbox）、日期（date）、时间（time）、数字（number）、邮箱（email）等。
<select>：定义下拉列表，用户可以从列表中选择一个或多个选项。<option>标签用于定义下拉列表中的选项。
<textarea>：文本域，允许用户输入多行文本。

示例：综合表单

下面是一个包含多种表单项的综合表单示例。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>综合表单示例</title>  
</head>  
<body>  
    <form action="/submit-form" method="post">  
        账号：<input type="text" name="id"><br>  
        密码：<input type="password" name="password"><br>  
        性别：<label><input type="radio" name="sex" value="1"> 男</label>  
             <label><input type="radio" name="sex" value="2"> 女</label><br>  
        爱好：<input type="checkbox" name="hobby" value="java">java  
             <input type="checkbox" name="hobby" value="c++">C++  
             <input type="checkbox" name="hobby" value="python">python<br>  
        日期：<input type="date" name="date"><br>  
        时间：<input type="time" name="time"><br>  
        日期时间：<input type="datetime-local" name="datetime"><br>  
        文件：<input type="file" name="file"><br>  
        数字：<input type="number" name="num"><br>  
        邮箱地址：<input type="email" name="address"><br>  
        隐藏字段：<input type="hidden" name="hidden" value="hidden"><br>  
        学历：<select name="学历">  
                <option value="college">大学</option>  
                <option value="j">初中</option>  
                <option value="s">高中</option>  
            </select><br>  
        描述：<textarea name="描述" cols="30" rows="10"></textarea><br>  
        <input type="button" value="按钮"> <!-- 不提交表单 -->  
        <input type="reset" value="重置"> <!-- 重置表单 -->  
        <input type="submit" value="提交"> <!-- 提交表单 -->  
    </form>  
</body>  
</html>

在这个示例中，我们创建了一个包含多种输入类型的表单，包括文本、密码、单选按钮、复选框、日期、时间、文件上传等。同时，还展示了如何使用<select>标签创建下拉列表，以及如何使用<textarea>标签收集多行文本。此外，还包含了按钮、重置和提交表单的<input>元素。

调试与查看表单提交数据

在开发过程中，了解表单数据是如何被发送和接收的非常重要。这可以通过浏览器的开发者工具来实现，特别是“网络”(Network)面板。

使用开发者工具查看POST数据

当你提交一个使用POST方法的表单时，数据不会显示在URL中，而是作为请求体的一部分发送到服务器。为了查看这些数据，你可以按照以下步骤操作：

打开开发者工具：在大多数现代浏览器中，你可以通过按F12键或右键点击页面元素选择“检查”来打开开发者工具。
切换到网络面板：在开发者工具中，找到“网络”(Network)标签页并点击它。这将显示所有网络请求的列表。
提交表单：在浏览器中提交你的表单。
查找表单提交请求：在“网络”面板中，找到与表单提交相对应的请求。这通常是一个POST请求，其URL与表单的action属性相匹配（如果action为空，则可能是当前页面的URL）。
查看请求体：点击该请求，然后在请求详情中找到“负载”(Payload)或“表单数据”(Form Data)部分。这里将显示以键值对形式组织的表单数据。

调试表单

如果你发现表单没有按预期工作，比如数据没有发送到服务器或某些字段丢失，你可以使用开发者工具进行调试：

检查HTML代码：确保所有表单项都正确嵌套在<form>标签内，并且每个输入项都有正确的name属性（因为name属性用于在提交时标识字段）。
验证JavaScript：如果你的表单使用了JavaScript来增强功能（如表单验证），请确保没有JavaScript错误阻止表单提交。你可以在开发者工具的“控制台”(Console)标签页中查看JavaScript错误。
服务器日志：查看服务器日志可以提供有关表单数据是否到达服务器的线索。如果数据没有到达，可能是网络问题或服务器配置问题。
使用Postman等工具：对于更复杂的调试，你可以使用Postman之类的API开发工具来模拟表单提交，并查看请求和响应的详细信息。

结论

表单是网页中用于数据采集的关键组件。通过了解<form>标签及其属性，以及表单项的不同类型，你可以创建功能丰富且用户友好的表单。同时，利用浏览器的开发者工具进行调试和查看表单提交数据，可以帮助你确保表单按预期工作。希望这篇博客对你有所帮助，让你在开发表单时更加得心应手。

终末圆

关注

12
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
【前端 04】一文学会HTML表单

在网页设计中，表单（Form）是不可或缺的一部分，它主要负责数据采集功能，如用户注册、登录、信息提交等场景。通过表单，用户可以输入数据，并提交给服务器进行处理。本文将详细介绍HTML中的表单标签及其属性，并通过一个示例来展示表单的多种用法。
复制链接

扫一扫