首页 前端知识 使用HTML制作(反馈表单仅供参考)

使用HTML制作(反馈表单仅供参考)

2024-06-16 09:06:41 前端知识 前端哥 267 999 我要收藏

<!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>

展示效果:

 结束语:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12316.html
标签
评论
发布的文章

json文件的格式转换

2024-06-21 09:06:48

JSON 现代数据交换的利器

2024-06-21 09:06:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!