表单form的三种方式(demo-form实例)

 

第一种:使用type=submit  可以直接提交
 
  1. <html>

  2. <head>

  3. <title>submit直接提交</title>

  4. </head>

  5.  
  6. <body>

  7. <!-- 表单的提交方式一 -->

  8. <form method="get">

  9. username: <input type="text" name="username"/>

  10. <br/>

  11. password: <input type="password" name="password"/>

  12. <br/>

  13. <input type="submit" value="提交"/>

  14. </form>

  15.  
  16. </body>

  17. <script type="text/javascript">

  18.  
  19. </script>

  20. </html>

第二种:使用type=button提交   需要得到表单的控件 使用表单空间调用自己的submit()方法
 
  1. <pre name="code" class="html"><html>

  2. <head>

  3. <title>button提交</title>

  4. </head>

  5.  
  6. <body>

  7. <!-- 表单的提交方式二 -->

  8. <form id="form01" method="get">

  9. username: <input type="text" name="username"/>

  10. <br/>

  11. password: <input type="password" name="password"/>

  12. <br/>

  13. <input type="button" value="提交" onclick="form01();"/>

  14. </form>

  15. </body>

  16. <script type="text/javascript">

  17. //使用button进行表单的提交

  18. function form01() {

  19. //得到form标签

  20. var form01 = document.getElementById("form01");

  21. //提交form表单

  22. form01.submit();

  23. }

  24. </script>

  25. </html>

第三种:直接使用get网址 进行超链接提交

 
<pre name="code" class="html"><a href="html?username=ccc&password=123456">超链接提交数据</a>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form 可以通过 el-upload 组件来实现文件上传功能。 首先,需要在 el-form 中定义一个 el-upload 组件,如下所示: ```html <el-form ref="form" :model="formData"> <el-form-item label="上传文件"> <el-upload class="upload-demo" action="/your/upload/url" :on-success="handleSuccess" :limit="1" :file-list="fileList"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" v-if="fileList.length > 0" @click.prevent="submitForm('form')">上传文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </el-form-item> </el-form> ``` 在上述代码中: - `el-upload` 组件的 `action` 属性指定了上传文件的地址; - `el-upload` 组件的 `:on-success` 属性指定了上传成功后的回调函数; - `el-upload` 组件的 `:limit` 属性指定了上传文件的数量限制; - `el-upload` 组件的 `:file-list` 属性绑定了上传的文件列表; - `el-upload` 组件内部包含了两个按钮,一个用于选择文件,一个用于提交表单,并且提交表单的按钮只有在有文件上传时才会出现。 接着,在 Vue 实例中定义 `formData` 和 `fileList` 数据,并且编写 `handleSuccess` 和 `submitForm` 方法,如下所示: ```javascript export default { data() { return { formData: { // 其他表单数据 }, fileList: [], }; }, methods: { handleSuccess(response, file, fileList) { // 上传成功后的处理 }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.$refs[formName].$el.submit(); } else { return false; } }); }, }, }; ``` 在上述代码中: - `formData` 对象用于存储表单数据; - `fileList` 数组用于存储上传的文件列表; - `handleSuccess` 方法在上传成功后会被调用,可以在该方法中处理上传成功后的回调逻辑; - `submitForm` 方法用于提交表单,只有在表单验证通过且有文件上传时才会提交表单。 最后,需要在后端实现文件上传的接口,在接口中获取上传的文件并保存到指定的位置。具体实现方式因后端语言和框架不同而异,这里不做过多讲解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值