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表單數據的自動蒐集

html表單美化與 vue表單數據的自動蒐集

html表單

html表單美化

html表單數據提交

vue表單數據自動蒐集

v-model的修飾符

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

js設計模式設計模式基本概念和七大設計原則

java設計模式 java對象創建與原型模式

vue教程 html表單美化與 vue表單數據的自動蒐集

javaweb教程 servlet第二部分

js 瀏覽器http請求流程與網頁渲染流程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

vue教程 html表單美化 與 vue表單數據的自動蒐集

html表單美化 與 vue表單數據的自動蒐集

html表單

html表單美化

html表單數據提交

vue表單數據自動蒐集

v-model的修飾符

vue教程 html表單美化與 vue表單數據的自動蒐集

html表單美化與 vue表單數據的自動蒐集