css之反馈表单

最新推荐文章于 2022-11-12 14:59:21 发布
最新推荐文章于 2022-11-12 14:59:21 发布
阅读量1k 收藏 5
点赞数 3
分类专栏： Html5 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012493556/article/details/52789421
版权
CSS 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
Html5
12 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .feedback{
            width: 398px;
            padding: 1px;
            border: 1px solid #E8E8E8;
            background-color: #FFFFFF;
        }
        .feedback *{
          margin: 0;
          padding: 0;
          font: normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetica,sans-serif;
        }
        .feedback h3{
            height: 24px;
            line-height: 24px;
            font-weight: bold;
            font-size: 13px;
            text-indent: 12px;
            color: #FFFFFF;
            background-color: #999999;
        }
        .feedback .content{
            padding: 0 10px;
        }
        .feedback fieldset{
            padding-left: 12px;
            margin-top: 10px;
            border: 0 none;
            border-top: 1px solid #999999;
        }
        .feedback legend{
            padding: 0 5px;
            color: #333333;
        }
        .feeedback .frm_cont{
            margin-top: 8px;
        }
        .feedback label{
            float: left;
            width: 80px;
            height: 22px;
            line-height: 24px;
            text-align: right;
            color: #ABABAB;
            cursor: pointer;
          }
          .feedback .base_info input{
            width: 100px;
            height: 17px;
            padding: 3px 2px 0;
            border:1px solid #DEDEDE;
          }
          .feedback .email input{
            width: 150px;
          }
          .feedback .url input{
            width: 240px;
          }
          .feedback .up_file input{
            width: auto;
            height: auto;
          }
          .feedback .tips{
            padding: 5px 0 0 80px;
            color: #FF3620;
          }
          .feedback textarea{
            width: 240px;
            height: 66px;
            padding-left: 2px;
          line-height: 22px;
          border:1px solid #DEDEDE;
          }
          .feedback .btns{
             padding: 5px 0;
             text-align: center;
          }
          .feedback .btns button{
            height: 22px;
            margin:  0 5px;
            letter-spacing: 3px;
            padding-left: 3px;
            cursor: pointer;
          }
          .up_file input{
            width: 100px;
            height: 50px;
            font-size: 20px;
            color: #FF0000;
            border:1px solid #0000FF;
            background-color: #999999;
          }
    </style>
</head>
<body>
<div class="feedback">
<h3>反馈表单</h3>
<div class="content">
      <form method="post" action="">
        <fieldset class="base_info">
            <legend>用户信息</legend>
            <div  class="frm_cont userName">
                <label for="userName">用户名:</label>
                <input type="text" id="userName"/>
            </div>
            <div  class="frm_cont email">
                <label for="email">电子邮箱:</label>
                <input type="text" id="email"/>
            </div>
                <div  class="frm_cont url">
                <label for="url">网址:</label>
                <input type="text" id="url"/>
            </div>
        </fieldset>
        <fieldset class="feedback_content">
            <legend>反馈内容</legend>
            <div  class="frm_cont up_file">
                <label for="up_file">相关图片:</label>
                <input type="file" id="up_file"/>
                <p class="tips">本系统支持上传.jpg .png</p>
            </div>
            <div  class="frm_cont msg">
                <label for="msg">内容:</label>
                <textarea id="msg" rows="4" cols="40"></textarea>
                <p class="tips">请输入留言内容！</p>
            </div>
        </fieldset>
        <div class="btns">
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>


      </form>
</div>
</div>

</body>
</html>

效果如下图：
这里写图片描述

靳小霞
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML --- 表单
naoguoteng的博客
10-12 1889
1.表单的用途2.表单的工作原理3.表单中的各种标签 表单标签 form、输入标签 input、文本文框标签 textarea、下拉框标签 select、按钮标签 button 4.表单实例 表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。就像日常生活中统计信息的信息表一样。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的
什么是表单？
m0_55832273的博客
03-16 8830
表单 表单：收集不同类型的用户输入信息。 输入框，密码框，文本域 下拉菜单，单选，多选。 from标签： 作用：定义一个表单。 一个表单是由表单元素组成的。 标签：只是说开始标签与结束标签。 元素：在HTML中，从开始标签到结束标签的所有代码统称为一个元素。 表单元素：不同类型的input元素 以及 单选框，提交按钮等。 格式： <form action=""> 传输的数据 </form&
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
苏凉.py的博客
05-26 1224
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录前言css伪类选择器:active:link和:visited:hover伪类选择器合集css伪元素选择器伪元素合集::after和::before::first-letter::first-line::selection小结 前言 上期给大家讲了css的一些选择器的..
css画布背景_快速提示：如何使用纯CSS创建画布外反馈表单
Web design 教程小屋
07-10 189
在这个超级快速的教程中，我们将逐步完成创建画布外反馈表单的过程。 我们不会使用任何JavaScript来完成此操作，实际上，我们将利用“ CSS checkbox hack技术”来构建它。 听起来很有趣？ 这是我们将要构建的： 让我们开始吧！ 1.从页面标记开始 我们将从复选框，标签和表格开始。 在表单中，我们将放置一些常见的表单元素。 请记住，这里的顺序很重要。 首先，我...
什么是表单
m0_74899618的博客
11-12 696
<!-- 什么是表单？ 作用：用于收集不同类型用户输入的信息。 表单的组成：表单元素、表单区域 表单区域： 语法： <form></form> 作用：定义html的表单区域。实现用户信息的收集和传递。 表单元素： 表单元素是允许用户在表单中输入内容的标签。
bootstrap css样式之表单
08-31
Bootstrap支持表单验证状态，如`has-success`、`has-warning`和`has-error`，通过添加这些类到`.form-group`，可以显示视觉反馈以指示用户输入是否有效。 6. **附加动作** 表单中的按钮可以使用`.btn`和`.btn-...
JS用户反馈表单提交代码
07-24
在JavaScript（JS）中，创建一个用户反馈表单提交功能是一项常见的任务，它涉及到前端交互设计和后端数据处理。本项目"JS用户反馈表单提交代码"提供了一个具有星空背景的用户反馈表单，旨在增强用户体验并收集有价值...
CSS样式表单美化系列
04-29
9. **表单验证**：除了前端样式，CSS也可以配合JavaScript进行简单的表单验证，通过修改元素的`invalid`伪类，可以实时反馈用户输入的合法性。 10. **无障碍性**：确保表单对所有用户友好，包括视障人士。通过设置`...
用户反馈提交表单网页模板
01-20
此外，还可以使用CSS来控制表单的样式，JavaScript进行表单验证和动态功能的实现。 综上所述，用户反馈提交表单网页模板设计涉及到多个层面，包括用户体验、数据安全、交互逻辑和后端处理等，每个环节都需要细心...
CSS3表单输入框动画特效特效代码
03-20
**CSS3表单输入框动画特效详解** 在网页设计中，表单元素是必不可少的组成部分，用于收集用户信息。随着CSS3技术的发展，我们可以利用其强大的功能为表单输入框添加丰富的动画效果，提升用户体验。本篇文章将深入...
表单
苏先生前端
10-22 203
表单 受控组件和非受控组件 受控组件：组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，受控组件往往没有自身的状态，其内容完全收到属性的控制。（函数组件） 非受控组件：组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。（类组件）几乎没有属性 表单组件，默认情况下是非受控组件，一旦设置了表单组件的value属性，则其变为受控组件(单选和多选框需要设置...
HTML5表单验证反馈
rose999ying的博客
02-02 532
validity对象：通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false； --元素.addEventListener('invalid', fn, false);==&gt;fn回调 --ev.preventDefault()==&gt;阻止默认验证 --valueMissing:输入值为空时 --typeMismatch:控件值与预期类...
鼠标点击反馈效果(基于css3动画)
slzs_zyt的博客
09-13 6188
网上多是基于js-setTimeout及setInterval实现的动画效果，此篇基于css3-transition实现。 浮出符号效果： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=Content-Type content="text/html;charset=utf-8"&gt; &lt;/h...
正则表达式 简单的表单验证
XiaoZhuang__的博客
12-05 646
//正则表达式的作用：  是一个匹配字符串的规则； 能够进行验证，爬虫                           //1)单个字符的匹配              //[abc]  中括号中只有a 或b 或c               //var reg=/^[abc]$/;               //alert(reg.test("ab"))           
Java表单总结
qidao12的博客
01-15 2330
1.创建表单：用form标签创建表单区域，form标签2属性：action表单提交的数据什么地方处理，method表单以get或post方法把数据内容提交。 2.多行文本：标签（不需要import单标签引入） 3.下拉列表：列表项标签（不需要import单标签引入）如果下拉列表默认显示某个列表项用selected属性不需要属性值 4.文本框：type=text （需要import单标签引入）
表单提交到数据库实现增删查--Java实现
热门推荐
yangruxi的博客
05-16 1万+
案例分析： 创建一个表单，暂时只实现注册功能，通过用户名即可注册，注册的信息发送给数据库，可以实现增加、删除、查询所有信息等功能。 实现： 1.将MySQL驱动包拷贝到WebRoot–&amp;gt;Web-INF–&amp;gt;lib文件夹下； 2.在数据库中建一个user表，只有id和name两个字段； 3.创建一个表单，点击确定按钮以后提交，连接到doadd.jsp： &amp;lt;%@ pag...
Java Web学习笔记(五) 记录表单的实现(二)
Chook_lxk的博客
01-19 283
实训第四天笔记 实现了简单记录表单的添加，删除，修改，模糊查询操作，添加了多选复选框，单选框，下拉框以及文本域的增删改操作。 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;记录列表&lt;/title&gt; &lt;script type=&
CSS部分要点
L_x_Ll的博客
02-20 498
1、link和import区别： link语法 属于标签，同时加载，实现DOM操作 import语法：     @inport"aa.css" 属于css，后加载，不能实现DOM操作，可以在CSS中引入其它CSS 2、如何理解CSS样式表的层叠性 CSS层叠是指CSS在针对同一元素配置同一属性时，依据层叠规则来处理冲突。 CSS使用层叠的原则来考虑继承、优先级等重要特征，从
邮箱的表单的反馈css html
最新发布
05-30
以下是一个基本的邮箱表单反馈的 CSS 和 HTML 代码： HTML 代码： ``` <label for="email">Email: <!-- 这里是反馈消息 --> ``` CSS 代码： ``` .feedback { font-size: 14px; margin-top: 10px; }...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值