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的修饰符

Win10 LTSC 2019 安装后的一些步骤

推荐2款开源、美观的WinForm UI控件库

NET9 AspnetCore将整合OpenAPI的文档生成功能而无需三方库

在Linux下管理MySQL的大小写敏感性

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表单数据的自动搜集