完成form表单的书写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单域标签</title>
	</head>
	<body>
		<p>
			常见的表单域标签学习:
			作用:收集用户数据
			使用:
			普通文本框:
			<input type="text" name="唯一标识符" id="唯一标识符" value="" />
			密码框:
			<input type="password" name="键名" id="键名" value="密码的唯一标识符" />
			单选框:
			<input type="radio" name="" id="" value="" checked="checked" />
			使用checked属性声明默认选择
			注意:只有在同一个组的单元框才会只能选择一个,那么属性值相同的单选框为一组
			做选框:
			<input type="checkbox" name="" id="" value="" />
			注意:一类多选框的name属性值必须一致。
			下拉框:
			<select name="">
				<option value="">
  • 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、付费专栏及课程。

余额充值