李涛自留地
回到顶部
首页 > 前端 > Html中Form表单enctype属性有哪些？Form表单enctype的作用

Html中Form表单enctype属性有哪些？Form表单enctype的作用

文章目录

Html中的Form表单是前端与后端编程语言在页面数据传输中，起着十分重要的作用，所以学习后form表单的相关语法对于前端和后端人员都十分的重要，而Form表单中的enctype属性就是一项很重要的前后端交互的属性，那么在Html中Form表单enctype属性有哪些？Form表单中enctype又有哪些作用呢？下面通过

一、Html中Form表单enctype的作用

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。

二、Html中Form表单enctype属性使用及语法？

1、Form表单enctype语法

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadfile">
    <button type="submit">上传</button>
</form>

2、Html中Form表单enctype属性使用注意事项

enctype是Form表单中的一个组成参数，但并不是Form表单的必须参数，当我们需要的时候就可以在我们的Form表单中添加enctype属性。而在我们需要设置enctype属性的时候，只能在Form表单的数据传输方式method="post"的时候才使用 enctype 属性。

三、Html中Form表单enctype属性值及作用？

值 作用
application/x-www-form-urlencoded 在发送前编码所有字符（默认属性值）。这是标准的编码格式。
multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

将enctype属性设置为enctype="multipart/form-data"，是Html文件上传必设置的属性。

四、使用Form表单enctype属性制作一个上传文件的Html页面Demo

<!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>Form表单enctype属性制作一个上传文件的Html页面</title>
    <style>
        *{margin:0;padding: 0;box-sizing: border-box;}
        body{font-family: Arial, Helvetica, sans-serif;font-size: 16px;background-color: #f8f8f8;color: #666;}
        .header{height: 80px;margin-bottom: 20px;background-color:#9c3;color:#fff;text-align: center;}
        .container{width: 1024px;margin:0 auto;}
        .content{width: 300px;height: 200px;margin: 0 auto;border: 1px solid #333;}
        .content .form{display: flex;flex-flow: column;height:100%;padding:30px;align-content:space-between;justify-content: space-around;text-align: center;}
    .content .form p,.content .form input ,.content .form button{height: 32px;max-width: 100%;}
    </style>
</head>
<body>
    <header class="header">
        网站头部区域
    </header> 
    <main class="contaier">
        <div class="content">
            <form class="form" action="" enctype="multipart/form-data" method="post">
                <p><strong>文件上传</strong></p>
                <input type="file" name="upload">
                <button type="submit">上传</button>
            </form>
        </div>
    </main>
</body>
</html>
Html中Form表单enctype属性有哪些？Form表单enctype的作用

当我们选择点击上图中的选择文件就会弹出选择文件的选项框了。

以上就是李涛自留地记载和分享的有关Html中Form表单enctype的作用、enctype语法、enctype属性值及作用以及使用Form表单enctype属性制作一个上传文件的Demo。

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