李涛自留地
回到顶部
首页 > 前端 > Html表单是什么？Html表单的用法解析

Html表单是什么？Html表单的用法解析

文章目录

Html表单是什么？Html表单就是在Html标记语言中出现的Form标签里的代码，通常form表单就是用来收集不同用户输入的各种类型的数据信息，像在昨天记载的Html文本框里面的Html文本框就是属于Html的Form表单的一部分。使用Html的Form表单，可以把前端中用户输入的数据有效和后端进行交互。下面记载的是关于Html表单的一些基础知识点，以及Html表单的用法等一些关于Html表单的一些知识点。

下面是我用Html表单简单制作了一个用户登录页面截图：

Html表单是什么？Html表单的用法解析

下面是本次制作用户登录所写的一个简单的Html表单代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表单生成</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .login {
            width: 300px;
            height: auto;
            margin: 100px auto;
            border: 1px solid red;
        }

        .login p {
            margin: 15px;
            height: 30px;
        }

        .login p:nth-child(1) {
            text-align: center;
            color: blue;
            font-weight: 600;
        }

        .login p:nth-child(4) input {
            width: 100%;
        }
    </style>
</head>

<body>
    <form class="login" action="panduan.php" method="post">
        <p>用户登录</p>
        <p>用户名：<input type="text" name="username" placeholder="请输入您的用户名"></p>
        <p>密码：<input type="password" name="password" placeholder="请输入您的密码"><br></p>
        <p><input type="submit" value="登录"><br></p>
    </form>
</body>

</html>

简单的写一下css样式，直接用的内链样式写在了这个Html页面中。

Html表单Form标签的内置属性表及常用属性

属性 描述
action 规定向何处提交表单的地址（URL）（提交页面）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称。
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
enctype 规定被提交数据的编码（默认：url-encoded）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

以上就是Html表单Form标签的内置属性，个人感觉前3个属性比较重要使用的也比较多和频繁。

1、Html表单Form标签action属性

是指向哪个文件提交用户所输入的各类型的数据，如果未填写action地址，用户填写完各项数据的话就会仍然停留在本页面，所以为了让前端中用户的数据能够被后端所接受和验证，这个地方一定要填写对于的后端验证表单的页面。

2、Html表单Form标签method属性

Html表单Form标签method属性是用户在向后端提交表单时所用的http方法，常用的方法有get和post方法，get是method的默认方法，get方法提交的时候会在浏览器的url地址栏中显示出用户提交的各类数据信息，get方法相对于post方法来说还是不太好，不安全，所以这个地方用post方法更加安全可靠，post方法不会把用户提交的信息展示在浏览器的Url地址栏中。

以上简单也算是基本上解释清除了最主要的Html表单Form标签的两个内置属性。

Html表单Form标签内常用的其他标签表格

其实在前两天的博文中就用到了Html表单中的input和textarea关于文本框的两个标签，下面记载的是一些常用的Html表单Form标签内的其他标签。

标签 描述
input 定义输入域，可以理解为单行文本框
textarea 定义文本域 (一个多行的输入控件文本框)
label 定义了input元素的标签，一般为输入标题
select 定义了下拉选项列表
option 定义下拉列表中的选项
button 定义一个点击按钮
optgroup 定义选项组
fieldset 定义了一组相关的表单元素，并使用外框包含起来
legend 定义了fieldset元素的标题
datalist Html5新属性，指定一个预先定义的输入控件选项列表。
keygen Html5新属性，定义了表单的密钥对生成器字段。
output Html5新属性，定义一个计算结果。

以上就是Html表单Form标签中常用的一些其他标签。而在近期的博文中我也使用到了input、

textarea、select、option、button标签。

Html表单的用法

Html表单的用法总的来说就是在Form标签下，根据自己所需要实现的功能来选用适合功能的各种标签，以此来实现需要展现出来的效果。

1、举个栗子

比如说需要做一个搜索的效果，那么就需要在Form标签内指定后端处理接受前端用户的搜索数据的页面，method指定为post，然后在Form标签内需要使用到input标签和button标签，让用户输入要搜索的内容并点击提交给后端。

2、Html表单中可以嵌套的代码

Html表单中可以嵌套哪些代码？在Html表单中可以嵌套很多Html代码，比如说为了让页面看上去更加的美观，可以在Form表单中写入一些Div，然后再加上Css样式对页面进行美观处理等等。

Html表单用处有哪些？

关于Html表单用处有哪些？其实在这几天的文章中也分析了一部分，常用的网站前端页面有：搜索框、用户注册页面、用户登录页面、用户留言框、用户留言簿等功能，都会用到Html表单进行制作，可能还有一些地方也用到了Html表单功能，可能自己暂时还未发现和使用到。

以上就是今天对于Html表单知识及Html表单用法的一点点总结和对Html表单知识的记载和分享。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。