vue教程 html表单美化 与 vue表单数据的自动搜集
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表单控件的美化效果
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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绑定的数据确定选中的数据。
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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 事件进行同步.
<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">