form请求导出表格_第二十四天HTML中的form表单

最新推荐文章于 2021-12-13 16:42:08 发布
最新推荐文章于 2021-12-13 16:42:08 发布
阅读量218 收藏
点赞数
文章标签： form请求导出表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35076990/article/details/112246537
版权

form表单

用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中

action：提交地址、动作，与input标签中typy标签的submit属性相关联。 ，提交地址是action的地址

method:提交方法，有get和post两种提交方法。

get方法：提交数据可以再URL中看见，

例如：（1）以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数

（2）URL长度有限制，所以传递的参数数据就有限制

（3）由于数据可以看见，所以不安全

（4）网页默认的请求是get

post方法：　　　

1. 将form data 保存在http的请求体 　　　　　　　

2. 没有长度限制 　　　　　　　　

3. 安全的 　　　　　　　　

4. 往往在开发中用于提交数据form表单提交post 　　　　　　　

5. 文件上传 method = post enctype=multipart/form-data

input标签：输入框，是表单中最重要的部分

name：指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义

value：文本框的内容，一般用在不能输入的类型中，如改变按钮的名字等。

placeholder：占位内容，通常用于提示： 

<input type="text" name="emailId" placeholder="输入账号" />

​

5ab5b9450861d7e590a2d8af22b70394.png

readonly：只读模式，设置后无法修改输入框的内容

disabled：禁用状态　

<input type="text" name="emailId" placeholder="输入账号" disabled="disabled"/>

size：由于输入框是单行的，所以只能设置宽度

maxlength：限制输入框最大输入的字符个数

type属性：

text：普通文本，标签的默认属性时text ，通常如输入用户名用的是text

passworld：密文文本，输入的内容不显示。如密码输入框

submit：提交按钮。上文提到过，要与action一起用。

radio：单选框，多个关联选项name属性要一致，需要设置value，默认选中用checked设置

:用于关联单选按钮与文字。

性别：<input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label>
<input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label><br/>

CheckBox：复选框，属性与单选框类似

爱好：<input type="checkbox" name="like" value="sport" id="1"/><label for="1">运动</label>
            <input type="checkbox" name="like" value="music"id="2"/><label for="2">音乐</label>
            <input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label>
            <input type="checkbox" name="like" value="games" id="5"/><label for="5">游戏</label><br/>

file：文件上传，需要进行配套设置。提交方法需要用post

hidden：隐藏字段，该字段根普通字段一样，但是不会在页面上显示

<input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">

除了输入框外常用的还有下拉选择框和文本域

select：下拉选择框　

属性name需要设置　　　

size：可以设置高度(选项个数)

每个选项都是一个option，必须指定value，默认选中使用属性selected

籍贯：<select name="from">
         <option value="bj">北京</option>
         <option value="sh">上海</option>
         <option value="gz">广州</option>
         <option value="sz">深圳</option>
      </select><br/>

textarea：文本域。

说明：可以输入多行文本

属性：

cols：列数(宽度)

rows：行数(高度)

注意：不要在标签书写任何多余的内容

简介：<textarea name="intro" cols="20" rows="5"></textarea><br/>
            <input type="submit" value="注册"><br/>

例子：

为了对齐方便使用table表格标签来辅助对齐。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body background="timg.jpg">
    <h1>还没有账号？赶紧注册一个吧！</h1>
    <form action="提交表单地址" method="post|get">
        <table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0">
<tr>
    <td align="right" padding="0">电子邮箱：</td>
    <td align="left" padding><input type="text" name="emil" placeholder="请输入："/><br/></td>
</tr>
<tr>
    <td></td>
    <td>您可以使用<a href="#">邮箱</a>或者<a href="#">手机号</a>注册  <br/></td>
</tr>
<tr>
    <td align="right">创建密码：</td>
    <td><input type="password" name="pwd"></td>
</tr>
<tr>
    <td align="right">真实姓名：</td>
    <td><input type="text" name="name" placeholder="请输入："/></td>
</tr>
<tr>
    <td align="right">性别：</td>
    <td><input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label>
                  <input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label></td>
</tr>
<tr>
    <td align="right">生日：</td>
    <td><input type="date" name="date"/><br/></td>
</tr>
<tr>
    <td align="right">我现在：</td>
    <td><input type="radio" name="work" value="school"/>正在上学
                    <input type="radio" name="work" value="worker"/>已经工作
                    <input type="radio" name="work" value="other"/>其他</td>
</tr>
<tr>
    <td align="right"> 现居地：</td>
    <td><input type="text" name="address" placeholder="请输入："/></td>
</tr>
<tr>
    <td></td>
    <td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服务条款</a></td>
</tr>
<tr>
    <td></td>
    <td><input type="submit" value="立即注册"/></td>
</tr>
  </table>
 </form>
Benjamin Jordan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java导入导出全部文件jar包，ajax提交form表单返回提示数据
04-16
在Java开发中，数据的导入导出是一项常见任务，尤其涉及到与前端交互时，如使用Ajax提交form表单。这个场景通常应用于数据处理、报表生成、数据库操作等。本话题将详细探讨Java如何进行文件的导入导出，特别是Excel...
formbuilder表单构建工具_在线表单设计器代码
05-18
"formbuilder表单构建工具_在线表单设计器代码"是一个专为用户提供的便捷、高效的在线表单设计和构建平台。这个工具允许用户无需编程知识，就能通过简单的拖拽操作创建自定义的表单，适用于各种场景，如数据收集、...
前端利用form表单实现导出及下载文件
热门推荐
marendu的博客
04-02 2万+
前端实现导出及下载文件 首先解释下，单靠前端是无法实现，下载功能的，前端只能实现触发下载，下面是2种实现方式 下面用vue的代码示例 一、 利用window.open()和iframe //html <template> <div> <button @click="toDownload"> 导出 </button> <!-- 用于打...
<经验杂谈>前端form提交导出数据
weixin_34194087的博客
09-01 437
之前在做列表的是总会遇到一些导出的功能，而在做导出的时候总是习惯于用get的方法将参数放在url上，这样一来就会有很多的弊端，一是url的参数长度有限，遇到有的参数很长的时候就会报错，二是也不太安全。 按照之前写法： var url = '@Url.Action("")'; window.open(url, "_blank"); 现在改成前端form提交的方式： functi...
php导出excel html 表单,导出html页面的表格到excel
weixin_31290899的博客
03-25 429
/* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */table {border-collapse: collapse;}学生成绩表编号学号姓名性别年龄成绩语文数学英语12016001张三男1385947722016002李四女12968489导出表格// 使用outerHTML属性获取整个table元素的HTML代码(包括标签)，然后包装成一个完整的HTML文档，设置c...
提交搜索表单 html页面表格导出到excel总结
蜗牛天堂
11-03 2690
提交搜索表单 html页面表格导出到excel总结 2008-06-23 – 22:13 最近一个项目需要把报表的表格导入excel，在网上找了一些方法，比较研究了一下，记在这里，备忘。 表格例子如下： table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> tr>
前端技巧——HTML转Excel，并实现打印，下载功能
quyunde的博客
06-11 1万+
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;/head&gt; &lt;body link="blue" vlink="purple"&gt; &lt;
用JS提交参数创建form表单在FireFox中遇到的问题
01-19
在一个前端页面上，需要通过JavaScript来提交参数，使用JS创建form表单，将参数append到表单中进行提交，代码如下： Js代码: 代码如下: functionloadConfig(gameUrl,skinId){ vartemp=document.createElement(“form...
利用AjaxSubmit()方法实现Form提交表单后回调功能
10-18
AjaxSubmit()方法是jQuery Form插件提供的一种功能强大的表单提交方式，它允许我们在异步提交表单时实现前后端交互的回调功能，从而避免页面刷新，提高用户体验。在实际应用中，比如文件上传、表单验证等场景，...
vue_form_design:基于Vue3.0的表单设计器
03-16
6. **代码导出**：生成的表单设计可以被导出为Vue组件代码，方便整合到项目中。 在前端框架方面，Vue.js以其轻量级、高效和易学性深受开发者喜爱。JavaScript和ECMAScript作为Web开发的基础，其新特性如Async/Await...
form请求导出表格_form表单提交方式实现浏览器导出Excel
weixin_39540725的博客
12-20 270
刚开始使用ajax做Excel导出，发现ajax做不了浏览器导出只能下载到本地，于是用form提交可以提供浏览器下载Excel。1>用ajax做本地下载：FileOutputStream fout = new FileOutputStream("C:/student.xls");.write(fout);fout.close();2>用form做浏览器下载：jsp：HTML：js：do...
form表单导出文件流
qq_42928070的博客
12-09 1216
1.使用form导出 function postExcelFile(params, url) { //params是post请求需要的参数，url是请求url地址 var form = document.createElement("form"); form.style.display = 'none'; form.action = url; form.method...
html中导出的post提交方式
麦 -_- 的博客
11-04 324
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <title>导出Excel</title> <script src="../../../ns-fac
excel导出 利用post 或ajax
weixin_45525707的博客
12-13 1514
excel导出 利用post 或ajax
post方式excel导出，下载
旧风年间的博客
03-11 629
原文链接：https://blog.csdn.net/Sunny__wei/article/details/70214103 post请求无法直接发送请求下载excel文档，是因为我们在后台改变了响应头的内容： Content-Type: application/vnd.ms-excel 导致post请求无法识别这种消息头,导致无法直接下载。 解决方法： 改成使用form表单提交方式即可 ...
Demo系列一之 Form表单下载Excel文件
wjt的博客
07-25 4438
先看下效果图:
FormData的基本使用详细教程
鑫仔的博客
05-31 1516
1.FormData介绍 FormData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率, 利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest的send() 方法来异步提交表单。 2.FormData使用 2.1 创建FormData对象 这里有一个前提是需要钱获取fo
用form表单导出文件
yytasty的博客
09-14 1909
背景 最近在做一个后台项目，是关于一些数据的查看和导出的。后端给我个post接口，我照常请求了，返回的data却是一个乱码。所以就想到用表单来做，然后成功了 直接上代码 postExcelFile (params, url) { // 用表单去下载 // 创建表单部分 var form = document.createElement('form') form....
js form表单 导出excel
最新发布
08-10
要在JavaScript中将表单数据导出为Excel文件，可以使用以下步骤： 1. 首先，创建一个包含表单的HTML页面，确保表单中的每个输入字段都有一个唯一的id属性。例如： ```html <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <!-- 其他表单字段 --> <button type="submit">Export to Excel</button> </form> ``` 2. 在JavaScript中，添加一个事件监听器来捕获表单提交事件。在事件处理程序中，阻止表单的默认提交行为，并调用导出Excel函数。例如： ```javascript document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 exportToExcel(); }); ``` 3. 创建导出Excel文件的函数`exportToExcel()`。在该函数中，首先获取表单数据，然后将其转换为Excel格式的数据。最后，创建一个下载链接并自动触发点击以下载Excel文件。以下是一个示例实现： ```javascript function exportToExcel() { // 获取表单数据 var formData = new FormData(document.getElementById('myForm')); // 创建一个新的工作簿 var wb = XLSX.utils.book_new(); // 创建一个新的工作表 var ws = XLSX.utils.json_to_sheet(formDataToObject(formData)); // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1'); // 将工作簿转换为Excel文件的二进制数据 var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 创建一个Blob对象 var blob = new Blob([wbout], { type: 'application/octet-stream' }); // 创建一个下载链接 var downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = 'form_data.xlsx'; // 触发下载链接的点击事件 downloadLink.click(); } // 辅助函数：将FormData转换为对象 function formDataToObject(formData) { var obj = {}; formData.forEach(function(value, key) { obj[key] = value; }); return obj; } ``` 请注意，上述示例使用了一个名为`XLSX`的JavaScript库来处理Excel文件。确保在页面中包含该库的正确脚本引用。 使用上述代码，当用户提交表单时，将自动下载一个名为`form_data.xlsx`的Excel文件，其中包含表单数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值