html表單美化 與 vue表單數據的自動蒐集
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">