html教程-用户反馈表单源代码 - 旺仔先森博客

html教程-用户反馈表单源代码

作者: 旺仔

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系wangzaibk@qq.com!

截图:

 

 

源代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>用户反馈表单</title>
    <style type="text/css">

.feedback{
  /*定义表单整体的宽带以及边框样式等*/
  width:600px;
  padding:1px;
  border:1px solid #e8e8e8;
  background-color:#ffffff;

}
.feedback{/*定义表单内部的所有元素补白、外补白以及文字的相关样式*/
  margin:0;
  padding:0;
  font:normal 12px/1.5en "宋体" ,verdana,lucida,Arial,Helvetica,sans-serif;

}
.feedback h3 {/*定义表单标题的高度、文字样式以及背景颜色等*/
height:24px;
line-height:24px;
font-weight:bold;
font-size:20px;
tet-indent:12px;
color:#ffffff;
background-color:#999999;
}
.feedback .content{/*表单内容区域增加10px的左右补白,使其与表单外框产生间距*/
  padding: 0 10px;

}
.feedback fieldset{
  padding-top: 12px;
  margin-top: 10px;
  border: 0 none;
  border-top: 1px solid #999999;
}
.feedback legend{
  padding: 0 5px;
  color: #333333;
}
.feedback .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: 200px;
  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: #ff3260;
}
.feedback textarea{
  width: 240px;
  height: 66px;
  padding-left: 2px;
  border: 1px solid #DEDEDE;

}
.feedback .btns{
  padding: 5px 0;
  text-align: center;
}
.feedback .btns button{
  height: 22px;
  margin: 0 5px;
  letter-spacing: 3px;
  cursor: pointer;
}


    </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" value="" id="userName" />  </div>
              <div class="frm_cont email" ><label for="email">电子邮箱:</label>
                <input type="text" value="@" id="email" />  </div>
                <div class="frm_cont url" ><label for="url">网站主页:</label>
                  <input type="text" value="http://" id="url" />  </div>
          </fieldset>
<fieldset>
  <legend>反馈内容:</legend>
  <div class="frm_cont up_file">
    <label for="up_file">相关图片:</label><input type="file" id="up_file">
    <p class="tips">本系统只支持上次.jpg,.png, .gif</p>
    </div>
    <div class="frm_cont msg">
      <label for="msg">内容:</label><textarea name="name" rows="4" cols="40" id="msg"></textarea>
      <p class="tips">请输入内容!</p>
    </div>
</fieldset>
<div class="btns">
  <button type="submit">提交</button>
  <button type="reset">重置</button>

</div>

        </form>

      </div>

    </div>

  </body>
</html>
分享到:
打赏

本站开启投稿功能注册账号即可投稿


文章版权信息

阅读时间:  发布于:2020-2-12

本文标题:html教程-用户反馈表单源代码

本文链接:http://www.52ooooo.com/post-338.html

版权声明:文章为《 旺仔》原创,转载请保留出处!

标签:留言源代码留言反馈表源码反馈表源代码

相关推荐

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap    66.70ms962