html表单申请表,html 表单表格.doc

html 表单表格

列表、表单、表格

HTML的剩余标签

1】列表标签:

有序列表: 每个列表项的前面都有个有序的序列号,这样列表

  1. 列表项内容
  2. 列表项内容
  3. 列表项内容

type:设置列表项序列号的样式

1: 1,2,3,4,5..

a: a,b,c,d,e....

A: A,B,C,D,E....

i: i,ii,iii,iv,v....

如果type的值不能被识别,那么列表序列号会显示为1,2,3,4,5……

Eg:list.html

无序列表: 每个列表项的前面都有一个特定符号,这样的列表

格式:

  • 列表项
  • 列表项
  • 列表项

Type:circle 空心圆

square: 方块

disc:实心圆(默认)

Eg:list.html

用户自定义列表: 每一组列表项都有一个小标题

衣服

裤子

衬衣

短袖

连衣裙

电器

电视机

冰箱

洗衣机

其他

拖鞋

工具书

桌椅

Eg:list.html

3】地图标签:用来设置图片中某个区域为热区域,供用户点击操作使用;

格式:

....

Usemap:声明将该图片作为一张地图使用

Name:将要对哪一张地图设置热区域

热区域:可供点击的区域范围

img的usemap一定要和map中的name相同

area:设置地图上一个热区域

shape:设置热区域的形状 circle圆 rect矩形 (ploy多边形)

href:点击热区域之后的链接地址

alt和title:鼠标放入到热区域内后的提示信息

coords:热区域的范围坐标(以图片的左上角为0,0开始计算)

(30,40,80,90)

circle: 圆心的x坐标,圆心的y坐标,圆半径(10,10,10)

rect: 左上角的x坐标,左上角的y坐标,右下角的x坐标,右下角的y坐标

target:点击链接后新页面的显示样式和a链接的target意义完全相同

注意:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。Table tr td

表头单元格

单元格单元格单元格单元格单元格单元格

.....

thead:表头标签可省略

tr:表格的行标签

th:表头的单元格标签

tbody:表格的主体标签可省略

td:普通的单元格标签

属性:

Width,height:设置宽度 (没有行宽)

1)按照具体的像素进行设

要在Vue项目中写一个word申请表样式的表单,可以按照以下步骤进行操作: 1. 安装element-ui组件库,用于快速构建表单界面。 ``` npm install element-ui --save ``` 2. 在Vue组件中引入element-ui组件库。 ```vue <template> <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="申请人"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="申请类型"> <el-select v-model="form.type" placeholder="请选择"> <el-option label="请假申请" value="leave"></el-option> <el-option label="加班申请" value="overtime"></el-option> <el-option label="报销申请" value="expense"></el-option> </el-select> </el-form-item> <el-form-item label="申请事由"> <el-input type="textarea" v-model="form.reason"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> <el-button @click="resetForm('form')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', type: '', reason: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 提交表单 } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script> ``` 3. 根据申请表样式,使用CSS样式对表单进行美化。 ```css .el-form { max-width: 800px; margin: 0 auto; padding: 50px; border: 1px solid #ccc; } .el-form-item__label { font-weight: bold; margin-right: 20px; } .el-form-item__content { margin-bottom: 20px; } .el-input { width: 400px; } .el-select { width: 400px; } .el-textarea { width: 400px; } .el-button { margin-right: 20px; } ``` 4. 在提交表单时,可以使用第三方库如docxtemplater生成Word文档。 ```javascript // 安装docxtemplater npm install docxtemplater --save // 在Vue组件中引入docxtemplater import Docxtemplater from 'docxtemplater'; import JSZip from 'jszip'; // 定义申请表模板 const template = fs.readFileSync('./templates/application.docx', 'binary'); // 在提交表单时生成Word文档 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 生成Word文档 const zip = new JSZip(template); const doc = new Docxtemplater().loadZip(zip); doc.setData({ name: this.form.name, type: this.form.type, reason: this.form.reason }); doc.render(); const output = doc.getZip().generate({ type: 'blob' }); saveAs(output, 'application.docx'); } else { console.log('error submit!!'); return false; } }); } ``` 注意事项: - 在构建表单界面时,要根据申请表样式进行设计,包括布局、字体、颜色等等。 - 在提交表单时,要对表单数据进行验证,确保数据的准确性和完整性。 - 在生成Word文档时,要注意文档模板的格式和内容,确保生成的文档与申请表样式一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值