表单提交中的用户体验优化，数据保存与清理

admin管理员组

文章数量:1487745

表单提交中的用户体验优化，数据保存与清理

在吾爱资源网的网站设计中，我在提交资源的页面，原本的设计是这样的：

代码语言：javascript代码运行次数：0运行复制

<form method="post">
    <div class="form-group my-2">
        <label for="name">资源名称<sup style="color:red;">*</sup></label>
        <input type="text" class="form-control" id="name" name="name" required>
    </div>

    <div class="form-group my-2">
        <label for="yunurl">资源链接<sup style="color:red;">*</sup></label>
        <textarea class="form-control" id="yunurl" name="yunurl" rows="3"" required></textarea>
    </div>
    <div class="form-group my-2">
        <label for="tips">资源备注</label>
        <input type="text" class="form-control" id="tips" name="tips" maxlength="50">
    </div>
    <button type="submit" name="submit" value="submit" class="btn btn-primary btn-block w-100" id="submitBtn" <?php echo $success ? 'disabled' : ''; ?>>提交</button>
</form>

实现的效果就是判断是否满足我设置的条件，如果条件满足直接提交数据，否则提交按钮变成无效。提交后数据清空，不管是否成功，数据都会清理掉。但是我设置的条件中反馈一些错误提示，然后数据清零。比如会设置资源链接中是否包含链接，如果不包含，就提示链接有误，然后数据清理完了，这样其实体验比较差，应该是数据有误，就直接在原有基础上修改的。 我在原有的基础上第一，设置了input标签和textarea标签的数据保留，然后为了保证在提交成功后数据清理掉，我使用了提交成功的判断，这个方法其实在提交按钮上已经用过，这样设置的话，避免了使用后端处理比较麻烦。

代码语言：javascript代码运行次数：0运行复制

<form method="post">
    <div class="form-group my-2">  
        <label for="name">资源名称<sup style="color:red;">*</sup></label>  
        <input type="text" class="form-control" id="name" name="name" value="<?php echo !$success && isset($_POST['name']) ? $_POST['name'] : ''; ?>" required>  
    </div>  
    <div class="form-group my-2">    
        <label for="yunurl">资源链接<sup style="color:red;">*</sup></label>    
        <textarea class="form-control" id="yunurl" name="yunurl" rows="3" required><?php echo !$success && isset($_POST['yunurl']) ? htmlspecialchars($_POST['yunurl']) : ''; ?></textarea>  
    </div>  
    <div class="form-group my-2">  
        <label for="tips">资源备注</label>  
        <input type="text" class="form-control" id="tips" name="tips" value="<?php echo !$success && isset($_POST['tips']) ? $_POST['tips'] : ''; ?>" maxlength="50">  
    </div>
    <div class="form-group my-2">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="redirect" name="redirect">
            <label class="form-check-label" for="redirect">提交后跳转到首页</label>
        </div>
    </div>
    <button type="submit" name="submit" value="submit" class="btn btn-primary btn-block w-100" id="submitBtn" <?php echo $success ? 'disabled' : ''; ?>>提交</button>
</form>

2024-10-20T11:42:23.png

大家在实操的时候，也要考虑到用户反馈，保证产品有更好的体验。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。如有侵权请联系 cloudcommunity@tencent 删除前往查看用户体验优化form表单数据

本文标签： 表单提交中的用户体验优化，数据保存与清理