08-form表单

最新推荐文章于 2022-06-30 17:34:09 发布
原创 最新推荐文章于 2022-06-30 17:34:09 发布 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--1.form表单，一般用来，从前端页面输入数据，提交到后端-->
<!--action属性 数据提交的位置，不设置则提交到当前函数/页面-->
<!--method属性 get方法(默认) post方法-->
<!--<form action="" method="">-->

    <!--&lt;!&ndash;2. input标签 输入框&ndash;&gt;-->
    <!--&lt;!&ndash;name属性必须有， 后端需要根据name来获取提交的数据&ndash;&gt;-->
    <!--用户名：<input type="text" name="username"> <br>-->

    <!--密码: <input type="text" name="password"> <br>-->

    <!--<input type="submit">-->
    <!---->
<!--</form>-->


<!--post提交-->
<form action="" method="post">

    <!--2. input标签 输入框-->
    <!--name属性必须有， 后端需要根据name来获取提交的数据-->
    <!--placeholder属性  提示信息-->
    用户名：<input type="text" name="username"  placeholder="请输入用户名"> <br>

    <!--type="password" 页面隐藏输入内容效果-->
    密码: <input type="password" name="password" > <br>

    性别：
    <!--3. radio单选框，name相同，必须有value值-->
    <input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="2">女
    <input type="radio" name="gender" value="3" checked>保密

    <br>
    爱好：

    <!--4. checkbox多选框，name相同，必须有value值-->
    <!--checked属性 设置单选框和多选框的默认选中状态-->
    <input type="checkbox" name="hobby" value="1">游泳
    <input type="checkbox" name="hobby" value="2" checked>学习
    <input type="checkbox" name="hobby" value="3" checked>美食
    <input type="checkbox" name="hobby" value="4">健身

    <br>

    <!--5. hidden 需要向后端提交goods_id=108, 这个值不需要前端输入-->
    <!--<input type="text" name="goods_id" value="108" hidden>-->
    <input type="hidden" name="goods_id" value="108">


    <!--6.下拉选框-->
    <br>
    籍贯：
    <!--selected 设置下拉选框的默认选中状态  给option设置-->
    <select name="hometown" id="">
        <option value="1">北京</option>
        <option value="a">上海</option>
        <option value="3" selected>广州</option>
        <option value="4" selected>江西</option>
    </select>


    <!--7.textarea标签 可以输入多行文字-->
    <br>
    简介：
    <textarea name="description" cols="30" rows="30"></textarea>

    <br>
    <!--. submit 提交按钮，disabled阻止原本的效果-->
    <input type="submit" value="提交按钮" disabled>

    <!--. 单纯的按钮，需要和js配合使用，-->
    <!--两种不同写法，效果一样-->
    <!--<button>按钮02</button>-->
    <input type="button" value="按钮02">


</form>


</body>
</html>
【a-form表单动态添加项目校验】
weixin_41977129的博客
05-30 939
a-form-modal 动态添加表单
form表单的onsubmit() return问题
Java进阶之路
08-30 3516
 最近写前端小案例，想用到H5自带的表单校验功能，在用到onsubmit时遇到些小问题，在此记录分享一下~ 话不多说，先贴表单代码：  &lt;form onsubmit="return saveForm()"&gt; &lt;span&gt;姓名：&lt;/span&gt;&lt;input type="text" name="name" id="name&qu
form表单的onsubmit()问题
yiyiquegai的专栏
08-03 685
以前在项目中为一个表单（from）编写onsubmit()脚本的时候，经常需要验证表单中数据的合法性，所以常会写道：，试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。后来发现 onsubmit="return validateForm()"就没有问题了，当时也没有多想就继续做其它事情了。      直到今
element-ui表单实现根据后台返回数据在指定字段下提示错误信息
xiaojing的博客
07-10 1万+
今天使用element-ui表单做注册、登录功能，需要根据后台返回的数据，如返回错误提示，需在相应的字段下进行提示，比如验证码错误等。。。 element-ui的form-item有一个error属性可以进行设置错误信息，在接口返回信息后，设置error信息 有一个表单如下： <el-form :model="ruleForm" status-icon :rules="rules" ...
el-form 表单的校验
潇蓝诺依的博客
12-03 2万+
文章目录rules 绑定对象校验数组校验rules 中的关键字说明Typerequiredpatternmin/maxLenenumwhitespacetransformfieldsmessagevalidator rules 绑定 绑定到el-form <template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item labe
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 1万+
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
Element el-form 表单详解
热门推荐
编程副队长
10-15 4万+
本文目录1. 前言2. 基本用法3. 行内表单4. 标签对齐方式5. 调整尺寸6. 小结 1. 前言 表单是使用频率非常高的组件了，HTML默认提供的表单是没啥样式的，而Element对表单提供了封装形成了el-form组件，使整个表单的样式整齐划一。 本篇就来介绍下表单的使用，主要介绍的是样式方面的使用。 2. 基本用法 代码： 基本用法： <el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padd
k-form-design表单设计器 v3.8.18.zip
最新发布
03-25
《k-form-design表单设计器 v3.8.18》是一款强大的前端表单构建工具，专为提升开发效率而设计。这款开源软件允许开发者快速、灵活地创建自定义表单，适应各种业务需求，尤其适合于系统软件工具的构建和建站模板的...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
k-form-design:基于vue Ant-Design 的表单设计器，快速开发
05-10
表单设计器 k-form-design 简介 设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将...
06-a标签--跳转到本地页面
return_min的博客
01-03 700
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="05-a标签--超链接.html">跳到05页面&lt...
css样式的三种引入方式
return_min的博客
01-03 551
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--&lt;!&ndash;2.嵌入式引入样式，样式写在html文档中，head中的style标签内&am...
外边距
return_min的博客
01-04 402
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box01, .box02{ width: 200px; ...
3种引入方式的优先级
return_min的博客
01-03 373
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--3.通过link标签，引入外部 1.css 文件的样式--> <link rel="styles...
三种基本选择器
return_min的博客
01-03 372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1.标签选择器: 会选择所有的div标签*/ div{ ...
el-form表单嵌套el-form
09-08
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。 以下是一个示例代码，演示了如何嵌套`el-form`表单： ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层表单项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层表单项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层表单校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层表单校验通过，提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层表单校验不通过 return false; } }); } else { // 外层表单校验不通过 return false; } }); } } }; </script> ``` 在上面的示例中，外层表单和内层表单都使用了`el-form`组件，并且分别定义了自己的数据模型（`outerForm`和`innerForm`）。你可以根据实际需要添加更多的表单项。 请注意，在提交表单时，需要先校验外层表单的有效性，然后再校验内层表单的有效性。只有当两个表单都校验通过时，才会提交数据。 希望这个例子对你有所帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值