自己写的DIV+CSS 表单

最新推荐文章于 2021-06-17 06:56:29 发布
最新推荐文章于 2021-06-17 06:56:29 发布
阅读量515 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyb1234hi/article/details/47664621
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>无标题文档</title> 
  <style type="text/css">
.divMain {
	height: 768px;
	width: 1024px;
	border:1px solid #000066;
	 
		 
}
.formControl {
	margin-top: 10px;
	width: 600px;
	margin-left: -200px;
	left: 50%;
	position: relative;
	height:30px
}
.spanLabel {
	height: 24px;
	margin-left: 10px;
	display: -moz-inline-box;
	display: inline-block!important;
	width: 200px;
	 
	line-height:30px;
}
.textField {
	height: 24px;
    width: 200px;
	margin-right:10px;
}
.radioField {
	 
	 
}
.selectField{
	 /*width: 204px;
	 height: 28px;*/
	 width: 204px;
	 height: 30px;
}

 
.formDiv {
	line-height:30px;
}
.textAreaField{
	 width: 204px;
	 height: 50px;
	 display: -moz-inline-box;
	 display: inline-block!important;
	
}
.textAreaControl{
	height:50px;
}
 
.textAreaContainer{
	 width: 204px;
	 height: 50px;
	 line-height:50px;
	 display: -moz-inline-box;
	 display: inline-block!important;
}.clearlinehight{
	height: 24px;
	margin-left: 10px;
	display: -moz-inline-box;
	display: inline-block!important;
	width: 206px;
	float:left;
 
}
</style> 
 </head> 
 <body> 
  <form id="form1" name="form1" method="post" action=""> 
   <div class="divMain"> 
    <div class="formControl"> 
     <span class="spanLabel">维修单号：</span> 
     <input name="textfield" type="text" class="textField" id="textfield" /> 
    </div> 
    <div class="formControl"> 
     <div class="formDiv"> 
      <span class="spanLabel">品牌：</span> 
      <select class="selectField"><option>请选择</option></select> 
     </div> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">站内码：</span> 
     <input name="textfield" type="text" class="textField" id="textfield" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">用户号码：</span> 
     <input name="textfield" type="text" class="textField" id="textfield" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">回访是否成功：</span> 
     <input name="textfield" type="radio" class="radioField" /> 
     <input name="textfield" type="radio" class="radioField" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">未成功原因：</span> 
     <select class="selectField"><option>请选择</option></select> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">是否修好：</span> 
     <input name="textfield" type="radio" class="radioField" /> 
     <input name="textfield" type="radio" class="radioField" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">是否本人维修：</span> 
     <input name="textfield" type="radio" class="radioField" /> 
     <input name="textfield" type="radio" class="radioField" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">送修时间是否一致：</span> 
     <input name="textfield" type="radio" class="radioField" /> 
     <input name="textfield" type="radio" class="radioField" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">维修时长：</span> 
     <select class="selectField"><option>请选择</option></select> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">是否收费：</span> 
     <input name="textfield" type="radio" class="radioField" /> 
     <input name="textfield" type="radio" class="radioField" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">收费金额：</span> 
     <input name="textfield" type="text" class="textField" id="textfield" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">收费是否一致：</span> 
     <input name="textfield" type="radio" class="radioField" /> 
     <input name="textfield" type="radio" class="radioField" /> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">满意度：</span> 
     <select class="selectField"><option>请选择</option></select> 
    </div> 
    <div class="formControl textAreaControl"> 
     <label for="textArea" class="clearlinehight">备注：</label> 
     <textarea class="textAreaField" cols="40" rows="6" id="textArea"></textarea> 
    </div> 
    <div class="formControl"> 
     <span class="spanLabel">坐席编号：</span> 
     <input name="textfield" type="text" class="textField" id="textfield" /> 
    </div> 
   </div> 
  </form>  
 </body>
</html>
效果预览：
<img src="https://img-blog.csdn.net/20150814170813006?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
hyb1234hi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html用div画表单,html 之表单，div标签
weixin_29001655的博客
06-16 837
一、表单功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label标签。表单属性action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理，比如https://www.sogou.com/w...
DIV+CSS精美布局模板
10-14
内含50套DIV+CSS 精美布局模板，简单修改便可以变成属于自己的网页，也可以作为布局设计的参考使用。
div不可以直接嵌套td
qq_42058441的博客
02-15 3348
div 中可以直接用 td 么？请教大神指导…… 例如： &lt;div&gt; &lt;td&gt;&lt;/td&gt; &lt;/div&gt; td只能嵌套在table中这个我是知道的，但是我有个刚从学校出来的同事，他写页面的时候是这样写的： &lt;div class="ptions1"&gt; &lt;td align="right"&gt;手机：&l
HTML+CSS+DIV+表单制作
十年饮冰，难凉热血
05-26 4991
Html 、CSS、JavaScript 综合运用：注册表单的制作  1  Html 什么是 HTML？     HTML 是用来描述网页的一种语言。 · HTML 指的是超文本标记语言 (Hyper Text Markup Language) · HTML 不是一种编程语言，而是一种标记语言 (markup language) · 标记语言是一套标记标
一个很漂亮的表单样式，用div+css实现
04-14
1.有各种很漂亮的表单样式， 2，表单用div+css，还有js控制实现很炫的效果
表单andDIV+CSS
qq_39794062的博客
08-02 893
HTML表单 今天使用表单＜form＞写了注册页面。 表单标签＜form＞ ＜input＞ - text - password - radio ——单选 - checkbox——多选 - hidden——隐藏字段 - submit - file - reset - button ＜select＞ - option ＜textarea 表单标签：＜...
JS+DIV+CSS实现仿表单下拉列表效果
11-28
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下： JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还...
div+css网页html成品学生作业包含15个html页面
12-19
包含15个页面，div+css布局，使用表单元素、多媒体技术、表格等等
div+css页面布局的五个小技巧
10-30
div css表单布局的五个小技巧可以帮助你更灵活的控制表单，使页面更加满意。
Div+CSS,JS,精美页面
05-05
文件包括Div+CSS布局讲解，JS正则表达式，网页模板，精美图标，JS教程等
第九天　CSS表单设计
Yao_Qinwei's Blog
05-06 891
今天我们开始学习《十天学会web标准(div+css)》的css表单设计，包含以下内容和知识点： 改变文本框和文本域样式用图片美化按钮改变下拉列表样式用label标签提升用户体验 一、改变文本框和文本域样式 如果前边几章学习的比较扎实的话，本节教程就相当容易了。下边先说一下文本框，文本框和文本域都是可以用css进行美化的。比如改变边框精细，颜色，添加背景色、背景图像等。请看下边的实例：
初学HTML用法大全指导(五)html建立网页中的表单与DIV、SPAN分块
Sweet Baby，甜宝
01-08 4988
上一篇博客我们讲了html脚本语言中超链接的创建与使用，这一篇博客我们来聊一聊web网页中常用的表单的建立，我们在登录一个新的网站时想成为这个网站的VIP会员或者普通用户时常常面临着各种信息的登记，以及在登录这个系统时要输入自己的账户和密码，比如CSDN中，我们想登录进入自己的账户时，就要输入账户和密码。这是HTML脚本语言中的表单操作就称为了很重要的作用。最常见的表单标签有：文本框、密码框、文本
form表单中使用div提交
qq_38963393的博客
05-25 2079
div时结构性元素，为其赋予name和value属性的时候， 后端可以获取到name属性的值，但value的值为None
表单和div
qq_38512978的博客
06-17 1248
一、表单标签 定义：<form action="" method=""></from> 常用属性: action：提交路径、method：常用提交方式(get、post)
html 表单 div,html 之表单，div标签等
weixin_28676289的博客
06-17 378
一 , 表单功能 : 表单用于向服务器传输数据, 从而实现用户与Web服务器的交互表单能够包含input系列标签,比如文本字段,复选框 , 单选框 , 提交按钮等等.表单还可以包含textarea , select , fieldset 和 label 标签表单属性name：表单的名称，用于JS来操作或控制表单时使用；id：表单的名称，用于JS来操作或控制表单时使用；action：指定表单数据的处...
终于自己写了一个简单的div二级菜单
lzjqq的专栏
10-22 361
用别人的菜单实现修改起来总是觉得麻烦，终于自己写了一个，关于mouseleave 和mouseout的问题到快放弃的时候才在网上找到问题的原因。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
CSS div+CSS实现表格.html
热门推荐
weixin_42193179的博客
12-14 1万+
序号姓名年龄序号姓名年龄
请做出一份网页设计布局使用DIV+CSS进行设计。 整个站点至少包含两个HTML文件、一个CSS文件及一个JS文件。 详细要求： 主文件名及二级页面文件名命名正确 包含img文件夹存放图片及视频资源 包含css文件夹存放css文件 包含js文件夹存放js文 网页布局整齐、色彩搭配合理 网页结构布局使用DIV+CSS 网页中表单元素的使用 BOM对象的使用 20分 DOM对象的使用 各种事件的使用 jQuery框架库的使用
最新发布
06-13
1. DIV+CSS 布局教程：https://www.runoob.com/w3cnote/div-css-layout.html 2. HTML、CSS、JS 文件夹结构规范：https://www.cnblogs.com/52cik/p/html-css-js-folder-structure.html 3. CSS 颜色搭配工具：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值