会话状态已创建一个会话id_创建友好的“会话式” Web表单

最新推荐文章于 2024-03-21 10:00:35 发布

daique1908

最新推荐文章于 2024-03-21 10:00:35 发布

阅读量741

点赞数

文章标签： python java css javascript js ViewUI

会话状态已创建一个会话id

Web表单一直是Web设计和用户交互方面的热门话题。造成这种情况的原因是广泛的，但更明显的原因之一是表单是用户向应用程序中输入信息的最基本的方法。在本文中，我们将讨论一些技术，这些技术可以使您的表单响应用户的输入，同时帮助掩盖不必要的混乱或压倒性的元素。

让我们开始吧！

形式就像对话

将表单想象为与用户的对话。在对话中，会出现来回感，每一方都提示另一方做出响应。例如，假设您的用户即将注册或登录。在这两种情况下，您都需要他们的电子邮件，因此从对话上讲，为什么不从此开始呢？

给我您的电子邮件，我会检查您是否有帐户。如果是这样，我会要求您输入密码，否则请您给我一个新密码，然后与我确认该密码。

因此，当用户使用表单到达页面时，他们会看到一个非常清晰的提示：“您的电子邮件地址是什么？”

聚会上的烦人

我们都认识那个家伙。他是您回避的人，因为他不停地讲话，而且似乎并没有真正听您说的话。坦白说，那个家伙真的让人不知所措，我不确定有人会喜欢。别那样

以您的形式，向他学习课程。与其面对大量用户输入，不如考虑通过创建响应式输入来减少用户的输入工作量。

让我们看一个简单的例子。

登录表单

登录过程如下所示：输入我的电子邮件地址，然后输入密码，然后按Enter。在此示例中，您将学习如何仅使用HTML和CSS在上一个字段完成后才显示每个字段。我们将先构建它，然后再构建一个修改版本。

让我们从标记的第一枪开始。

<form method="post">
    <input type="email" name="email" required>
    <input type="password" placeholder="Password..." required>
    <input type="submit">
</form>

如果这看起来有些令人生畏，请放心，我将逐一解释。让我们从电子邮件输入开始。我们看到除了名称之外，还为标签添加了一些属性。首先，将输入类型设置为“电子邮件”；这是一种相对较新的输入类型，它使我们在支持浏览器时有一些特殊行为。例如，在iPhone上，“ @”符号将显示在主键盘上。

输入类型的另一个功能是HTML5表单具有浏览器级别的验证功能。这意味着您不必编写JavaScript即可对基本表单元素执行验证！请注意，我们在电子邮件和密码元素上都具有“ required”属性。一旦填写了这两个元素，并且浏览器认为它们的值有效，您甚至可以使用:valid伪选择器来定位它们。

正则土地

这很棒，但我们可以做得更好。例如，浏览器接受“ a @ b”作为可接受的电子邮件。其原因是因为可以将电子邮件地址设置为类似于“ something @ localhost”之类的东西。我们的密码可以是我们输入的任何密码，因此单个字符的密码（例如“ a”）将被视为有效。让我们添加一些正则表达式来解决这些问题。

注意：如果您对正则表达式不熟悉，那就可以了！我们在这里只介绍了少量内容，以展示您如何将其用于HTML5表单验证中的常见任务，但是您可以坚持使用浏览器实现并仍然遵循本教程。只需跳过本节，然后继续！

另一个注意事项：您还可以查看Jeffrey Way制作的“ 傻瓜正则表达式：截屏视频”系列。

<form method="post">
    <input type="email" name="email" required pattern="[^ @]*@[^ @]*\.[a-zA-Z]{2,}">
    <input type="password" placeholder="Password..." required pattern=".{5,}">
    <input type="submit">
</form>

让我们遍历这些模式的每个部分。正则表达式是描述和比较字符串格式的一种方式。

我们将从电子邮件模式开始。

pattern="[^ @]*@[^ @]*\.[a-zA-Z]{2,}"

[^ @]* -匹配任意数量的字符不是一个@符号或一个空间。
@ -文字@符号
\. -一个字面意思。
[a-zA-Z] -任何字母，大写和小写
[a-zA-Z]{2,} -两个或多个字母的任意组合

将所有这些放在一起，我们可以看到该表达式表示电子邮件是除@符号之外的任何字符集，其后是@符号，然后是除@符号之外的任何字符集，其后是句点，然后是至少两个字母。

如果我们只想根据值的长度进行验证，则可以应用更简单的正则表达式：

pattern=".{5,}"

的. 表示“任何字符”，而{5,}表示必须至少包含5个字符。

使用这些模式后，在输入满足该模式的值之前，该元素不会被视为有效。

我们将使用一些额外的修饰符和一些其他非形式元素来完善标记。

<link href=’http://fonts.googleapis.com/css?family=Varela+Round’ rel=’stylesheet’ type=’text/css’>
<div class="login">
  <h3>Log In</h3>
  <form action="." method="post">
    <input type="email" placeholder="Your Email" pattern="[^ @]*@[^ @]*\.[^ @]{2,}" required />
    <input type="password" placeholder="Password..." required pattern=".{5,}" />
    <input type="submit" />
  </form>
</div>

一些`:valid` CSS Magic

现在，我们已经为登录表单添加了一些标记，让我们看看如何使用CSS响应用户的输入。

我们想在当前表单元素有效时显示下一个表单元素。让我们开始以一种可访问的方式隐藏表单元素本身，以便屏幕阅读器仍然可以看到完整的表单，并可以使用自动完成功能填充值。（Chris Coyier讨论了为什么不使用display:none对这类事情在这里。）我们将使用visuallyhidden在克里斯的职位描述的方法。

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

我们将从一些基本样式开始。

body {
  background-color: #245245;
  font-family: ’Varela Round’, sans-serif;
}
h3 {
  color: #555;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.login {
  width: 300px;
  margin: 50px auto;
  background: #f5f9fa;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}

input[type=password],
input[type=email]{
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}

input[type=password]:focus,
input[type=email]:focus {
  border: 1px solid #888;
  outline: none;
}
input[type=submit] {
  background-color: #F29E1E;
  width: 50%;
  border: none;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Varela Round";
  font-size: 1em;
  text-transform: uppercase;
}
input[type=submit]:hover {
  background-color: #DB8F2A;
  cursor: pointer;
}
input {
  margin: 6px 0;
}

这为我们提供了一个简单的居中登录表单。让我们采用视觉上隐藏的概念，并将其应用于我们要隐藏的元素。

input[type=password],
input[type=submit]{
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
  opacity: 0;
  transition: opacity 0.4s, height .4s, padding-top .4s, padding-bottom .4s;
}

我们将要执行一些动画，因此我们对该类进行了一些扩展，以包括不透明度，删除了绝对位置并添加了过渡定义。

注意：我们不包括过渡的供应商前缀，但是您应该！

现在让我们使用:valid伪选择器和+兄弟选择器来显示何时显示它们。

input[type=email]:valid + input[type=password]{
    opacity: 1;
    position: relative;
    height: 30px;
    width: 100%;
    clip: none;
    margin: 12px auto;
    border: 1px solid #ccc;
    padding: 8px;
}
input[type=password]:valid + input[type=submit]{
  opacity: 1;
    position: relative;
    height: 40px;
    width: 50%;
    clip: none;
    margin: 12px auto;
    padding: 8px;
}

有关最佳做法的说明

以网络形式考虑用户的目标和期望很重要。有时，这是一种完全解决用户输入问题的解决方案。但是，在某些情况下，这可能会产生不利影响，使用户感到他们填写表单的过程似乎不是明确的路线图，并且可能要花费比准备放弃更多的时间。。

解决此问题的方法是使用某种模糊处理，而不完全隐藏有助于创建叙事反馈方法的输入，以使表单具有明确的目标和相对可预测的期望。这是一个使用缩放，Webkit的模糊滤镜，不透明度和pointer-events:none的修改后的版本pointer-events:none输入时将其“呈现”给用户。我们还需要确保在输入可用时指针事件已还原，以便用户可以单击它们。

body {
  background-color: #245245;
  font-family: ’Varela Round’, sans-serif;
}
h3 {
  color: #555;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.login {
  width: 300px;
  margin: 50px auto;
  background: #f5f9fa;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}

input[type=password],
input[type=email]{
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}

input[type=password]:focus,
input[type=email]:focus {
  border: 1px solid #888;
  outline: none;
}

input[type=submit] {
  background-color: #F29E1E;
  width: 50%;
  border: none;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Varela Round";
  font-size: 1em;
  text-transform: uppercase;
}
input[type=submit]:hover {
  background-color: #DB8F2A;
  cursor: pointer;
}
input {
  margin: 6px 0;
}

input[type=password],
input[type=submit]{
  -webkit-filter: blur(1px);
  transform: scale(0.9);
  opacity: .4;
  transition: all .4s;
  pointer-events: none;
}

input[type=password]:valid + input[type=submit],
input[type=email]:valid + input[type=password] {
  pointer-events: auto;
  -webkit-filter: none;
  transform: scale(1);
  opacity: 1;
}

需要指出的一个快速错误：当用户按下tab键时，他们将输入下一个表单元素。我们使用pointer-events:none来防止单击下一个表单元素，但是CSS中没有“ focusable”属性。相反，我们需要通过触摸JavaScript（jQuery风格）来控制此行为。

var inputs = $("input");
$(document).on("keypress", "input", function(){
    inputs.each(function(i,el){
        var $el = $(el);
        if ($el.is(":valid")){
            $el.next("input")[0].disabled=false;
        } else {
            $el.next("input")[0].disabled=true;
        }
    });
});

此JavaScript监视我们的表单输入，并根据其先前同级的“：valid”状态禁用/启用输入。这将使我们无法集中精力。 pointer-events: none仍然pointer-events: none函数阻止我们的提交输入接收悬停状态。

其他用例

想象一个具有多个“轨道”的表单，例如我们的“登录或注册”示例。用户可能正在选择多个选项，这些选项将需要重新选择表单元素，例如选择运输状态或晚餐预定时间范围。在这些情况下，简单的验证可能还不够，我们将使用JavaScript支持的解决方案。

让我们以“登录”与“注册”为例。为了解决这个问题，我们必须询问服务器是否有与提供的电子邮件登录名匹配的用户。

<form action="">
    <input type="email">
    <input name="login_password" type="password">
    <input name="signup_password" type="password">
    <input name="signup_password_confirm" type="password">
</form>

var timeout;
$(document).on("keyup", "input[type=email]" function(){
    clearTimeout(timeout);
    var input = $(this);
    timeout = setTimeout(function(){
        if (input.is(":valid")){
            var email = input.val();
            $.getJSON("/check_for_user", {email : email}, function(data){
                if (data.user_exists){
                    input.parents("form").attr("action","/login")
                    input.addClass("user_exists");
                    $("input[type=password]").filter("[name*=’login’]").each(function(i,el){
                        el.required = true;
                    })
                } else {
                    input.parents("form").attr("action","/sign_up")
                    input.addClass("user_not_exists");
                    $("input[type=password]").filter("[name*=’signup’]").each(function(i,el){
                        el.required = true;
                    })
                }
            });
        }
    })
});

在上述JavaScript中，我们通过“ / check_for_user” URL将电子邮件地址发送到服务器。服务器将返回一个简单的JSON响应，类似于以下内容。

callback({
    user_exists : true
});

基于此值，我们向输入添加一个类，并更改表单的端点。我们还设置了相关密码。然后，我们可以通过多种方式使用CSS来定义接下来发生的事情。例如，我们可以使用早期的类似方法来显示或隐藏输入。

如果您要注册一个新帐户，我们可能需要显示注册密码字段（而不是登录密码字段）。为此，我们将使用~选择器，它是兄弟姐妹的常规选择器，并允许我们“跳过”不相关的兄弟姐妹元素。

input[name="signup_password"] {
    /* visually hidden styles here */
}
input[type=email].user_not_exists:valid ~ input[name="signup_password"] {
    /* "visible" styles go here */
}
input[type=email].user_exists:valid ~ input[name="login_password"] {
    /* "visible" styles go here */
}

后备

当我们在前端开发中推广新技术时，它们不会一直在所有浏览器中工作。幸运的是，在这种情况下轻松应对良好的后备状态非常容易。大多数主要浏览器都提供我们的服务，但是不幸的是，此选择不包括iOS 7或Android。对于不支持的浏览器，我们将仅使用默认的表单行为。

为此，我们可以使用Modernizr来检测浏览器是否支持表单元素的验证。最佳实践是将Modernizr用于这种类型的特征检测，但我们现在也可以编写一个快速函数。 Modernizr的“非核心检测”包括“表单验证”选项，因此您将需要构建自定义下载。设置好之后，将在html元素上为支持的浏览器提供form validation类。您可以将此formvalidation类作为目标，以增强支持浏览器的表单。

.formvalidation input[type=password], .formvalidation input[type=submit] {
  /* Hide or obscure your inputs and disable pointer-events here */
}

由于:valid和:invalid伪元素仅在支持的浏览器中起作用，因此隐藏输入CSS是我们需要使用渐进增强功能的唯一CSS。在不支持的浏览器中，输入将使用其默认功能。

而已！

您现在有了一些很酷的方法，可以将表格带入与用户的交互式对话建模的新水平。使用:valid和:invalid伪类，您还想到了哪些其他强大的功能？在评论中谈论它！

翻译自: https://webdesign.tutsplus.com/articles/creating-friendlier-conversational-web-forms--webdesign-17268