表单样式

合集下载

常用的表格式

常用的表格式

常用的表格式
以下是一些常用的表格样式:
1. 普通表格:这是一种简单的表格,每个单元格之间没有额外的装饰,通常用于展示数据。

2. 细线表格:这种表格在普通表格的基础上添加了细线,使得表格看起来更加清晰,数据更加容易阅读。

3. 立式表格:这种表格在单元格的上下两侧添加了边框,使得表格看起来更加立体。

4. 立体表格:这种表格在普通表格的基础上添加了阴影或颜色渐变效果,使得表格看起来更加立体和有层次感。

5. 细线立体表格:这种表格结合了细线表格和立体表格的特点,既有细线效果又有立体感。

6. 徽章式表格:这种表格通常用于展示荣誉或成就,每个单元格都像一个小徽章,有很强的视觉冲击力。

7. 斜线表格:这种表格在每个单元格中添加了一条斜线,使得表格看起来
更加活泼和动态。

8. 图片表格:这种表格通常用于展示图片和文字信息,每个单元格中都可以放置一张图片和文字,具有很强的视觉冲击力。

这些只是常用的表格样式,实际上还有很多其他的样式,可以根据需要进行选择和调整。

Web表单的几种样式

Web表单的几种样式

Web表单的几种样式适于表现表单的表单元素Xhtml中提供了一些有用的元素用来在表单中增加结构和定义,它们是fieldset,legend 和label。

Fieldset用来给相关的信息块进行分组,它在表现上类似于Swing中的border和VS中的frame。

Legend用来标识fieldset的用户,它相当于border的标题文字。

Label元素可以用来帮助添加结构和增加表单的可访问性,它用来在表单元素中添加有意义的描述性标签。

fieldset,legend和label的例图页面代码<form method=post action="#" onsubmit="return checkForm()"><table width=200 bgcolor="#f8f8f8"><tr><td><fieldset><legend>用户注册</legend><p><label for="name">用户名:</label><input type="text" name="name"value="" /></p><p><label for="pswd">密码:</label><input type="text" name="pswd"value="" /></p><p><label for="pswd">再次输入密码:</label><input type="text"name="pswd2"value="" /></p><p><input type="button"value="注册"/></p></fieldset></td></tr></table></form>未加样式的效果样式表中的设定fieldset{margin:1em 0;padding:1em;border:1px solid #ccc;background:#f8f8f8;}legend{font-weight:bold;}label{display:block;}其中值得注意的是label的display属性设置为了block。

react form表单 样式

react form表单 样式

React Form表单样式在Web开发中,表单是非常常见的组件之一。

React作为一种流行的前端框架,提供了方便易用的方式来创建和管理表单。

本文将介绍如何使用React来创建具有样式的表单。

1. 创建一个基本的React表单组件首先,我们需要创建一个基本的React组件来承载我们的表单。

可以使用create-react-app等工具来快速创建一个新项目,并在其中创建一个名为Form.js的文件。

import React, { useState } from 'react';const Form = () => {const [formData, setFormData] = useState({}); // 用于存储表单数据的状态const handleInputChange = (e) => {setFormData({...formData,[]: e.target.value,});};const handleSubmit = (e) => {e.preventDefault();// 在这里处理提交逻辑};return (<form onSubmit={handleSubmit}><label htmlFor="name">姓名:</label><inputtype="text"id="name"name="name"value={ || ''}onChange={handleInputChange}/><label htmlFor="email">邮箱:</label><inputtype="email"id="email"name="email"value={formData.email || ''}onChange={handleInputChange}/><button type="submit">提交</button></form>);};export default Form;上述代码中,我们使用了React函数式组件和Hooks来管理表单数据的状态。

el-form复杂表单样式

el-form复杂表单样式

el-form复杂表单样式
复杂表单样式通常涉及到多个输入字段、标签、布局和样式。

在Vue.js中,可以使用Element UI库中的el-form组件来实现复
杂表单样式。

首先,需要引入Element UI库,并在Vue组件中引入
el-form组件。

然后,可以根据需要设置表单的布局、样式和验证
规则。

在设置复杂表单样式时,可以考虑以下几个方面:
1. 布局,使用el-form的布局属性进行灵活的布局设置,如inline、label-position、label-width等属性来控制表单元素的
排列方式和标签的位置。

2. 表单元素,使用el-input、el-select、el-radio、el-checkbox等表单元素来收集用户输入的数据,根据不同的需求选择
合适的表单元素。

3. 样式定制,通过自定义CSS样式或者Element UI提供的样
式类来定制表单的外观,包括表单元素的大小、颜色、边框等样式。

4. 表单验证,使用el-form的rules属性来设置表单的验证规则,通过自定义验证函数或者使用内置的验证规则来确保用户输入的数据符合要求。

5. 动态表单,根据需要使用v-for指令动态生成表单元素,例如根据后台数据动态渲染表单字段。

总的来说,实现复杂表单样式需要综合考虑布局、表单元素、样式定制、表单验证和动态表单等多个方面,结合Element UI提供的丰富组件和功能,可以轻松实现多样化的复杂表单样式。

希望这些建议对你有所帮助。

table 常用表格 样式

table 常用表格 样式

table 常用表格样式英文回答:Tables are a common way to present information in a structured format. There are several common table stylesthat are often used in articles, reports, and presentations.1. Basic Grid Style: This is the most common table style, with a simple grid of rows and columns. It is easyto read and understand, making it a popular choice for many types of data.2. Zebra Striping: This style involves shading every other row in a different color, such as light gray. Thiscan help the reader's eyes track across the table more easily, especially for large tables with lots of data.3. Highlighting: Sometimes, specific cells or rows in a table need to be highlighted to draw attention to important information. This can be done using a different backgroundcolor or bold text.4. Horizontal Lines Only: In this style, onlyhorizontal lines are used to separate rows, while vertical lines are omitted. This can give the table a cleaner and more modern look.5. Vertical Lines Only: Conversely, some tables use only vertical lines to separate columns, while omitting horizontal lines. This style can also give the table a clean and minimalist appearance.6. Merged Cells: Tables with merged cells are often used to create a more complex layout, such as for a schedule or calendar. Merging cells allows for more flexibility in how the information is presented.7. Card Style: This modern style presents each row of the table as a "card," with a border and shadow to create a more visually appealing design.Now, let's switch to Chinese for the second part of theanswer.中文回答:表格是一种常见的以结构化格式呈现信息的方式。

表单设计范例(一)

表单设计范例(一)

表单设计范例(一)一、简单的信息显示界面的设计例6.1 设计一个信息行(显示的是当前的系统时间)可以在表单的高度范围(顶部与底部)之间动态上下平等移动的界面。

P285特点:1表单上任何的控件对象只用于显示某种信息,无需用户做任何操作2显示的信息可以是静态的,也可以是动态的主要涉及到的例题有:时钟,文字形状的缩放移动二、交互对话界面的设计特点:1一般都会有文本框和按钮这两类控件,如果问题复杂点还有可能包含复选框,选项组,按钮组,微调控件等一切需要鼠标单击或键盘输入的控件2强调“交互”,即交流对话,也就是用户作一个输入或单击,系统则给出相应的反应主要涉及到的命题:口令登录问题,计算类问题(求圆面积,求三角形面积,求正方体面积,输出20个能被3整除且个位是3的数字等),列表框中数据移动以下是部分例题总结:1、口令登录问题(四种不同形式的例子)形式一:题目描述:在文本框输入口令,如果输入的是“SUPER“,则在下面的标签里面显示“正确”,否则显示“错误”。

控件名称涉及属性涉及事件涉及方法FORM CAPTION INITLABEL FONTSIZE,CAPTIONTEXTBOX FONTSIZE VALIDFORM1.INITBEL2.VISIBLE=.F.THIS.TEXT1.PASSWORDCHAR=“*”TEXT1.VALIDBEL2.VISIBLE=.T.IF ALLT(THIS.VALUE)=="SUPER"BEL2.CAPTION="正确!"ELSEBEL2.CAPTION="错误!"ENDIF形式二:题目描述:在文本框中输入口令,如果输入的是“SUPER”,则在弹出的消息框中提示“正确”,否则提示“错误”。

要求当输入完毕按下回车即能触发“确定”按钮,单击“退出”按钮则能释放表单,结束程序。

控件名称涉及属性涉及事件涉及方法FORM CAPTION INIT RELEASELABEL FONTSIZE,CAPTIONTEXTBOX FONTSIZECOMMAND BUTTON FONTSIZE,CAPTION CLICKFORM1.INITTHIS.TEXT1.PASSWORDCHAR="*"MAND1.DEFAULT=.T.COMMAND1.CLICKIF ALLT(THISFORM.TEXT1.VALUE)=="SUPER"MESSAGEBOX("正确!")ELSEMESSAGEBOX("错误!")ENDIFCOMMAND2.CLICKTHISFORM.RELEASE形式三:题目描述:在页框第一页的登录界面的文本框中输入口令,当输入为“SUPER”时则激活第二页,显示“欢迎使用本系统!”,否则则激活第三页,显示“你无权使用本系统!”。

表单范本大全 (100个)

表单范本大全 (100个)

表单范本大全目录一、人员出勤表二、人员调动申请单三、人员调职申请书四、人员试用标准五、人员增补申请表六、软件工程师考评表七、申报规定八、生产部门业务能力分析九、生产奖金核定表十、生产人员工资提成计算十一、实习报告十二、试用保证书十三、试用查看通知十四、试用察看通知单十五、试用合同书十六、试用员工考核表十七、提高能力的对策表十八、提高能力方法表十九、团体培训申请表二十、委托证明二十一、文具用品领用卡二十二、办公室物资管理条例二十三、办公行为规范二十四、保密制度二十五、辞职申请书二十六、岗位职务说明书二十七、各级培训机构工作职责二十八、工资调整表二十九、工作内容调查日报表三十、件薪计算表三十一、奖惩登记表三十二、教师个人工作总结三十三、津贴申请单三十四、经济合同管理办法三十五、经理人员能力考核表三十六、员工任免通知书三十七、员工手册三十八、员工书面表扬申请单三十九、员工通用项目考核表四十、员工薪金单四十一、员工在职训练制度四十二、员工招聘申请书四十三、员工专项考核表四十四、员工自评表四十五、营销人员能力考核表四十六、员工出勤工薪记算表四十七、员工处罚条件参照表四十八、员工辞职管理办法四十九、员工调查表五十、员工岗位变动通知书五十一、员工工资变动申请表五十二、员工工资职级核定表五十三、员工奖惩登记表五十四、员工奖惩建议申请表五十五、员工奖惩月报表五十六、员工奖金合计表五十七、员工考勤记录表五十八、员工离职单五十九、员工培训报告表六十、员工培训计划表六十一、员工培训需求调查表六十二、员工签到卡六十三、员工请假单六十四、员工请假公出单六十五、员工任免通知书六十六、员工通用项目考核表六十七、员工专项考核表六十八、月度考勤统计表六十九、在职员工培训测验成绩表七十、在职员工培意见调查表七十一、暂借款管理办法七十二、招聘流程图七十三、职工奖惩条例七十四、职员阶段考绩表七十五、职员具体工作能力考核表七十六、职员品行分析表七十七、职员品行考核表七十八、职员品行评定表七十九、职员统一薪金等级表八十、主管人员服务成绩考核表八十一、主管人员考核表八十二、专业人员服务成绩考核表八十三、综合能力考核表八十四、员工自我鉴定表八十五、月度考勤统计表八十六、在职技能培训计划申请八十七、在职训练测验成绩表八十八、在职训练费用申请表八十九、在职训练实施结果表九十、在职训练学员意见调查九十一、在职员工培训测验成绩九十二、在职员工培训测验成绩表九十三、办公室物资管理条例九十四、办公行为规范九十五、保护母亲河策划九十六、保密制度九十七、毕业生自我鉴定九十八、工作说明书九十九、中层领导年度工作考核表一百、公司工资制度方案人员出勤表月日部门:人员调动申请单年月日人员调职申请书年月日人员试用标准人员增补申请表本表用于下级部门向主管单位申请增加员工。

form的各种形式

form的各种形式

form的各种形式
表单(Form)在Web开发中非常常见,可以采用多种形式展现给用户填写数据。

下面是几种常见的表单形式:
1. 垂直表单:最常见的表单形式,每个表单项占据一行,表单项在垂直方向上依次排列。

用户从上到下逐个填写表单项,通常用于较复杂的表单。

2. 水平表单:表单项在水平方向上排列,每行显示多个表单项。

适合表单项较少的情况,可以节省空间,但对于较长的输入项可能显示不完整。

3. 网格表单:将表单项以网格状布局,形成多行多列的表格。

适用于表单项之间有一定的关联性,并且表单项较多的情况。

4. 标签式表单:表单项与对应的标签一起显示,通常以水平方向排列。

便于用户直观理解和识别每个表单项的含义。

5. 分组表单:将相关的表单项分成不同的组进行展示,每个组具有自己的标题和说明。

适用于大型表单,可以方便用户按照逻辑关系填写表单。

6. 隐式表单:表单项在页面中隐式地嵌入,用户无需直接操作,通过其他方式自动获取或提交表单数据。

例如,通过URL参数、Cookie等方式自动填充表单项。

以上是几种常见的表单形式,它们可以根据实际需求和设计风格进行选择和组合。

在设计表单时,需要考虑用户的使用习惯和交互体验,以便提供更好的用户界面和填写体验。

office表格样式

office表格样式

office表格样式
在Microsoft Office中,可以使用多种表格样式来美化表格。

以下是一些常用的
表格样式:
1.默认样式:这是最基本的表格样式,没有额外的边框或颜色。

2.网格线样式:这种样式会在表格周围显示网格线,使表格更加清晰可见。

3.颜色填充样式:这种样式会给表格添加颜色,通常用于强调某些单元格或行。

4.阴影填充样式:这种样式会给表格添加阴影效果,使表格更加突出。

5.渐变填充样式:这种样式会给表格添加渐变颜色,使表格更加立体。

6.金属填充样式:这种样式会给表格添加金属质感,使表格更加高档。

7.木纹填充样式:这种样式会给表格添加木纹质感,使表格更加自然。

此外,还可以通过自定义样式来自定义表格的外观,包括添加边框、调整颜色、字体等。

在Excel中,可以使用“格式化表格”功能来快速应用不同的样式,也可以通过“设计”选项卡中的“表格样式”组来进行更详细的设置。

在Word中,可以使用“表格布局”选项卡中的“表设计”功能来设置表格的样式。

vue中form表单的样式

vue中form表单的样式

vue中form表单的样式
在Vue中,可以使用多种方式来设置form表单的样式。

首先,
可以使用普通的HTML和CSS来设置表单的样式,就像在普通的网页
中一样。

另外,Vue也提供了一些特有的方式来处理表单样式。

一种常见的方法是使用Vue的单文件组件(.vue文件),在这
个文件中可以将HTML模板、CSS样式和Vue组件代码组合在一起。

这样可以更好地组织和管理表单的样式。

另外,Vue还提供了一些指令来处理表单样式,比如v-bind和
v-model指令。

v-bind指令可以用来动态地绑定表单元素的class
或style属性,从而实现动态样式的设置。

v-model指令则可以用
来实现表单元素和Vue实例数据的双向绑定,使得表单元素的样式
可以随着数据的变化而变化。

除此之外,Vue还有一些第三方的UI组件库,比如Element UI、Vuetify等,它们提供了丰富的表单组件和样式,可以帮助开发者
更快速地搭建和定制表单样式。

总的来说,在Vue中设置form表单的样式可以通过普通的CSS
样式、Vue的单文件组件、指令以及第三方UI组件库来实现,开发者可以根据实际需求选择合适的方式来处理表单的样式。

15种公文的流程表单样式

15种公文的流程表单样式

以下是一份概括的15种公文的流程表单样式概述,每个公文类型可能需要根据具体机构和规定进行调整:1. 决议:提议阶段:提出议题和初步方案讨论阶段:在会议中进行详细讨论和修改投票阶段:参会人员进行表决形成决议:根据投票结果形成正式决议文本执行阶段:下级机构或相关部门按照决议执行2. 决定:起草阶段:明确决策内容和要求审核阶段:上级领导或相关部门对决定草案进行审核签发阶段:有权签发人签署决定公布阶段:向相关人员或部门公布决定内容执行和监督阶段:执行决定并监督执行情况3. 命令(令):起草阶段:明确命令的具体要求和目标审核阶段:上级领导或相关部门对命令草案进行审核签发阶段:有权签发人签署命令传达阶段:将命令传达给执行机构或个人执行和反馈阶段:执行命令并向上级反馈执行情况4. 公报:起草阶段:撰写公报内容,包括重要事件、政策变动等信息审核阶段:上级领导或相关部门对公报草案进行审核签发阶段:有权签发人签署公报发布阶段:通过官方渠道发布公报反馈和评估阶段:收集公众或相关方的反馈,评估公报效果5. 公告:起草阶段:撰写公告内容,包括重要事项、活动通知等信息审核阶段:上级领导或相关部门对公告草案进行审核签发阶段:有权签发人签署公告发布阶段:通过合适渠道发布公告,如官方网站、新闻媒体等反馈和跟进阶段:收集反馈,根据需要进行后续跟进6. 通告:起草阶段:撰写通告内容,包括具体事项、要求或规定等审核阶段:上级领导或相关部门对通告草案进行审核签发阶段:有权签发人签署通告发布阶段:通过合适渠道发布通告,如内部通讯、公告栏等执行和反馈阶段:执行通告内容,并收集反馈以改进工作7. 意见:起草阶段:就某一事项或政策提出具体观点和建议征求阶段:向上级领导或相关部门提交意见草案,并征求反馈修改阶段:根据反馈修订意见内容确定阶段:上级领导或相关部门对意见进行审议和确定实施阶段:根据确定的意见进行相应的工作调整或政策实施8. 通知:起草阶段:撰写通知内容,包括具体事项、要求或安排等审核阶段:上级领导或相关部门对通知草案进行审核签发阶段:有权签发人签署通知发布阶段:通过合适渠道发布通知,如内部通讯、电子邮件等执行和反馈阶段:执行通知内容,并收集反馈以改进工作9. 通报:起草阶段:撰写通报内容,包括工作进展、问题分析、经验教训等审核阶段:上级领导或相关部门对通报草案进行审核签发阶段:有权签发人签署通报发布阶段:通过合适渠道发布通报,如内部通讯、会议等学习和改进阶段:组织学习通报内容,吸取经验教训,改进工作10. 报告:起草阶段:撰写报告内容,包括工作成果、问题分析、未来计划等审核阶段:上级领导或相关部门对报告草案进行审核签发阶段:有权签发人签署报告发布阶段:通过合适渠道发布报告,如会议、内部通讯等讨论和反馈阶段:组织讨论报告内容,收集反馈,制定下一步行动计划11. 请示:起草阶段:撰写请示内容,包括请求事项、理由、预期效果等审核阶段:上级领导或相关部门对请示草案进行审核签发阶段:有权签发人签署请示提交阶段:向上级机构或领导提交请示等待批复阶段:等待上级的回复和指示12. 批复:收到请示阶段:收到下级机构或个人的请示审核阶段:上级领导或相关部门对请示内容进行审议起草批复阶段:撰写批复内容,包括同意与否、具体要求等签发阶段:有权签发人签署批复下发阶段:将批复发送给请示方13. 议案:起草阶段:撰写议案内容,包括提议事项、理由、预期效果等征求阶段:向上级领导或相关部门提交议案草案,并征求反馈修改阶段:根据反馈修订议案内容提交阶段:在适当的会议上提交议案表决阶段:会议对议案进行讨论和表决14. 函:起草阶段:撰写函件内容,包括沟通事项、请求、答复等审核阶段:上级领导或相关部门对函件草案进行审核签发阶段:有权签发人签署函件发送阶段:通过邮寄、电子邮件等方式将函件发送给对方回复和跟进阶段:接收对方回复,根据需要进行后续跟进15. 纪要:准备阶段:收集会议资料和讨论内容起草阶段:撰写纪要内容,包括会议议程、讨论要点、决定事项等审核阶段:上级领导或相关部门对纪要草案进行审核签发阶段:有权签发人签署纪要发布阶段:通过合适渠道发布纪要,如内部通讯、电子邮件等执行和反馈阶段:根据纪要内容进行工作安排和执行,并收集反馈以改进工作请注意,以上流程可能因机构和具体情况有所不同,应根据实际需要进行调整。

好看的表单样式大全

好看的表单样式大全

好看的表单样式大全1、只有下划线的文本框:<input style="border:0;border-bottom:1 solid black;background:;">2、软件序列号式的输入框:<script for="T" event="onkeyup">if(value.length==3)document.all[event.srcElement.sourceInd ex+1].select();</script><input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">3、软件序列号式的输入框(完整版):<script for="T" event="onkeyup">if(value.length==maxLength)document.all[ev ent.srcElement.sourceIndex+1].focus();</script><script for="T" event="onfocus">select();</script><script for="Submit" event="onclick">var sn=new Array();for(i=0;i<T.length;i++)sn=T.value;alert(sn.join("—"));</script><input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5"maxlength="3">—<input name="T" size="5" maxlength="3"> <input type="submit" name="Submit">4、输入框景背景透明:<input style="background:transparent;border:1px solid #ffffff">5、鼠标划过输入框,输入框背景色变色:<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29"onmouseover="this.style.borderColor='black';this.style.backgro undColor='plum'"style="width: 106; height: 21"onmouseout="this.style.borderColor='black';this.style.backg roundColor='#ffffff'" style="border-width:1px;border-color=black">6、输入字时输入框边框闪烁(边框为小方型):<Script Language="JavaScript">function borderColor(){if(self['oText'].style.borderColor=='red'){self['oText'].style.borderColor = 'yellow';}else{self['oText'].style.borderColor = 'red';}oTime = setTimeout('borderColor()',400);}</Script><input type="text" id="oT ext" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">7、输入字时输入框边框闪烁(边框为虚线):<style>#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor =="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}} ,onblur=function(){this.style.borderColor="#ff0000";clearTimeou t(timer)})};</style><input type="text" id="oText">8、自动横向廷伸的输入框:<input type="text" style="huerreson:_r(this.width=this.scrollWidth)"value="abcdefghijk">9、自动向下廷伸的文本框:<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80)this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>一、按钮样式.buttoncss {font-family: "tahoma", "宋体";font-size:9pt; color: #003399;border: 1px #003399 solid;color:#006699;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/bluebuttonbg.gif); background-color: #e8f4ff;cursor: hand;font-style: normal ;width:60px;height:22px;}二、蓝色按钮.bluebuttoncss {font-family: "tahoma", "宋体";font-size: 9pt; color: #003366;border: 0px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;*/background-image:url(../images/blue_button_bg.gif); background-color: #ffffff;cursor: hand;font-style: normal ;}三、红色按钮.redbuttoncss {font-family: "tahoma", "宋体";font-size: 9pt; color: #0066cc;border: 1px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/redbuttonbg.gif); background-color: #ffffff;cursor: hand;font-style: normal ;}四、选择按钮.selectbuttoncss{font-family: "tahoma", "宋体";font-size: 9pt; color: #0066cc;border: 1px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/blue_button_bg.gif); background-color: #ffffff;cursor: hand;font-style: normal ;}五、绿色按钮.greenbuttoncss {font-family: "tahoma", "宋体";font-size: 9pt; color: #0066cc;border: 1px #93bee2 solid;border-bottom: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/greenbuttonbg.gif); background-color: #ffffff;cursor: hand;font-style: normal ;}六、图像按钮.imagebutton{cursor: hand;}七、页面正文body {scrollbar-face-color: #ededf3;scrollbar-highlight-color: #ffffff;scrollbar-shadow-color: #93949f;scrollbar-3dlight-color: #ededf3;scrollbar-arrow-color: #082468;scrollbar-track-color: #f7f7f9;scrollbar-darkshadow-color: #ededf3;font-size: 9pt;color: #003366;overflow:auto;}td { font-size: 12px }th {font-size: 12px;}八、下拉选择框select{border-right: #000000 1px solid; border-top: #ffffff 1px solid;font-size: 12px;border-left: #ffffff 1px solid; color:#003366;border-bottom: #000000 1px solid; background-color: #f4f4f4;}九、线条文本编辑框.editbox{background: #ffffff;border: 1px solid #b7b7b7; color: #003366;cursor: text;font-family: "arial";font-size: 9pt;height: 18px;padding: 1px;}十、多行文本框.multieditbox{background: #f8f8f8;border-bottom: #b7b7b7 1px solid;border-left: #b7b7b7 1px solid;border-right: #b7b7b7 1px solid;border-top: #b7b7b7 1px solid;color: #000000;cursor: text;font-family: "arial";font-size: 9pt;padding: 1px;}十一、阴影风格的表单.shadow {position:absolute;z-index:1000;top:0px;left:0px;background:gray;background-color:#ffcc00;filter : progidximagetransform.microsoft.dropshadow(color=#ff404040 ,offx=2,offy=2,positives=true);}十二、只显一条横线的输入框.logintxt{border-right: #ffffff 0px solid;border-top: #ffffff 0px solid;font-size: 9pt;border-left: #ffffff 0px solid;border-bottom: #c0c0c0 1px solid;background-color: #ffffff }十三、没有边框的输入框.noneinput{text-align:center;width:99%;height:99%; border-top-style: none; border-right-style: none; border-left-style: none; background-color: #f6f6f6; border-bottom-style: none; }。

HTML表单样式大全

HTML表单样式大全

HTML表单样式大全1、CSS魔法CSS,就是大家知道的层叠样式单,它可以定义页面元素的外观,包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等,下面就从这几个方面出发,讨论怎样将CSS应用到表单中,彻底美化它!1.1 字体样式的应用字体样式包括:字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font),具体的定义方法,在这里不详细讲述,可以参考它的资料。

也许你已经注意到,按钮上的文字不漂亮,其实可以通过CSS字体样式来解决,同样地,其它的几个涉及到文字的表单项,例如,文本框、多行文本框、口令框、下拉选择框都可以应用字体样式。

为了充分展示这些应用,下例特别设计了几种样式,在实际应用中,不必这么凌乱,灵活运用:样例1:表单元素的字体样式展示HTML代码小结:只要我们对字体的样式熟悉了,就可以灵活多变,不一定要在标签里面使用style来定义,完全可以在<head>里定义,或者外部引用CSS文件,用到的时候引用一下就能达到预期的效果。

1.2 背景颜色和图像样式的应用有很多时候,网页由于颜色的搭配,不得不对表单的背景颜色和图像样式进行设计,背景颜色利用background-color属性,背景图像利用background-image属性,颜色和图像同样能够得到意想不到的效果。

样例2:表单元素的背景展示HTML代码小结:用好background-color属性和background-image属性,就可以设计很出“色”表单了。

1.3 边框样式的应用也许你觉得表单的边框过于死板,我们能否设计单线条,或者其它的边框样式呢?当然可以!和边框有关的属性有:边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-colr、边框宽度border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border,这里不作详细的讲述,请参考有关资料。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
border-bottom: #93bee2 1px solid;
border-left: #93bee2 1px solid;
border-right: #93bee2 1px solid;
border-top: #93bee2 1px solid;
background-color: #ffffff;
cursor: hand;
ont-style: normal ;
}
三、红色按钮
.redbuttoncss {
font-family: "tahoma", "宋体";
font-size: 9pt; color: #0066cc;
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
7、输入字时输入框边框闪烁(边框为虚线):
<style>
#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
cursor: hand;
font-style: normal ;
}
五、绿色按钮
.greenbuttoncss {
font-family: "tahoma", "宋体";
font-size: 9pt; color: #0066cc;
border: 1px #93bee2 solid;
background-image:url(../images/greenbuttonbg.gif);
background-color: #ffffff;
cursor: hand;
font-style: normal ;
}
六、图像按钮
.imagebutton{
border-right: #93bee2 1px solid;
border-top: #93bee2 1px solid;
background-image:url(../images/blue_button_bg.gif);
background-color: #ffffff;
<input type="submit" name="Submit">
4、输入框景背景透明:
<input style="background:transparent;border:1px solid #ffffff">
5、鼠标划过输入框,输入框背景色变色:
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
}
二、蓝色按钮
.bluebuttoncss {
font-family: "tahoma", "宋体";
font-size: 9pt; color: #003366;
border: 0px #93bee2 solid;
border-bottom: #93bee2 1px solid;
9、自动向下廷伸的文本框:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>
border: 1px #93bee2 solid;
border-bottom: #93bee2 1px solid;
border-left: #93bee2 1px solid;
border-right: #93bee2 1px solid;
border-top: #93bee2 1px solid;
border-left: #93bee2 1px solid;
border-right: #93bee2 1px solid;
border-top: #93bee2 1px solid;*/
background-image:url(../images/blue_button_bg.gif);
1、只有下划线的文本框:
<input style="border:0;border-bottom:1 solid black;background:;">
2、软件序列号式的输入框:
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
6、输入字时输入框边框闪烁(边框为小方型):
<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
scrollbar-3dlight-color: #ededf3;
scrollbar-arrow-color: #082468;
scrollbar-track-color: #f7f7f9;
scrollbar-darkshadow-color: #ededf3;
background-image:url(../images/redbuttonbg.gif);
background-color: #ffffff;
cursor: hand;
font-style: normal ;
}
四、选择按钮
.selectbuttoncss{
font-family: "tahoma", "宋体";
相关文档
最新文档