组件或者css Input 输入框高度调节

Input 输入框高度调节不换行

css片段 #height{height: 80px;}

效果图(height: 80px;)

          <el-form-item label="Description" label-width="100px">
           <el-input type="textarea" :rows="4" v-model="EventDescription" autocomplete="off"></el-input>
          </el-form-item>

--------------------------------------------------------------------分割线----------------------------------------------------

Input 输入框高度调节可换行

          <el-form-item label="Description" label-width="100px">
           <el-input type="textarea" :rows="4" v-model="EventDescription" autocomplete="off"></el-input>
          </el-form-item>
效果图(type="textarea" :rows="4")

input输入框maxlength用法:

type修改为tel才能使用maxlength和minlength   number类型不能设置最短最长位数

1、text 一个单行文本框,默认属性值 
2、password 隐藏字符的密码框 
3、search 搜索框,在某些浏览器中输入内容会出现叉形标记 
4、submit、reset、button 依次是:提交按钮、重置按钮、普通按钮 
5、number、range 依次是:只能输入数值的框、只能输入在一个指定范围的数值框 
6、checkbox、radio 依次是:复选框,一组复选框(name属性值相同)用户可以勾选多个、单选按钮,一组单选按钮(name属性值相同)用户只可以选中一个 
7、image、color 依次是:图片按钮、颜色代码按钮 
8、email、tel、url 依次是:检测电子邮件、号码、网址的文本框 
9、hidden 生成一个隐藏控件 
10、file 生成一个上传控件 
11、获取各种日期、时间 data、month、time、week、datetime、datatime-local

1、type=”text” 
1.1)、list 指定为文本框提供建议值的 datalist 元素,其值为datalist 元素的 id 值 
1.2)、maxlength 设置文本最大字符长度 
1.3)、pattern 用于输入验证的正则表达式 
1.4)、placeholder 输入提示的文本,当用户输入内容时会自动消失 
1.5)、readonly 文本框处于只读状态 
1.6)、disabled 文本框处于禁用状态 
1.7)、size 设置文本框宽度 
1.8)、value 设置文本框初始值,会显示在文本框中,显示时优先级比placeholder高,表单提交时优先提交用户输入的内容,如果用户没有输入则提交默认的值 
1.9)、required 表示用户必须输入一个值,否则无法通过输入验证

2、type=”password”,和type=”text”时所拥的额外属性基本一致,少了一个list属性

3、type=”search” , 和type=”text”所有用的额外属性值一致

4、当type为submit、reset、button,提交表单、重置表单、普通按钮 
4.1)、如果是 submit 时,还提供了和元素一样的额外属性:formaction、formenctype、formmethod、formtarget 和 formnovalidate。

5、当type为number、range时 
5.1)、type=”number” 只能输入数字的文本框 
5.2)、type=”range” 生成一个通过拖拽调节大小的调节器 
额外属性: 
5.3)、min 设置可接受的最小值 
5.4)、max 设定可接受的最大值 
5.5)、value 指定初始值 
5.6)、step 指定上下调节值的步长 
5.7)、required 表明用户必须输入一个值,否则无法通过输入验证 
5.8)、readonly 设置文本框内容只读

6、当type为checkbox、radio 
6.1)、不管type等于checkbox还是radio,都必须有属性name和value 
6.2)、他们还有可选属性checked、required 
PS:复选框和单选按钮都是以一组一组的形式存在,name值相同的即为一组,一组复选框可以同时选中几个,而一组单选按钮同时只能选中一个

7、当type为image、color 
7.1)、当type=”image”时,功能上和type=”submit”一样,前者是用图片作为按钮,当然后者也可以达到同样的效果 
额外属性: 
7.2)、src 指定要显示图像的 URL 
7.3)、alt 提供图片的文字说明,当图片找不到时显示该文字 
7.4)、width 图像的长度,注意这是标签属性,而不是样式属性 
7.5)、height 图片的高度,注意事项如上 
7.6)、提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate。

8、当type为email、tel、url 
8.1)、email 为电子邮件格式 
8.2)、tel 为电话格式 
8.3)、url 为网址格式 
8.4)、额外属性和 text一致。但对于这几种类型,浏览器支持是不同的。email 支持比较好,现在浏览器都支持格式验证;tel 基本不支持;url 支持一般,部分浏览器只要检测到 http://就能通过。

9、type=”hidden” 
9.1)、生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交,而这个数据作为隐藏存在

10、type=”file” 
10.1)、生成一个文件上传控件,用于文件的上传。 
额外属性: 
10.2)、required 表明用户必须提供一个值,否则无法通过验证 
10.3)、accept 指定接收的MIME类型 例如:accept=”image/gif, image/jpeg, image/png” 

《1》上传.csv格式的   <input text="file" accept=".csv" />

《2》上传.xls格式   <input text="file"  accept="application/vnd.ms-excel"/>

《3》上传.xslx格式   <input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

《4》上传.png/.jpg/etc格式   <input type="file" accept="text/plain" />

《5》上传图片格式   <input type="file" accept="image/*" />

《6》上传.htm,.html格式   <input type="file" accept="text/html" />

《7》上传video(.avi, .mpg, .mpeg, .mp4)格式   <input type="file" accept="video/*" />

《8》上传audio(.mp3, .wav, etc)格式   <input type="file" accept="audio/*" />

《9》上传.pdf格式   <input type="file" accept=".pdf" />

《10》如果限制两种文件格式,同时限制   ,<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">


PS:当需要上传文件时,form标签的enctype属性必须设置为multipart/form-data

11、当type为data、month、time、week、datetime、datatime-local,因为各种原因还是用jquery等前端库写吧!!!

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值