表单规范书写

表单元素规范:
一般表单由文字部分,和表单部分组成。文字部分用label标签,表单用input标签。
有时候,文字总是与label不在一条线上,或上或下。所以我们可以用vertical-align来调整文字上下位置。一般默认情况下,文字与表单的对齐是 vertical-align:baseline对齐的。当文字变小是例如,
font-size:12px vertical-align:-3px
font-size:14px vertical-align:-2px

  1. 关于textarea:
    ①固定大小,禁用拖动:在谷歌浏览器和火狐浏览器时,我们会发现文本区元素右下角会有一个小三角鼠标,可以拖一小三角可以放大这个多行文本框,但是在主流浏览器中,IE浏览器是没有这个功能的。所以一般为了破坏页面布局,一般都会静止或者使用这个拖拽功能,所以我们会设置固定大小或者禁止拖动:固定大小:min-width和min-height来定义textarea的最小宽度高度。max-width和max-height来定义textarea的最大宽度和高度。禁止拖动:用resize:none设置textarea

②在Chrome,Firefox和IE中实现相同的外观第一步:用css的width和height定义textarea的宽度和高度
第二步:用overflow:auto来定义textarea得滚动条自适应

  1. 关于表单对齐:
    每一行都是分为左栏和右栏,左栏一般包括文用label标签写的文字,右栏标签包括这一行里所有的input标签。

然后左栏盒子和右栏盒子都设置为左浮动

右栏盒子text-align设置为right,使文字右对齐

最重要的一点是,每一行中左栏长度和右栏所有盒子的总长度之和等于行宽,包括width padding border和margin。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Avue 中书写表单,一般需要以下几个步骤: 1. 引入 Avue 组件库和样式文件 ```javascript import Avue from 'avue'; import 'avue/lib/theme-chalk/index.css'; ``` 2. 定义表单数据对象 ```javascript data() { return { formData: { name: '', age: '', gender: '', hobbies: [], description: '' } }; }, ``` 3. 在模板中使用 Avue 的 `avue-form` 组件,并设置相应的属性 ```html <template> <avue-form :model="formData" :rules="formRules" :inline="false" :label-width="100" :status-icon="true" :show-message="true" :disabled="false" :hidden="false" :submit="handleSubmit" :reset="handleReset" > <!-- 表单项 --> </avue-form> </template> ``` 4. 在 `avue-form` 组件中书写表单项,如 `avue-input`、`avue-select` 等 ```html <avue-form-item prop="name" label="姓名"> <avue-input v-model="formData.name" placeholder="请输入姓名"></avue-input> </avue-form-item> <avue-form-item prop="age" label="年龄"> <avue-input v-model="formData.age" placeholder="请输入年龄"></avue-input> </avue-form-item> <avue-form-item prop="gender" label="性别"> <avue-select v-model="formData.gender" placeholder="请选择性别"> <avue-option value="male">男</avue-option> <avue-option value="female">女</avue-option> </avue-select> </avue-form-item> <avue-form-item prop="hobbies" label="爱好"> <avue-checkbox-group v-model="formData.hobbies"> <avue-checkbox label="music">音乐</avue-checkbox> <avue-checkbox label="sport">运动</avue-checkbox> <avue-checkbox label="reading">阅读</avue-checkbox> </avue-checkbox-group> </avue-form-item> <avue-form-item prop="description" label="个人描述"> <avue-textarea v-model="formData.description" placeholder="请输入个人描述"></avue-textarea> </avue-form-item> ``` 5. 定义表单验证规则 ```javascript data() { return { formRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ], gender: [ { required: true, message: '请选择性别', trigger: 'change' } ], hobbies: [ { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' } ], description: [ { required: true, message: '请输入个人描述', trigger: 'blur' }, { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' } ] } }; }, ``` 6. 定义表单提交和重置的方法 ```javascript methods: { handleSubmit() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过 console.log(this.formData); } else { // 表单验证失败 console.log('验证失败'); } }); }, handleReset() { this.$refs.form.resetFields(); } } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值