使用HTML制作（反馈表单仅供参考）

最新推荐文章于 2024-06-07 14:09:03 发布

w、l.

最新推荐文章于 2024-06-07 14:09:03 发布

阅读量879

点赞数 4

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/2301_77638787/article/details/132429876

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户反馈表</title>
<style>
    .feedback{
    width:398px;
    padding:1px;
    border:1px solid #e8e8e8;
    background-color:#ffffff;
    }
    *{
    margin:0px;
    padding:0px;
    font:normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetica,sans-serif;
    }
    h3{
    height:24px;
    line-height:24px;
    color:#ffffff;
    background-color:#999999;
    font-size:13px;
    font-weight:bold;
    text-indent:12px;
    }
    .content{
    padding:0px 10px;}
    fieldset{
    padding-left:12px;
    margin-top:10px;
    border:0 none;
    border-top:1px solid #999999;}
    legend{
    padding:0px 5px;
    color:#333333;}
    fieldset div{
    margin-top:8px;}
    label{
    float:left;
    width:80px;
    height:22px;
    line-height:24px;
    text-align:right;
    color:#ababab;
    cursor:pointer;}
    
    .base_info input{
    padding:3px 2px 0px;
    border:1px solid #dedede;
    }
    .usename input,.tel input,.email input{
    width:100px;
    height:17px;}
    .image input{
    width:auto;
    height:auto;}
    textarea{
    width:240px;
    height:66px;
    padding-left:2px;
    border:1px solid #dedede;
    }
    .tip{
    font-size:10px;
    padding:5px 0px 0px 80px;
    color:#ff3260;}
    .btn{
    text-align:center;
    padding:5px 0px;}
    button{
    height:22px;
    margin:0 5px;
    letter-spacing:3px;
    padding-left:3px;
    cursor:pointer;
    }
    </style>

    </head>
    <body>
    <div class="feedback">
    <div><h3>反馈表单</h3></div>
    <div class="content">
      <form action="demo_form.php" method="post">
    <fieldset class="base_info">
    <legend>用户信息</legend>
    <div class="usename">
        <label for="userName">用户名：</label><input type="text" value=“张三” id="userName"/>
    </div>
    <div>
        <label for="sex">性别：</label>男<input type="radio" value="男" name="sex"/>女<input type="radio" value="女" name="sex"/>
    </div>
    <div class="tel">
        <label for="tel">电话：</label><input type="tel" id="tel"/>
    </div>
    <div class="email">
        <label for="email">邮箱：</label><input type="email" id="email"/>
    </div>
    </fieldset>
    <fieldset class="feedback_info">
    <legend>反馈信息</legend>
    <div><label for="message">
        留言：</label><textarea rows="4" cols="40" id="message">
        </textarea >
    </div>
    <div class="image"><label for="image">相关图片：</label><input type="file"/>
    <p class="tip">支持上传.jpg、.gif、.png图片！</p> </div>
    </fieldset>
    
    <div class="btn">
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </div>
    </form>
    </div>

</html>

展示效果：

结束语：

首先，恭喜大家已经阅读完整个反馈表单，一般而言，不管书籍也好，能够完整跟下来的就已经很不容易了。所以尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。

w、l.

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
使用HTML制作（反馈表单仅供参考）

尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易，但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。
复制链接

扫一扫