精华内容
下载资源
问答
  • 常用的表单元素有三种类型
    千次阅读
    2019-03-13 22:50:17

    1、新增input类型
    -电子邮件类型
    语法:
    当输入的邮件地址格式不对时,会弹出提示信息

    -搜索类型
    语法:<input type="search">
    手机键盘会将确定变换为搜索
    
    -URL类型
    语法:<input type="url">
    当输入的网址格式不正确时,会弹出提示信息
    
    -电话号码类型
    语法:<input type="tel">
    主要针对移动端,针对电话号码的输入,调整手机键盘的类型
    
    -数字类型
    语法:<input type="number">
    只接受数字类型,当文本框中包含非数字时,会弹出错误提示
    属性:
    min:文本框能接受的最小值
    max:文本框能接受的最大值
    step:指点击右侧按钮时递增/递减的幅度,取值为整数,默认是1
    
    -范围类型
    语法:<input type="range">
    会出现一个允许滑动的块
    属性:
    min:起始值
    max:最大值
    value:当前元素的值
    step:递增或递减的长度
    
    -颜色类型
    语法:<input type="color">
    可以通过onchange事件,获取选择的颜色值
    
    -日期类型
    语法:<input type="date">
    -周类型
    语法:<input type="week">
    
    -其他
    type=month
    type=time
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="jquery-3.1.1.js"></script>
    </head>
    <body>
        <form action="">
            <input type="email">
    
            <input type="search" placeholder="搜索">
            <br>
            <br>
            <input type="url">
            <br>
            <input type="tel">
            <br>
            <input type="number" min="3" step="4" max="10">
            <br>
            <input type="range" min="10" max="100" value="20" id="r" step="20">
    
            <br>
            <input type="color" id="c" onchange ="fun()">
    
            <br>
            <input type="date">
            <br>
            <input type="week">
            <br>
            <input type="month">
            <br>
            <input type="time">
            <input type="submit">
    
        </form>
        <script>
            console.log($('#r').val());
    
            function fun() {
                console.log($('#c').val());
            }
    
        </script>
    </body>
    </html>
    
    

    一、新增表单元素
    1、datalist元素
    可以使用该标记创建一组列表项,可以为输入框做提示
    该元素需要与input进行绑定,需要有选项option
    语法:


    2、progress元素
    进度条,消失处理的进度值
    语法:<progress></progress>
    属性:value:当前进度
          max:最大进度值
    
    3、meter
    类似于进度条
    
    4、output元素(选修)
    用于显示表单元素处理的结果值
    

    二、新增表单属性
    1、multiple属性:规定文本框中可以包含多个值(email、file)
    -多个值之间用逗号隔开
    -该属性可以不设置属性值

    2、autofocus
    自动获取焦点,可以不设置属性值
    注意,一个表单中,只会设置一个文本框自动获取焦点
    
    3、form属性
    该属性可以用于将某控件与表单关联起来
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="" oninput="o.value = parseInt(n.value)+parseInt(r.value)" id="f1">
            <input type="email">
            <br>
            <input type="number" step="3">
            <br>
            <!-- datalist的用法 -->
            <input type="text" list="data">
            <datalist id="data">
                <option value="123"></option>
                <option value="111"></option>
                <option value="abc"></option>
            </datalist>
    
            <br>
            <progress value="1" max="100"></progress>
            <br>
            <meter value="4" min="0" max="10">0.25</meter>
            <br>
    
            <!-- <input type="number" id="n" value="4">
            +<input type="range" id="r" value="50">
            =<output name="o" for="n r"></output> -->
    
            <input type="email" multiple="">
            <br>
            <input type="file" multiple="">
            <br>
            <input type="text" autofocus="">
    
            <input type="submit">
    
        </form>
        <input type="email" form="f1">
    </body>
    </html>
    

    表单验证
    1、required
    必填属性,该属性不需要设置属性值

    2、pattern
    实现元素的指定格式的验证,多用于正则表达式指定的规则
    语法格式:<input type="text" pattern="正则表达式">
    手机号验证:^1[34578]\d{9}$
    邮箱验证:^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$
    
    3、min和max
    最大值和最小值,适用于number
    
    4、minlength和maxlength
    最小字符个数或最大字符个数
    当输入字符个数小于minlength时,会弹出提示信息,需要注意的是,设置了maxlength,文本框不允许多输入,也不会有提示
    
    5、validity
    这是表单元素的一个属性,可以用于表单验证,该属性主要利用validityState对象,描述元素的有效状态;validityState对象,代表元素是否通过验证,它提供了一些属性,可以用于描述指定元素的验证状态。
    
    语法:表单元素dom对象.validity.属性
    
    验证状态:
    1)valid
    语法:form表单元素对象.validity.valid;
    valid属性是一个bool值,它表示表单元素是否通过验证,如果通过,则为true,否则为false
    
    2)valueMissing
    当控制处于无效状态时,此时控件不会验证通过,其valueMissing的值为true;注意,此状态用于验证required元素,元素为空时,该属性为true,否则为false
    
    3)typeMismatch
    如果输入的内容不符合指定的格式,该属性为true
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="">
            <input type="text" required="">
            <br>
            <input type="text" id="phone" pattern="^1[34578]\d{9}$">
            <br>
            <input type="text" pattern="^3\d{16}[\dx]$">
            <br>
            <input type="number" min="3" max="6">
            <br>
            <input type="text" minlength="10" maxlength="15">
            <input type="submit">
        </form>
        <form action="">
            <input type="text" id="text" required="">
            <br>
            <input type="email" id="e">
            <br>
            <input type="url" pattern="^3\d{16}[\dx]$" id="p">
            <input type="button" value="注册" onclick="regist()">
        </form>
        <script>
            function regist() {
                var d = document.getElementById('text');
                // if (d.value.length == 0) {
                //     console.log("请填写")
                // }
                console.log(d.validity.valid);
                console.log(d.validity.valueMissing+"--=");
                // if (d.validity.valid) {
                //     console.log("验证通过")
                // }else{
                //     console.log("验证失败");
                // }
    
                var email = document.getElementById('e');
                if (e.validity.typeMismatch) {
                    console.log("邮箱格式不正确")
                }
    
                var p = document.getElementById('p');
                if (p.validity.typeMismatch) {
                    console.log("不匹配正则")
                }
            }
        </script>
    </body>
    </html>
    
    
    更多相关内容
  • 【常见的表单元素有哪些?各什么属性? 】 大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。 表单元素是允许用户在表单中(比如:文...

    这里是修真院前端小课堂,每篇分享文从

    【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

    八个方面深度解析前端知识/技能,本篇分享的是:

    【常见的表单元素有哪些?各有什么属性? 】

    大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。

    表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素,最主要的作用就是收集信息。表单元素是页面中不可缺少的元素,在最新的H5中,表单元素也新增了一些属性,在页面构建中发挥了重要的作用。一般来说,表单包含如下几个部分:

    1. 提示信息:表单中包含的说明性文字

    2. 表单控件:包含了具体的表单功能项

    3. 表单域:容纳所有表单控件和提示信息

    常用的表单元素,包括:

    1. form: 定义供用户输入的表单。

    2. fieldset: 定义域。即输入区加有文字的边框。

    3. legend:定义域的标题,即边框上的文字。

    4. label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。

    5. input: 定义输入域,常用。可设置type属性,从而具有不同功能。

    6. textarea: 定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。

    7. button: 定义一个按钮。

    8. select: 定义一个选择列表,即下拉列表。

    9. option: 定义下拉列表中的选项。

    接下来是对这些表单元素的具体分析。

    <form name="" action="" method="get">……</form>

    name : 表单名称;action : 用来指定表单处理程序的位置(url);method : 定义表单结果从浏览器传送到服务器的方式,默认为"get"(也可以是post)

    <input type="" name="" value="" size="">

    name:控件名称;value:input控件默认文本值;size:input控件在页面中的显示宽度(必须是正整数)

    input常用type属性如下:

    1. text:单行文本输入框,可以通过正整数的size控制框长度。

    2. password:密码输入框。

    3. radio:单选按钮,同一组的单选按钮必须要有相同的name。

    4. checkbox:复选框,同一组的单选按钮必须要有相同的name。

    5. button:普通按钮。

    6. submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。

    7. reset:重置按钮,会重置当前表单中全部的内容。

    8. image:图像形式的提交按钮,写法是“”。

    9. hidden:隐藏域,隐藏字段对于用户是不可见的。

    10. file:文件域,用于文件上传。

    <select size="" multiple="multiple">

    <option hidden>选项1</option>

    ……

    </select>

    size:下拉菜单的可见选项数;multiple:多选。

    在最新的html5中,有一些表单的新增属性,多用于js,如

    datalist : 定义填写一个input时,提示几个option用于提示。可通过input的list特性与此元素作关联。

    output : 表示计算的结果。可通过for特性与其它能够影响运算的元素(如input)作关联。

    还有一些新增的type属性:

    1. search:input会呈现为搜索框(与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容)。

    2. tel:编辑电话号码的控件,提交时换行符会自动从输入框中去掉。

    3. url:编辑url的控件,提交时换行符与首位的空格都将自动去除。

    4. email:可输入一个邮件地址。

    5. color : 选择颜色的控件。

    6. date : 选择年月日的控件。

    此外,还有time、datetime、datetime-local、month、week、number、range类型。

    html5中input新增的一些较常用的特性:

    1. list:关联datalist所用的该datalist的id(即datalistform外建立,通过list关联即可)。

    2. pattern:一个正则表达式,用于检查控件的值,可作用于text、search、tel、url、email类型的input。

    3. form:一个字符串(为关联的form表单的id),用于表明该input属于哪个form表单(作用类似list)。

    4. formmethod:表明使用GET还是POST,能覆盖form表单的method。仅在type为image或submit,且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

    5. readonly:一个boolean值,表明该input值是否能被用户修改,可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

    6. maxlength:type为text、emal、search、password、tel或url(都为文本)时允许输入的最大字符个数。

    7. autocomplete:浏览器是否根据之前提交的输入情况对此input自动填值(即以option形式匹配之前的输入值),取值on或off,默认on。如在登陆页面不想显示上一个登陆的用户名等时,可设置为off。

    参考文献

    1. html元素-表单元素及实用属性:http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"

    2. W3School HTML 表单 : http://www.w3school.com.cn/html/html_forms.asp" target="_blank"

    3. HTML5-input元素新特性 :http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date

    相关ppt见:https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/

    腾讯视频:https://v.qq.com/x/page/o05246f2ah7.html

    问题整理

    1. 使用input上传文件或图片应该怎么办

    涉及到angularjs,可参考插件https://github.com/nervgh/angular-file-upload

    2. input为什么不使用闭合标签

    input为自闭和标签,详见W3C标准

    3. type="number"在输入框右侧有上下箭头可以加减数字,怎么去掉箭头?

    使用type="tel"时没有右侧上下箭头

    展开全文
  • 1. 掌握form表单的作用:提交数据。 2. 掌握form表单7种常用属性的作用与语法。 3. 掌握form表单9种常用元素的作用与语法。

    1 form表单概述

    1. 作用:用于搜集不同类型的用户输入。
    2. 应用场合:搜索框、登录框、文件上传、注册、留言板等。
    3. 定义标签:<form></form>

    2 表单属性

    2.1 Action 属性

    1. 背景:通常,当用户单击“提交”按钮时,表单数据将发送到服务器上的文件中。
    2. 作用:规定当提交表单时向何处发送表单数据。action 默认值为当前页面。
    3. 语法:<form action="URL"></form>
    4. 关于URL值:
      1. 默认值为当前页面。
      2. 绝对 URL:指向另一个网站(比如 action=“http://www.example.com/example.htm”)。
      3. 相对 URL:指向网站内的一个文件(比如 action=“example.htm”)。

    2.2 Target 属性

    1. 背景:当我们提交表单后,一般会得到对应的响应。
    2. 作用:规定一个关键词,指示在何处显示提交表单后接收到的响应。
    3. 语法:<form target=" _blank | _self | _parent | _top | framename ">
    4. 关于target几种属性的含义:
      1. _blank:在新窗口/选项卡中打开。
      2. _self:在同一框架中打开。(默认)
      3. _parent:在父框架中打开。
      4. _top:在整个窗口中打开。
      5. framename:在指定的 iframe 中打开。
    5. 在网站https://www.runoob.com/try/try.php?filename=tryhtml_form_target练习不同target的响应方式,以加深理解。

    2.3 Method 属性

    1. 作用:指定提交表单数据时要使用的 HTTP 方法。
    2. 使用get方式(默认)语法:<form action="/action_page.php" method="get">
      使用post方式语法:<form action="/action_page.php" method="post">
    3. 两种方法的一个明显区别是,get提交的参数在浏览器的地址栏中可见,而post则不可见。如果表单数据包含敏感信息或个人信息,请务必使用 POST!
    4. 关于 GET 的注意事项:
      • 以名称/值对的形式将表单数据追加到 URL
      • 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
      • URL 的长度受到限制(2048 个字符)
      • 对于用户希望将结果添加为书签的表单提交很有用
      • GET 适用于非安全数据,例如 Google 中的查询字符串
    5. 关于 POST 的注意事项:
      • 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据)
      • POST 没有大小限制,可用于发送大量数据。
      • 带有 POST 的表单提交无法添加书签

    2.4 enctype 属性

    1. 注意:只有 method=“post” 时才使用 enctype 属性。
    2. 作用:规定在将表单数据发送到服务器之前如何对其进行编码。
    3. 语法:<form enctype="value">
    4. 属性值:
      1. application/x-www-form-urlencoded:在发送前编码所有字符(默认)。
      2. multipart/form-data:不对字符编码;在使用包含文件上传控件的表单时,必须使用该值。
      3. text/plain:空格转换为 “+” 加号,但不对特殊字符编码。

    2.5 name 属性

    1. 作用:规定表单的名称。name属性用于在JavaScript中引用元素,或者在表单提交之后引用表单数据。
    2. 语法:<form name="text">

    2.6 Autocomplete 属性

    1. 作用:设定表单是否应打开自动完成功能,启用自动完成功能后,浏览器会根据用户之前输入的值自动填写值。部分浏览器不支持。
    2. 语法:<form action="/action_page.php" autocomplete="on | off">
    3. 属性值及含义:
      1. on:默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。
      2. off:规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中,浏览器不会自动完成输入。
    4. 在网站https://www.runoob.com/try/try.php?filename=tryhtml5_form_autocomplete尝试不同属性值的输入方法,在搜狗浏览器体现不错差别,在360浏览器可以体现出。

    2.7 Novalidate 属性

    1. 作用:novalidate 属性规定当提交表单时不对表单数据(输入)进行验证。
    2. 属性:novalidate 属性是一个布尔属性。
    3. 语法:<form action="/action_page.php" novalidate>

    3 表单元素

    3.1 input元素

    1. 作用:元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变,取决于 type 属性。
    2. 注意:该元素是单标签。
    3. 常用属性:
      1. name属性:类型为text,该属性规定元素的名称。
      2. pattern属性:类型为regexp,该属性用于设定验证元素值的正则表达式。
      3. size属性:类型为number,该属性规定以字符数计的元素的可见宽度。
      4. type属性:该属性设定要显示的元素的类型。
      5. 更多属性参考网址:《HTML<input>标签》
    4. 利用菜鸟在线编辑器尝试不同type值的应用结果。先清空源代码,然后复制黏贴代码并点击运行。
    <form>
    <!--尝试输入,文字显示为明文。-->
    账号:<input type="text" name="fname"><br >
    <!--尝试输入,文字显示为密文。-->
    密码:<input type="password" name="passwd"><br >
    <!--#显示为按钮。-->
    按钮:<input type="button" name="button"><br >
    <!--# 单选。-->
    性别:<input type="radio" name="sex"><input type="radio" name="sex"><br >
    <!--# 多选-->
    爱好:<input type="checkbox" name="ah1">吃饭
    			<input type="checkbox" name="ah2">睡觉
    			<input type="checkbox" name="ah3">打游戏
    </form>
    

    3.2 select元素和option元素

    1. 作用:<select>元素用来创建下拉列表。\ <option> 标签定义了列表中的可用选项。
    2. <select> 元素常用属性:
      1. 语法:<select name="text" multiple size="number">
      2. name属性:规定下拉列表的名称。
      3. multiple属性:类型为布尔属性。设定可同时选择多个选项。
      4. size属性:规定下拉列表中可见选项的数目。默认值是 1。如果使用了 multiple 属性,默认值是 4。
      5. 其他属性参考《HTML<select>标签
    3. <option>元素常用属性:
      1. 语法:<option value="value" disabled selected>
      2. disabled属性:类型为布尔属性,用于禁用某个选项。可以设置 disabled 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该选项的使用。
      3. selected属性:类型为布尔属性,设置默认预选项,被预选的选项会显示在下拉列表最前面的位置。
      4. value属性:规定在表单被提交时被发送到服务器的值。
      5. 其他属性参考《HTML<option>标签
    4. 在网站菜鸟在线编辑器练习不同属性的作用。

    3.3 textarea元素

    1. 作用:定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
    2. 注意:可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。
    3. 语法:<textarea name="text" maxlength="number" >
    4. <textarea> 元素常用属性:
      1. name属性:为文本区域规定名称。用于在JavaScript中对元素进行引用,或者在表单提交之后,对表单数据进行引用。
      2. maxlength属性:规定文本区域的最大长度(以字符计)。
      3. required属性:类型为布尔属性。规定一个文本区域是必需的/必须填写(以提交表单)。
      4. 其他属性参考《HTML<textarea>标签
    5. 在网站菜鸟在线编辑器练习不同属性的作用。

    3.4 button元素

    1. 作用:定义一个按钮。
    2. 注意:不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮,以便在表单中使用时能够提交不同的值。
    3. 对比:在<button>元素内部,可以放置内容,比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。
    4. 语法:<button name="name" type="type" value="value">
    5. 常用属性:
      1. name属性:为按钮规定名称。
      2. type属性:规定按钮的类型。type = button为普通按钮,reset为重置按钮,submit为提交按钮。
      3. value属性:按钮的初始值。
      4. 重置form表单属性:可以利用button属性覆盖form属性,如action、method等
      5. 其他属性参考《HTML <button> 标签
    6. 在网站菜鸟在线编辑器练习不同属性的作用。

    3.5 optgroup元素

    1. 作用:选项组规定描述标签。
    2. 应用场合:应用于select之下option之上。
    3. 语法:<optgroup label="text" disabled>
    4. 属性:.
      1. disabled属性:类型为布尔属性,表示选项组被禁用。
      2. label属性:为选项组规定描述标签。
    5. 在网站菜鸟在线编辑器练习不同属性的作用。

    3.6 fieldset元素与legend元素

    1. 作用:<fieldset>元素将表单内的相关元素分组,会在相关表单元素周围绘制边框。<legend>元素定义标题内容与位置。
    2. 语法:
    <fieldset disabled name = "name">
        <legend align="left|right|top|bottom">Personalia:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
      </fieldset>
    
    1. <fieldset>元素属性:
      1. disabled属性:类型为布尔属性。禁用一组表单元素(一个 fieldset)。
      2. name属性:规定 fieldset 的名称。用于在 JavaScript 中引用元素,或者在表单提交之后引用表单数据。
      3. 其他属性参考《HTML<fieldset>标签
    2. <legend>元素属性:
      1. align属性:设置对其位置。
      2. HTML5 不支持 <legend> align 属性。请使用 CSS 代替。
    3. 在网站菜鸟在线编辑器练习不同属性的作用。

    3.7 datalist元素

    1. 作用:规定了<input>元素可能的选项列表。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。
    2. 应用场合:应用于<input>元素下.
    3. 语法:
    <input list="browsers">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    
    1. 在网站菜鸟在线编辑器练习该元素。

    4 总结

    1. 掌握form表单的作用:提交数据。
    2. 掌握form表单7种常用属性的作用与语法。
    3. 掌握form表单9种常用元素的作用与语法。

    参考文献

    1. 菜鸟教程HTML <form>
    2. HTML 表单属性
    3. HTML表单元素
    展开全文
  • el-form 表单 <el-form ref="formRef" :model="formData" label-width="80px" size="mini"> <el-form-item label="姓名" prop='name' :rules="{ required: true, message: '不能为空'}" > <...

    el-form 表单

    <el-form ref="formRef" :model="formData" label-width="80px" size="mini">
        <el-form-item label="姓名"
                      prop='name'
                      :rules="{ required: true, message: '不能为空'}"
        >
            <el-input v-model="formData.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="formData.gender" placeholder="请选择">
                <el-option
                        v-for="item in genderList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="clear">重填</el-button>
        </el-form-item>
    </el-form>

     清空表单数据

    this.$refs.formRef.resetFields();

    表单校验

    在 el-form-item 标签上

    1. 添加prop属性,值为字段名  prop='name'
    2. 添加字段校验规则
        <el-form-item label="姓名"
                      prop='name'
                      :rules="{ required: true, message: '不能为空'}"
        >

    对整个表单数据进行校验 validate

    save() {
        this.$refs.formRef.validate((valid) => {
            if (valid) {
                alert('通过了表单校验,可以保存啦!')
            }
        });
    }

    对单个表单数据进行校验 validateField

    this.$refs.formRef.validateField('name',err  => {
        if(!err){
            alert('姓名校验通过啦!')
        }
    })

    清除表单校验 clearValidate

           this.$nextTick(() => {
              this.$refs.formRef.clearValidate();
            });

     校验规则详解  rules

    若只有一条校验规则,绑定对象即可

    :rules="{ required: true, message: '不能为空'}"

    若有多条校验规则,则绑定对象数组

    :rules="[
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' },
          { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '只能输入汉字', trigger: 'change' }
          ]"

     自定义校验(含异步校验)

     { validator: checkAge, trigger: 'blur' }
    const checkAge = (rule, value, callback) => {
        if (value < 18) {
            callback(new Error('必须年满18岁'));
        } else {
            callback();
        }
    }

    异步校验

    如访问接口,判断用户名是否已存在。  checkUsername为请求后端接口

    required属性——是否必填

    • true 表单元素的值不能为空,表单元素前会有红色*号标记

    • false 表单元素的值可以为空

    message属性——校验失败后的提示信息

    触发校验后,若校验失败,提示信息会在表单元素下方显示

    trigger属性——校验触发时机

    trigger属性用于指定校验触发时机,但是并不是所有的验证项都可以被这样触发

    • 'blur' 表单元素失去焦点时触发校验
    • 'change' 表单元素的值发生变化时触发校验

    type属性——值的类型

    • string: 字符串(默认值)
    • number: 数字
    • boolean: 布尔值
    • method: 函数
    • regexp: 正则表达式
    • integer: 整数
    • float: 浮点数
    • array: 数组
    • object:对象
    • enum: 枚举类型,可以参考百度资料-枚举类型
    • date: 日期类型
    • url: URL类型,如 https://www.baidu.com/
    • hex: 文件格式类型,如  :020000040000FA 
    • email: 邮箱类型,如 3652452@qq.com
    • any: 任意类型

    pattern属性——正则校验

    :rules="[{ pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '只能输入汉字', trigger: 'change' }]"

    更多常用正则表达式见链接  https://blog.csdn.net/weixin_41192489/article/details/113618913

    表单元素排列在一行

    添加  :inline="true" 即可

     <el-form ref="formRef" :model="formData" label-width="80px" size="mini" :inline="true">

     

    常用表单元素

    所有表单元素,都要使用  el-form-item 标签包裹

    单行输入框

    <el-input v-model="formData.name" style="width: 200px"></el-input>

    多行输入框

    <el-input type="textarea" v-model="formData.remark"></el-input>

    下拉选择

    <el-select v-model="formData.gender" placeholder="请选择">
        <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
        ></el-option>
    </el-select>

    单选

    <el-radio-group v-model="formData.gender">
        <el-radio v-for="(item,index) in genderList" :key="index" :label="item.label"></el-radio>
    </el-radio-group>

    多选

    特别注意:因多选表单元素的值为数组,所以必须初始化其值为 []

    formData: {
        hobby: []
    },
    <el-checkbox-group v-model="formData.hobby">
        <el-checkbox v-for="item in hobbyList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
    </el-checkbox-group>
    hobbyList: [
        {
            label: "编程",
            value: '1'
        },
        {
            label: "读书",
            value: '2'
        },
    ]

     

    开关

     

    <el-switch v-model="formData.show"></el-switch>

    选择日期

    <el-date-picker
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            v-model="formData.birthday"
            type="date"
            placeholder="选择日期">
    </el-date-picker>

    选定日期的选择范围

    pickerOptions: {
        disabledDate(time) {
            //此条为设置禁止用户选择今天之前的日期,包含今天。
            // return time.getTime() <= (Date.now()-(24 * 60 * 60 * 1000));
            //此条为设置禁止用户选择今天之前的日期,不包含今天。
            return time.getTime() <= (Date.now()-(24 * 60 * 60 * 1000));
        }
    },

    选择时间

     selectableRange限制可选时间范围

    <el-time-picker v-model="formData.time" placeholder="选择时间"
                    value-format="HH:mm:ss"
                    :picker-options="{selectableRange: '18:30:00 - 20:30:00'}"
    >

    选择日期范围

     unlink-panels 用于解除左右日期面板的联动

    <el-date-picker
            unlink-panels
            value-format="yyyy-MM-dd"
            v-model="formData.validDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
    </el-date-picker>

    展开全文
  • css元素类型哪几

    千次阅读 2019-09-19 19:35:45
    根据css显示分类,XHTML元素被分为三种类型: 块状元素(block element) 说明:没有动过 修饰过 它的宽度就是浏览器的宽度,高度就是子元素的高度 1.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为 ...
  • HTML表单元素--input输入类型(1)

    千次阅读 2019-04-25 17:29:58
    HTML表单元素 HTML表单用于搜集不同类型的用户输入。 1.< form >...其属性action=“要提交的地址” method=" 提交的方式" 属性值:get 和 post ...form action="" method=...元素:最重要的表单元素很多t...
  • 常用表单控件是input元素 accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性 autocomplete、autofocus、form、formaction、formenctype...
  • HTML 5新增表单元素(案例详解)

    千次阅读 2019-04-09 15:35:58
    datalist元素定义输入框的选项列表,选项列表是通过该元素内的option元素进行创建的。 该元素与input元素配合使用,来定义input可能的值。 要把这个datalist元素定义的选项列表绑定到输入框,将input元素的list属性...
  • document.forms[下标],通过指定下标获取表单元素 document.forms[表单的name属性值获取],通过表单的name属性值获取表单对象 document.forms:获取HTML文档中所有的表单对象 <body> <!-- 获取表单...
  • H5新增表单元素、控件

    千次阅读 2019-09-24 18:51:43
    表单—新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, ...
  • 网页中常见的元素有哪些

    千次阅读 2021-06-17 13:58:21
    网页中的常见元素主要包括以下几种类型:文本、图象、动画、视频音乐、超链接、表格、表单和各类控件等。1、文本:文字能准确地表达信息的内容和含义,且同样信息量的文本字节往往比图象小,比较适合大信息量的网站...
  • HTML 表单元素的基本样式

    千次阅读 2018-02-22 17:48:53
    表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text...
  • 在HTML文档中,表单用于在网页中收集用户输入的数据,负责数据采集功能,表单元素有如下标签。 定义一个表单,用于申明采集数据的区域范围。里面可以嵌套其他表单元素
  • 先来看一下html文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <... <head>...Html的Form表单元素</title> <meta charset="UTF-8"> </head> ...
  • vue动态生成表单元素

    千次阅读 2018-11-15 14:44:57
    根据选择方式展示不同的表单元素 如果从编辑页进入该页面数据的话,进行数据回填 样式同第点相似,这里不再说明 思路: 请输入标题,请选择类型 为父组件;请选择方式 为子组件;根据请选择方式出来的内容...
  • element-ui中表单验证的三种方式(超详细)

    万次阅读 多人点赞 2020-12-04 14:49:43
    第一种常用方式:表单上加rules{object} <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-...
  • 在html中form表单有哪些,他们的写法又什么区别呢? 在我们的生活中,form表单无处不在,比如我们在登录账号或者注册账号的时候,你填写信息的框就是form表单的一。 正如下图,下图每一项需要填写的框都属于...
  • 在 HTML 中,一个完整的表单通常由表单控件(表单元素)、提示信息和表单域部分构成 表单控件 包含了具体的表单功能项,例如:单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等 提示信息 一个表单中通常...
  • HTML5 表单相关元素及属性

    千次阅读 2020-04-14 23:48:54
    常用属性 1. action属性 在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。 例如:<form action="form_action.asp"> 表示当提交表单时,...
  • vue动态生成表单元素基础篇

    千次阅读 2018-11-28 11:13:21
    这里讲解一个vue生成表单的简单实例: (图一) (图二) (图) 如上图所示: 图一: 空的输入框的情况 图二: 点击 “+” 添加生成表单的情况 图表单中可以输入值,并且可以点击“—”删除和点击“+”...
  • 我们收集到的用户信息怎么传输给后台服务器,form表单域可以帮我们做到。 form标签被定义于表单域,相当于一个大...form有三常用的属性: action,他的属性值是url地址,用于指定接收并处理表单数据的服务器程序的ur
  • ``` $("#submit").click(function () { var sumQ = $("#MTform").serializeArray();... //判断input,select,checkbox类型,在这里用哪个语法获取当前是input还是select呢? ; } } }); ```
  • elementUI动态生成表单元素

    千次阅读 2020-07-31 17:35:52
    这里是通过设备类型的下拉,关联的设备属性来动态生成表单元素,其中proDetail为元素的集合 效果如下: 选择值后: 这里参考官方示例,动态增减表单项 https://element.eleme.cn/#/zh-CN/component/form ...
  • HTML里的form表单元素总结

    千次阅读 2021-05-24 20:54:37
    元素通常是用来采集用户输入信息的表单控件,也可以包含其他元素,如段落、标题等。但是,不能包含另一个<from>元素,即<from>元素不能嵌套。 补充:method属性--------method属...
  • HTML中type类型常用种类

    万次阅读 多人点赞 2019-10-27 17:14:49
    (重置所有的表单值为默认值)。 < br > < input type = "reset" name = "" id = "" > < br > < br > search:定义用于输入搜索字符串的文本字段 。 < br > < input type = "search" name = "" id...
  • JavaScript获取表单元素值(一)

    千次阅读 2018-12-27 18:23:50
    JavaScript获取表单元素值 以下四方式均可获取,特别注意第三种,  var a=document.getElementById("id1");  var b=document.getElementsByName("na");  alert(id1.value);  alert(a....
  • 经常碰到需要控制表单元素输入的类型,然后每次总是百度,然后复制粘贴,特别浪费时间。 这里收集好方便直接使用。提供的方法非常简单使用直接嵌套在标签上使用,无需单独写js方法调用实现, 不能输入特殊字符 &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 190,287
精华内容 76,114
热门标签
关键字:

常用的表单元素有三种类型