vue教程 html表单美化 与 vue表单数据的自动搜集
2024-05-26 09:49:14
html表单美化 与 vue表单数据的自动搜集
- html表单
- html表单美化
- html表单数据提交
- vue表单数据自动搜集
- v-model的修饰符
html表单
- input 文本框
<input type="text" placeholder="请输入姓名" value="内容"/>
- 密码框
<input type="password" placeholder="请输入密码" value="密码" />
- 单选框
#单选框，同一个name表示同一组，互斥。
<div class="radio-field"><input type="radio" name="name" id="male"/> <label for="male">男</label><input type="radio" name="name" id="female"/> <label for="female">女</label>
</div>
- 复选框
#复选框，同一个name的复选框，以数组形式提交数据。
<div class="checkbox-field"><input type="checkbox" name="fruit" id="apple"><label for="apple">苹果</label><input type="checkbox" name="fruit" id="pear"> <label for="pear">梨子</label><input type="checkbox" name="fruit" id="banana"> <label for="banana">香蕉</label><input type="checkbox" name="fruit" id="orange"> <label for="orange">橘子</label>
</div>
- 普通按钮，提交按钮，重置按钮
<div><p>普通按钮</p><input class="common-button" type="button" value="普通按钮" />
</div><div><p>提交按钮</p><input class="submit-button" type="submit" value="提交按钮" />
</div><div><p>重置按钮</p><input class="reset-button" type="reset" value="清空按钮">
</div>
- 文件作用域（选择文件）
<p>文件作用域(选择文件)</p>
<div class="fille-field"><input id="file" type="file"><label for="file">新增文件</label>
</div>
- 隐藏域（不显示，但是会提交）
<input type="hidden" name="test" value="123">
- 文本域
<p>文本域(多行文本输入框)</p>
<div class="textarea-field"><textarea placeholder="提交留言....."></textarea>
</div>
- 下拉列表框
<p>下拉列表框</p>
<div class="select-field"><select><option value="1">苹果</option><option value="2" selected="selected">梨子</option><option value="3">香蕉</option></select>
</div>
html表单美化
原生html表单控件的美化效果
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.username-field {border: 1px solid #e0e0e0;display: inline-block;width: 400px;height: 44px;display: flex;align-items: center;border-radius: 4px;}.username-field label {margin: 0 20px;font-size: 16px;}.username-field input {outline: none;border: none;flex: 1;font-size: 16px;}.radio-field {}.radio-field input[type=radio]{display: none;}.radio-field input:checked + label{border: 1px solid dodgerblue;color: dodgerblue;}.radio-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input[type=checkbox] {display: none;}.checkbox-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input:checked + label {border: 1px solid dodgerblue;color: dodgerblue;}.checkbox-field input:checked + label:after {content: '1';display: inline-block;color: dodgerblue;padding-left: 5px;}.common-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.common-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.submit-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.submit-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.reset-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.reset-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.fille-field input[type=file]{display: none;}.fille-field label {display: block;width: 80px;height: 80px;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 4px;}.fille-field label:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.textarea-field textarea {outline: none;border: 1px solid #e0e0e0;width: 300px;height: 140px;padding: 10px;font-size: 14px;}.select-field select {background:#fafdfe;height:28px;width:180px;line-height:28px;border:1px solid #9bc0dd;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.select-field option {width: 300px;height: 36px;font-size: 16px;}</style>
</head>
<body ><div id="app" ><form><div ><p>文本框</p><div class="username-field"><label for="username">账号:</label> <input id="username" type="text" /></div></div><div><p>密码框</p><div class="username-field"><label for="password">密码:</label> <input id="password" type="password" /></div></div><div><p>单选框</p><div class="radio-field"><input type="radio" name="name" id="male"/> <label for="male">男</label><input type="radio" name="name" id="female"/> <label for="female">女</label></div></div><div><p>复选框</p><div class="checkbox-field"><input type="checkbox" name="fruit" id="apple"> <label for="apple">苹果</label><input type="checkbox" name="fruit" id="pear"> <label for="pear">梨子</label><input type="checkbox" name="fruit" id="banana"> <label for="banana">香蕉</label><input type="checkbox" name="fruit" id="orange"> <label for="orange">橘子</label></div></div><div><p>普通按钮</p><input class="common-button" type="button" value="普通按钮" /></div><div><p>提交按钮</p><input class="submit-button" type="submit" value="提交按钮" /></div><div><p>重置按钮</p><input class="reset-button" type="reset" value="清空按钮"></div><div><p>文件作用域(选择文件)</p><div class="fille-field"><input id="file" type="file"><label for="file">新增文件</label></div></div><div><p>文本域(多行文本输入框)</p><div class="textarea-field"><textarea placeholder="提交留言....."></textarea></div></div><div><p>下拉列表框</p><div class="select-field"><select><option value="1">苹果</option><option value="2" selected="selected">梨子</option><option value="3">香蕉</option></select></div></div><div style="margin-bottom: 50px"></div></form>
</div>
</body>
html表单数据提交
html的被提交数据的表单，都是获取表单控件的name属性和value属性的值，组成name=value形式提交。
form标签
属性：
- action属性： 表示要提交到的url目标。
- method属性：表示http请求方式，一般是post。
- target属性： 表示以什么窗口打开。
- onsubmit属性 ： 表单提交时会冒泡到调用这个方法。可以在此方法中阻止默认的提交事件。
- onreset属性： 表单重置时会冒泡到调用该方法。以在此方法中阻止默认的重置事件。
#普通的（无文件，图片上传）的表单提交，每个表单项都需要有name属性和value属性。提交的URL，会以 "name=value&name1=value2" 形式组成。
<form action="vue.html" method="get" target="_blank"><div>文本标签 <input type="text" placeholder="请输入姓名" name="username" /></div><div>密码标签 <input type="password" placeholder="请输入密码" name="password" /></div><div>单选框 <input type="radio" name="gender" value="male"/> 男<input type="radio" name="gender" value="female" /> 女</div><div>复选框 <input type="checkbox" name="hobbit" value="apple"/> 苹果<input type="checkbox" name="hobbit" value="pear"/> 梨子<input type="checkbox" name="hobbit" value="banana"/> 香蕉</div><div>文本作用域<textarea name="detail"></textarea></div><div>下拉列表框<select name="select"><option value="apple">苹果</option><option value="pear">梨子</option><option value="banana">香蕉</option></select></div><div><input type="hidden" name="version" value="1.0" /></div><input type="submit" /><input type="reset" />
</form>文件上传的表单
#表单默认的enctype为application/x-www-form-urlencoded.
#如果是含有文本的表单，enctype必须为 multipart/form-data。
<form action="vue.html" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input type="submit" /><input type="reset" />
</form>
vue表单数据自动搜集
表单提交数据的核心依然是 name-value。但是vue对表单项中的value做了处理。
1、文本、密码、textarea 表单项，使用v-model代替value。需要提供name，value为用户输入的文本。
2、radio、checkbox 表单项，使用v-model代替checked。radio，checkbox需要提供name，value。只有处于checked状态的表单项才会被提交。
- 单个复选框，绑定到一个字符串文本。
- 多个复选框，绑定到同一个数组。
- 单选框，绑定到一个字符串文本。
3、hidden 表单项，使用v-model代替value。通过v-model绑定的数据代替value。
4、select 表单项，使用v-model代替selected.通过v-model绑定的数据确定选中的数据。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.username-field {border: 1px solid #e0e0e0;display: inline-block;width: 400px;height: 44px;display: flex;align-items: center;border-radius: 4px;}.username-field label {margin: 0 20px;font-size: 16px;}.username-field input {outline: none;border: none;flex: 1;font-size: 16px;}.radio-field {}.radio-field input[type=radio]{display: none;}.radio-field input:checked + label{border: 1px solid dodgerblue;color: dodgerblue;}.radio-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input[type=checkbox] {display: none;}.checkbox-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input:checked + label {border: 1px solid dodgerblue;color: dodgerblue;}.checkbox-field input:checked + label:after {content: '1';display: inline-block;color: dodgerblue;padding-left: 5px;}.common-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.common-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.submit-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.submit-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.reset-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.reset-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.fille-field input[type=file]{display: none;}.fille-field label {display: block;width: 80px;height: 80px;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 4px;}.fille-field label:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}</style>
</head>
<body ><div id="app" ><form method="get" action="vue.html"><div ><p>文本框{{username}}</p><div class="username-field"><label for="username">账号:</label> <input id="username" type="text" name="username" v-model="username"/></div></div><div><p>密码框{{password}}</p><div class="username-field"><label for="password">密码:</label> <input id="password" type="password" name="password" v-model="password"/></div></div>#单选框radio，只要v-model绑定对象的值，与某一个radio的value匹配，就表示该项选中。<div><p>单选框{{name}}</p><div class="radio-field"><input type="radio" name="name" value="male" id="male" v-model="name"/> <label for="male">男</label><input type="radio" name="name" value="female" id="female" v-model="name"/> <label for="female">女</label></div></div>#复选框checkbox，只要v-model绑定对象的数组中的元素，与某一个checkbox的value匹配，就表示该项选中。<div><p>复选框{{fruit}}</p><div class="checkbox-field"><input type="checkbox" name="fruit" value="apple" id="apple" v-model="fruit"> <label for="apple">苹果</label><input type="checkbox" name="fruit" value="pear" id="pear" v-model="fruit"> <label for="pear">梨子</label><input type="checkbox" name="fruit" value="banana" id="banana" v-model="fruit"> <label for="banana">香蕉</label><input type="checkbox" name="fruit" value="orange" id="orange" v-model="fruit"> <label for="orange">橘子</label></div></div>#下拉框select。只要v-model绑定的对象的值，与某个option的value匹配，就是选中该项。<div><p>下拉框</p><select name="sports" v-model="sports" id="sports"><option value="basketball">篮球</option><option value="football">足球</option><option value="baseball">棒球</option></select></div><div><input type="hidden" name="version" v-model="version"></div><div><p>普通按钮</p><input class="common-button" type="button" value="普通按钮" /></div><div><p>提交按钮</p><input class="submit-button" type="submit" value="提交按钮" /></div><div><p>重置按钮</p><input class="reset-button" type="reset" value="清空按钮"></div><div><p>文件作用域(选择文件)</p><div class="fille-field"><input id="file" type="file"><label for="file">新增文件</label></div></div><div><p>文本域(多行文本输入框){{textarea}}</p><div><textarea name="textarea" v-model="textarea"></textarea></div></div></form>
</div><script>const vm = new Vue({el : '#app',data: {username : '',password : '',name : '',fruit: [],textarea :''},watch:{name( newValue, oldValue ){alert(newValue);}},methods: {error(){alert("图片加载错误");},abort(){alert("图片加载失败");},keyup( event ){console.log("键盘弹起");},keydown( event ){console.log("键盘按下");}}});</script>
</body>
</html>
v-model的修饰符
- .lazy
#在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步.<!-- 在“change”时而非“input”时更新, 而是失去焦点的时候才更新 -->
<input v-model.lazy="msg" >
- .number
#如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。<input v-model.number="age" type="number">
- .trim
#如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：<input v-model.trim="msg">
vue教程 html表单美化 与 vue表单数据的自动搜集相关推荐
- antd vue表单验证_antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效（其他验证失效）...
## antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效) ##### antd 的 表单校验方法包括 validateFields 和 validateField ...
- 我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！
背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...
- JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
- php jq 提交表单验证,jQuery EasyUI 表单 – 表单验证 | 菜鸟教程
jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...
- html表单验证案例,HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...
- html表单模板属性,HTML5超酷响应式表单美化模板插件
这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件.表单的整体效果使用扁平化风格,使用media queries来为各种屏幕创建响应式效果.在大屏幕上,整个表单分三列显示,当屏幕小到一定程度 ...
- elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证 简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
- html修改表单样式,HTML 样式 表单
HTML 的 style 属性 style 属性的作用: 提供了一种改变所有 HTML 元素的样式的通用方法. 样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式.通过 H ...
- java jquery提交表单_Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- 用php实现一个简易的web表单生成器,PHP—Web表单生成器
1.实例: 2. 需求分析 在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. 因此,可以利用PHP实现一个Web表单生成器,使其可以根据具体的需求定制 ...
最新文章
- python使用osgeo库_python中使用gdal，osgeo
- TI CC2541 BLE协议栈蓝牙MAC 地址
- 为treeview添加客户端事件
- OPC的数据访问方法分别有同步访问、异步访问和订阅式
- ITK:创建一个自定义颜色图
- 查看oracle连接数的消耗情况
- 耍了一下 UncaughtErrorEvents
- 爬虫--Scrapy-CrawlSpider基于CrawlSpide的分布式爬虫
- C#网络编程----使用UdpClient实现网络会议讨论（详解）
- 关于spring security的URL路径验证问题
- 一线顶级互联网公司offer的成功经验【转自IT面试】
- Exception raised: Traceback (most recent call last):
- 超简单的wf日记程序
- 几种实现数据扁平化的方法
- excel数据修约（四舍六入五成双）
- 灰鸽子--木马、后门实验
- Lingo学习笔记（二）——常用函数
- ABAP其他基本语法
- 使用约登指数寻找最佳ROC曲线阈值
- gitlab议题模板上传创建