精华内容
下载资源
问答
  • AVUE-CRUD系列常用表单属性

    千次阅读 2021-03-19 14:48:32
    表格属性 width: “100%”,//表格宽度 calcHeight: “auto”,//表格高度差(主要用于减去其他部分让表格高度自适应) height: “auto”,//表格高度 maxHeight: “auto”,//表格最大高度 border: true,//是否显示表格...

    表格属性
    width: “100%”,//表格宽度
    calcHeight: “auto”,//表格高度差(主要用于减去其他部分让表格高度自适应)
    height: “auto”,//表格高度
    maxHeight: “auto”,//表格最大高度
    border: true,//是否显示表格边框
    expand: false,//是否展开折叠行
    index: false,//是否显示表格序号(根据分页会自动计算,比如每页10行,到了第二页就会从11开始记数)
    indexLabel: “#”,//序号的标题
    stripe: true,//是否显示表格的斑马条纹
    showHeader: true,//是否显示表格的表头
    defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’} prop默认排序字段,order排序方式
    align: “center”,//表格列对其方式left/center/right
    menu: true,//是否显示操作菜单栏
    menuWidth: 240,//操作菜单栏的宽度
    menuAlign: “left”,//菜单栏对齐方式left/center/right
    searchSize: “small”,//搜索控件的大小small/mini
    columnBtn: true,//列显隐按钮
    refreshBtn: true,//刷新按钮
    addBtn: true,//添加按钮
    searchBtn: true,//搜索显隐按钮(当column中有搜索的属性,或则searchslot为true时自定义搜索启动起作用)
    editBtn: true,//行内编辑按钮
    delBtn: true,//行能删除按钮
    列属性
    label:“租户ID”,//列名称
    prop:“id”,//列字段
    placeholder:“请输入租户ID”,//控件提示输入语句
    align:“left”,//列的对其方式,覆盖table的align
    width://列宽度
    minWidth:“auto”,//列最小宽度
    sortable:false,//排序
    hide:true,//隐藏列 表格起作用
    span:12,//表单栅列
    precision:2,//数字框输入精度(当type为number时)
    search:false,//是否支持搜索
    maxRows:4,//最大行(当type为textarea)
    minRows:2,//最小行(当type为textarea)
    multiple:false,多选(当type为select/tree时)
    format:"",//显示值时间格式
    valueFormat:"",//真实值的时间格式
    clearable:true,//表单清空
    size:“medium”,//表单大小medium/small/mini
    editDisabled:false,//表单编辑时是否禁止
    editDisplay:false,//表单编辑是否可见
    addDisabled:false,//表单编辑时是否禁止
    addDisplay:false,//表单编辑是否可见
    slot:false,//列自定义 支持自定义列
    formslot:false,//表单自定义
    fixed:true,//冻结列
    formWidth:“auto”,//表单宽度
    formHeight:“auto”,//表单行高度
    overHidden:false,//超出隐藏
    rules://表单规则,参考ele表单规则配置Object
    dicData://传入本次需要的静态字典(在column中dicData写对象key值即可加载)
    dicMethod://传入字典的请求方式
    dicQuery://传入字典的请求参数Object
    dicUrl://字典的网络请求接口(例如配置/xxx/xx/{{key}},这样的格式,在column中dicData自动匹配prop字段名)

    展开全文
  • HTML5新增表单属性

    千次阅读 2018-05-13 11:00:22
    1. placeholder 属性 当用户还没有输入值的时候,输入型控件可以通过 placeholder 属性向用户显示描性说明或者提示信息。使用 placeholder属性只需要将说明性文字作为该属性值即可。除了普遍的文本输入框外,...

        1.   placeholder 属性

        当用户还没有输入值的时候,输入型控件可以通过  placeholder 属性向用户显示描性说明或者提示信息。使用  placeholder属性只需要将说明性文字作为该属性值即可。除了普遍的文本输入框外,email、number、url 等其他类型的输人框也都支持placeholder 属性。

        placeholder 属件的使用方法如下:

       <label> text::  <input  type="text"   placeholder="write  me"></label>

        2、autocomplete 属性

         浏览器通过  autocomplete  属性能够知晓是否应该保存输入值以备将来使用。例如不保存的代码如下:

        <input  type="text"   name="mr"  autocomplete="off"/>

        autocomplete  属性应该用来保护敏感用户数据,避免本地测览器对它们进行不安全地存储。对于  autocomplete 属性,可以指定“on”“off " 与““(不指定) 这三种值。不指定时,使用浏览器的默认值(取决于浏览器的决定)。把该属性值设为on 时,可以显示指定候补输入的数据列表。

        使用  <detailst>标签与  list 属性提供候补输入的数据表,自动完成时,可以将该 <detalist> 标签中的数据作为候补输人的数据在文本框中自动显示。autocomplete 属性的使用方法如下所示:

        <input  type="text"   name="mr"  autocomplete="on"  list="mrs"/>


          3. autofocus 属性

        给文本框、选择框或按钮控件加上该属性,当画面打开时,该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript,  autofocus 属当的使用方法如下所示:

        <input  type="text"  autofocus>   

         只有当一个页面是以使用某个控件为主要目的时,才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

         从实际角度来说,不要随便滥用该属性。

        4.  list 属性

        在 HTML5  中,单行文本框增加了一个  list 属性,该属性的值为某个  <datalist>标签的  id。<datalist>标签也是  HTML5中新增标签,该标签类似于选择框( select ),但是当用户想要设置的值不在选择列表之内时,允许其自行输入。该标签本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。

        为了避免在没有支持该标签的浏览器上出现显示错误,可以用 CSS 等将它设定为不显示。list 属性的使用方法如下代码。

     

    <!doctype  html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>我的网页</title>
    </head>
    <body>
    text: <input type="text" name="mr" list="mr">
    <!--使用style="display: none"datalist标签设定为不显示-->
    <datalist id="greetings" style="display: none" >
        <option value="123">123</option>
        <option value="456">456</option>
        <option value="789">789</option>
    </datalist>
    </body>
    </html>

    【说明】目前只有  Opera 10  浏览器支持  list  属性

     5.  min  和  max 属性

      通过设置 min 和 max 属性,可以将  range  输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个,也可以两个都设置,当然还可以都不设置,输入型控件会根据设置的参数对值范围做出相应调整。

    【例】创建一个表示型大小的 range 控件,值的范围为 0%~100%,代码如下:

      <input  id="confidence"  name="mr"   type="range" min="o"  max="100"   value="0">

      上述代码会创建一个最小值为0、最大值为100 的 range 控件。

      默认的 min 为 0,max 为 100。

     

     6.step 属性

        对于输入型控件,设置其  step 特性能够制定输入值递增或递减的梯度。

        例如,按如下方式表示型大小  range 控件的 step 属性设置为 5:

        <input   id="confidence"    name="mr"   type="range"   min="0"  max="100"  step="5"  value="0">
       设置完成后,控件可接受的输入值只能是初始值与 5 的倍数之和。也就是说只能输入0、5、10   …  100, 至于是输入框还是滑动条输人则由浏览器决定。

      step属性的默认值取决于控件的类型,对于range 控件,step默认值为1。

      7.  required 属性

        一旦为某输入型控件设置了 required 属性,那么此项必镇,否则无法提交表单。

        以文本输入框为例,要将其设置为必填项,按照如下方式添加 required  属性即可。

        <input  type="text"  id="firtname"  name="mr' reaquired>

        required  属性是最简单的一种表单验证方式。

    8. email 输入类型

        email  类型的<input>标签是一种专门用来输人  email  地址的文本框。提交时如果该文本框中内容不是  email  地址格式的文字则不允许提交,但是它并不检查  email  地址是否存在。和所有的输入类型一样用户可能提交带有空字段的表单,除非该字段加上了  required  属性。

        email  类型的文本框具有  multiple 属性,它允许在该文本框中输入一串以逗号隔开的有效  email  地址。当然,这不是要求用户使用该  email  地址列表,浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。    

         email  类型的  <input>标签的使用方法如下:
        <input  type= "email"   name="email"  value="1530738736@qq.com"/>

    9. url输入类型

        url  类型的<input>标签是一种专门用来输人  url  地址的文本框。提交时如果该文本框中内容不是  url  地址格式的文字,则不允许提交。
        
         url  类型的<input>标签的使用方法如下:
        <input  name="url" type="url"  value="http://www.baidu.com"/>

    10. date类型

         date  类型的 input  标签以日历的形式方便用户输人。
         
         Date类型的<input>标签的使用方法如下:
      <input   name="date1"   type="date"   value="2012 09-25"/>

    11. time类型

        time  类现的<input>标签是一种专门用来输入时间的文本框, 并且在提交时会对输入时间的有效性进行检查。

         time 类型的  <input>  标签的使用方法如下:
        <input   name="time1"   type="time"   value="10:00"/>

    12. datetime 输入类型

        datetime  类型的  input  标签是一种专门用来输入  UTC  日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。

         datetime  类型的  input  标签的使用方法如下:
        <input name="datetime1"   type="datetime"  />

    13.   datetime-local  输入类型

        datetime-local  类型的  input  标签是一种专门用来输入本地日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。

         datetime-local 类型的<input> 标签的使用方法如下:
       <input  name="datetime-local"    type="datetime-local"/>

    14.   month输入类型

        month  类型的<input>标签是一种专门用来输人月份的文本框, 并且在提交时会对输入的月份的有效性进行检查。
        
         month类型的<input>标签的使用方法如下:
        <input   name="moth1"  type="month"   Value="2012-09"/>

    15.   week输入类型

        week  类型的  <input>  标签是一种专门用来输入周号的文本框,并且在提交时会对输入的周号有效性进行检查。它可能是个简单的输入文本框, 允许用户输入一个数字;也可能更复杂。更精确。
     
         week 类型的<input>标签的使用方法如下:
        <input   name="week1"    type="week"   value="2012-w39"/>

     16.  number输入类型

        number 类型的<input>标签是一种专门用来输入数字的文本框,并且在提交时会检查其中的内容是否为数字。它与 min、 max、 step 属性能很好地协作。

        number  类型的  <input> 标签的使用方法如下:
       <input   name="number1"   type="number"   value="54"  min="10"  max="100"  step="5"  />

    17. range输入类型

        range  类型的  <input>  标签是一种只允许输入一段范围内数值的文本框,它具有  min  属性与  max  属性,可以设定最小值与最大值(默认为0与100),它还具有step属性,可以指定每次拖动的步幅。

        range 类型的  <input>  标签的使用方法如下:
        <input   nam="range1"    type="range"     value="25"  min="0"  max="100"  step="5"/> 

    18. search  输入类型

        search  类型的  <input> 标签是一种专门用来输入搜素关键词的文本核。search类型与  text  类型仅仅在外现上有区别。
        
        可用  css  样式表对文本框外观改写,如下所示:
        input  [type="search"]  { -webkit-appearance:textfield;}
     

      19. tel  输入类型

        tel  类型的<input>标签被设计为用来输入电话号码的专用文本标。它没有特殊的校验规则,它甚至不强调只输入数字,因为很多电话号码常常带有额外的字符,例如 12-89564752  但是在实际开发中可以通过  pattern  属性来指定对于输入的电话号码格式的验证。

      20. color输入类型

        color  类型的 <input>标签用来选取颜色,它提供了一个原色选取器。现在,它只在Black Berry 浏览器中被支持。


    展开全文
  • html5篇——新增表单元素和表单属性

    万次阅读 多人点赞 2016-03-08 12:52:13
    这一篇介绍html5新增的表单元素和表单属性。 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素...

    这一篇介绍html5新增的表单元素和表单属性。

    首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素增加一个form属性,form属性的值为form表单的id,如下:

    <form method="get" id="test">
          <input type="text" name="name"/>
          <input type="password" name="password"/>
          <input type="submit" value="提交">
     </form>
    <input type="text" name="confirm" form="test">
    
    
    在form元素里面的表单元素可以不用添加form属性,如果你想利用form获取所有表单元素的值,那么在form元素外面的表单元素就必须添加form属性,input、select、textarea等元素都满足该功能。

    接下来开始介绍html5新增的表单元素,所有例子均用谷歌浏览器展示。

    新增表单元素

    email:提交表单的时候验证输入值是否满足email的格式

     <input type="email" name="email"/>

    url:提交表单的时候验证输入值是否满足url的格式

    <input type="url" name="url"/>

    number:根据你的设置提供选择数字的功能,其中min为最小值,max为最大值,value为默认值,step为点击箭头时数字的变化量,max、min、step、value均可不写,目前某些浏览器还不支持。

    <input type="number" name="number" min=2 max=100 step=5 value="15"/>

    range:会以一个滑块的形式表现包含一定范围内数字值的输入域,max为最大值,min为最小值,value为默认值,如果没有设置max和min,默认值是1-100

    <input type="range" name="range" min=20 max=200 value="60"/>

    日期和时间类型:

    date:选取日、月、年

    <input type="date" name="date"/>

    month:选取月、年

    <input type="month" name="month"/>

    week:选取周、年

     <input type="week" name="week"/>

    time:选取小时、分钟

    <input type="time" name="time"/>

    datetime:选取时间、日、月、年(UTC时间)(我这里浏览器显示不出效果)

    <input type="datetime" name="datetime"/>

    datetime-local:选取时间、日、月、年(本地时间)

    <input type="datetime-local" name="datetime-local"/>


    search:用于搜索域,若加上result="s"属性,则会在搜索框前面加一个搜索图标(我这里浏览器显示不出效果)

    <input type="search" name="search" result="s"/>

    tel:验证输入的是否是电话号码的格式(我这里浏览器显示不出效果)

    <input type="tel" name="tel" />

    color:color类型会提供颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

    <input type="color" name="color"/>


    新增input属性(部分容易理解的就不进行代码演示了),后面为支持该属性的元素

    autofocus:在打开页面时使元素自动获取焦点                                             //input,button,select,textarea

    placeholder: 在用户输入时进行提示                                                                // input,textarea

    form:这篇文章的开头就有这个属性,它用于表明元素属于哪个表单,无论元素的位置在哪里,所属表单都能获取该元素的值                              //input,output,button,select,textarea,fieldset  

    required:表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空          //input,textarea

    max/min/step:限制值的输入范围,以及值的变化程度。上面的新增number元素有介绍。        //input

    autocomplete:使form元素或者input元素拥有自动完成功能,既记录用户之前输入的值,关闭为off,默认为on。                            //form,input

    表单重写属性:                      //input

    formaction:重写表单的action属性     

    formenctype:重写表单的enctype属性。

    enctype属性管理的是表单的MIME编码,MIME就是一种电子邮件传输的互联网标准,表明传递的信息类型和编码,共有三个值可选:

    1,application/x-www-form-urlencoded(默认),设置表单传输的编码。

    2,multipart/form-data,指定传输数据的特殊类型,主要就是上传的非文本内容,比如文件、图片。

    3,text/plain,纯文本传输。

    formmethod: 重写表单的method属性

    formnovalidate:重写表单的novalidate属性

    formtarget:重写表单的target属性。

    比如:

    <form action="test.html" method="get" autocomplete="on">
    
            姓名: <input type="text" name="name" /><br />
    
            密码: <input type="password" name="pwd" /><br />
    
            <input type="submit" formnovalidate="true" value="提交未经验证"/>
          </form>

    multiple:规定输入字段可选择多个值                    //input,select

    list:list属性的值为datalist元素的id,datalist元素类似于选择框,在文本框获得焦点的时候以提示输入的方式显示。如下: 

     姓名:<input type="text" name="name" list="name"/>
          <datalist id="name" >
            <option value="zhangsan">张三</option>
            <option value="lisi">李四</option>
            <option value-"wanger">王二</option>
          </datalist>


    pattern:验证input输入域的格式,即正则表达式。

    <input type="text" name="name" pattern="[A-z0-9]{8}"/>

    展开全文
  • Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { spa...

    formLayout 不起作用

    Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应:

    	// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal',
    	const formLayout = {
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
              }
      --------------------------------------------------------------------------        
    		<Form layout="horizontal" {...formLayout }>
    			<Row>
    				<Col span={6}>
    					<Form.Item label="xxx">
    						<Select>
    							....
    						</Select>
    					</Form.Item>
    				</Col>
    				<Col span={6}>
    					<Form.Item label="xxx">
    							<Select>
    								....
    							</Select>
    						</Form.Item>
    				</Col>
                </Row>
    		</Form>
    		
    	//方法2 给 Form.Item 手动设置宽度
    	<Form layout="inline" {...formLayout }>
    					<Form.Item label="xxx" style={{width:'25%'}}> //百分比
    						<Select>
    							....
    						</Select>
    					</Form.Item>
    					<Form.Item label="xxx" style={{width:'200px'}}>// 固定宽度
    							<Select>
    								....
    							</Select>
    						</Form.Item>
    		</Form>
    
    展开全文
  • form表单属性

    千次阅读 2019-11-21 17:37:00
    form表单HTML标签、属性属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是表单的标签,所有的需要写在...
  • 二、新增表单属性 1、multiple属性:规定文本框中可以包含多个值(email、file) -多个值之间用逗号隔开 -该属性可以不设置属性值 2、autofocus 自动获取焦点,可以不设置属性值 注意,一个表单中,只会设置一...
  • HTML5 表单属性

    千次阅读 2016-06-28 20:15:30
    1、HTML5 新的表单属性 HTML5 的 和 标签添加了几个新属性.  新属性:autocomplete、novalidate  新属性:autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、...
  • js取form对象方法,表单属性和方法

    千次阅读 2014-08-18 16:04:20
    获取表单对象方法一、var form = document.forms['myform'];  得到表单的值:var usrname = form.elements['usrname'].value     ...表单属性和方法:1.action 2.elements 3.enctype 4.leng
  • form即为表单,是一个专门让用户输入数据或者选择的一个...表单form内属性1.1 action属性 action是表单提交的地址,是一个必须的属性,他规定当提交表单时,向何处发送表单数据。 1.格式:`<form action="value">` 2
  • HTML表单标签及表单标签属性

    千次阅读 2020-01-11 19:19:17
    表单标签以及属性介绍 属性介绍: form标签属性 action:请求路径。 method:请求方式。 get:默认值 提交的数据追加在请求路径上。数据格式k/v,追加是使用?连接之后每一对数据使用&连接。 因为请...
  • jQuery 表单对象属性

    千次阅读 2018-09-09 00:00:00
    jQuery有着非常丰富的DOM元素操作方法,在DOM元素中,表单元素尤为突出,在jQuery库中与表单DOM元素相关的方法是占有非常大的比例,可见一斑!接下来的文章中,将是都介绍与表单DOM元素相关的方法。 本篇文章,介绍...
  • 可以设置表单或者input元素,有两个属性值,当设置为on时,启动该功能;当设置off时,关闭该功能。启用该功能后,当用户在自动完成域开始输入时,浏览器就会在该域中显示填写的选项。用户每提交一次,就会增加一个...
  • form表单属性action的值特性

    千次阅读 2018-10-14 12:27:42
    时,表示表单会提交到当前页面,但是如果当前页面的URL里已经带有一个参数了,每次提交表达时这个参数依然存在,不管form表单里有没有提交该参数。 例如: &lt;%@ page language="java" import=&...
  • 今天学了H5新增的表单属性,知道如何用新增的那些属性(如form、placeholder)制作一个建议的登陆界面。界面如下: 源代码如下: &lt;html&gt; &lt;head&gt; &lt;head&gt; &lt;...
  • H5新增的实用表单属性

    千次阅读 2020-07-14 16:06:23
    没错啊,这不是指标签,这是表单元素的一个属性,值是引用所属表单的 id,多个则用空格分割 输入框的快速选项 你猜我用vue方便阅读维护又好看的,还是用丑陋但是性能好的呢? <input list="list" name="link" />...
  • form表单元素及其属性

    千次阅读 多人点赞 2017-10-28 13:36:00
    form元素及其属性代码
  • 文件上传的基本操作之表单属性enctype的设置 multipart/form-data和application/x-www-form-urlencoded的区别   FORM元素的enctype属性指定了表单数据向服务器提交时所采用的编码类型,默认的缺省值是...
  • html5 表单的required属性

    千次阅读 2021-06-03 21:57:34
    html5 表单的required属性 描述 今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性 定义和用法 required 属性是一个布尔属性 required 属性规定必需在提交之前填写输入字段。 ...
  • 表单标签基本属性

    千次阅读 2017-12-22 15:40:02
    表单区域是由来定义的 首先来看一段代码: ...标签的属性常用的有: ...该属性表明该表单的发送方式是get(从服务器获取数据)还是post(向服务器传送数据);...该属性表明表单的数据发送给谁,就
  • HTML5 新的表单属性 HTML5 的 和 标签添加了几个新属性. 新属性: autocomplete novalidate 新属性: autocomplete autofocus form formaction formenctype formmethod formnovalidate ...
  • form表单HTML5、CSS3标签及属性属性值 form表单HTML标签、属性属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选...
  • FORM表单及其属性

    千次阅读 2017-04-07 18:08:39
    head> meta charset="UTF-8"> h1 style="text-align: center">表单formh1> title>css常用选择器title> head> body> form action="contact04.html" method="get" id="ddl"> 用来指定数据要提交
  • 1."ShowWindow"是规定表单在"显示方面的从属关系"的属性 ShowWindow属性实际上仅有两种选择:"作为顶层表单"与"在顶层表单中"。为了表达方便,我们把具有前者属性值的表单称为"顶层表单",后者称为"从属表单"。二者...
  • 今天做一个简单的商城项目的时候碰到了一个问题,将前台...查了资料发现,使用了multipart/form-data之后,表单数据都是二进制传输的,request不能识别到,那么只能使用fileitem的isFormFiled方法判断是表单中的数据之...
  • form表单中几种属性

    千次阅读 2019-05-02 09:38:07
    表单的主要功能是收集信息,一般分两部分:1.体现表单元素的HTML代码;2.客户端脚本 ,或是服务器用来处理用户所填写信息的程序。 action就是你表单要提交的地址。地址可以是请求后台的地址,如Servlet,Struts 等...
  • $('#querylist').bootstrap Table({  columns: [{  checkbox: true  }, {  field: 'id',  title: 'ID',  visible: false  },{  title: '序号',  formatt
  • 计算数据属性(官网称呼),又叫动态数据绑定(相对于静态数据绑定而言).可以在dom渲染之前修改数据.按照官网的解释,计算数据属性是为了简化...今天简单实现一下表单的校验.原理逻辑都差不多.  初学者需注意:   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 465,820
精华内容 186,328
关键字:

表单属性