表单提交中的用户体验优化,数据保存与清理
在吾爱资源网的网站设计中,我在提交资源的页面,原本的设计是这样的:
<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标签的数据保留,然后为了保证在提交成功后数据清理掉,我使用了提交成功的判断,这个方法其实在提交按钮上已经用过,这样设置的话,避免了使用后端处理比较麻烦。
<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>
大家在实操的时候,也要考虑到用户反馈,保证产品有更好的体验。
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »