form表单 ----在路上(15)

本文介绍了HTML表单的基本概念和使用方法,包括表单标签的属性、常见表单元素及其用途等。通过本文,读者可以了解到如何创建有效的表单来收集用户输入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

form

表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户。

基本格式:

<form action="" method =""></form>

action:表单提交的方向;

method:表单提交的类型;

注:其中为方便js找到 所以label用来为已经存在的标签解释说明  并通过for绑定表单id,也只能是id。具体如下:

<label for ="username"> 请输入姓名:</label>

<input id="username" type="text" name="为后台说明送的是什么" value =”默认值“ placeholder=”显示的是隐藏式的提示性文本“>

其中 type类型有以下几种:

password 密码;
submit 提交按钮;
reset重置;
checkbox 多选;如个人爱好
date 日期;
radio单选;如性别;
button:按钮;
search:搜索  回车可提交 
color:颜色
file选择文件:上传文件(详细请参考html中上传照片或文件)
所以表单中的所有内容都要写在form标签中,但input可以单独拿出使用

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/gengaiwei/p/6239063.html

### 创建基于 Vue 3 和 Element Plus 的 CRUD 组件 创建一个功能齐全的 CRUD (Create, Read, Update, Delete) 组件涉及多个方面,包括数据获取、表单处理以及状态管理。下面是一个详细的指南来构建这样的组件。 #### 使用组合 API 构建响应式逻辑 Vue 3 推出了 Composition API 来替代 Options API,在编写复杂业务逻辑时提供了更好的灵活性和可读性[^1]: ```javascript import { ref } from 'vue' // 定义初始数据结构 const items = ref([]) async function fetchItems() { const response = await fetch('/api/items') items.value = await response.json() } fetchItems() function addItem(item) { // 假设有一个 POST 请求用于新增项目 } function updateItem(id, updates) { // 更新特定 ID 对应的数据项 } function deleteItem(id) { // 删除指定 ID 的记录 } ``` #### 表格展示与分页支持 Element Plus 提供了丰富的 UI 组件库,其中 `el-table` 是用来显示表格化数据的理想选择。为了实现高效的页面加载体验,通常还需要加入分页控件: ```html <template> <div class="crud-container"> <!-- 数据列表 --> <el-table :data="items" style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column fixed="right" width="200px"> <template slot-scope="scope"> <el-button @click="editRow(scope.row)">Edit</el-button> <el-popconfirm title="Are you sure?" @onConfirm="deleteRow(scope.$index)"> <el-button type="danger">Delete</el-button> </el-popconfirm> </template> </el-table-column> </el-table> <!-- 分页器 --> <el-pagination layout="prev, pager, next" :total="totalCount"></el-pagination> <!-- 新增/编辑对话框 --> <el-dialog v-model="dialogVisible" title="Form Title"> <el-form :model="formModel"> <el-form-item label="Name"> <el-input v-model="formModel.name"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog()">Cancel</el-button> <el-button type="primary" @click="submitForm()">Submit</el-button> </span> </el-dialog> </div> </template> ``` #### 将操作封装成独立函数并优化用户体验 对于每一个基本的操作(增加、修改、删除),都应该定义相应的事件处理器,并考虑如何提升用户的交互感受。比如当执行成功后给出提示信息;失败情况下则捕获错误并向用户反馈具体原因。 通过上述方法可以有效地利用 Vue 3 及其生态系统中的工具和技术来开发高质量且易于维护的应用程序界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值