酷客网Bulma表单，登录表单包括4部分：
- 邮箱输入框；
- 密码输入框；
- “Remember me”（是否记住）复选框；
- 提交按钮。
下面向其中一些控件添加占位符和必需（required）属性，并处理表单错误，以便向用户提示未能登录的原因。
logo
为了确保用户登录了正确的网站，首先添加一个logo，用以替换文本“Login”，如图所示：
<form class="box">
<div class="field has-text-centered">
<img src="images/coolcou_logo_bis.png" width="167">
</div>
</form>
请确保images目录和login.html相邻。
Bulma提供了field类来均匀分隔表单区域，以及一组类似于has-text-centered（给元素添加居中和行内效果）的辅助类来排布表单元素。
邮箱输入框
使用Bulma的如下两个类来实现输入框:
- label：专为标签设计的类，它会给标签元素添加加粗效果和设置底部间距。
- control：相当于表单输入容器，利用它可以给表单元素添加图标。
首先编写如下代码：
<div class="field">
<label class="label">
Email
</label>
<div class="control">
<input class="input" type="email" placeholder="e.g.coolcou@gmail.com">
</div>
</div>
预览效果如图所示:
完整代码:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<! -- 在此处编写页面内容代码 -->
<section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-5-tablet is-4-desktop is-3-widescreen">
<form class="box">
<div class="field has-text-centered">
<img src="images/coolcou_logo_bis.png" width="167">
</div>
<div class="field">
<label class="label">
Email
</label>
<div class="control">
<input class="input" type="email" placeholder="e.g.coolcou@gmail.com">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
其中使用了HTML5的邮箱输入框，也可以使用Font Awesome的邮箱图标来修饰，以增强该输入框的语义。
在使用Bulma之前，首先需要给control元素添加has-icons-left修饰符，该修饰符会让control元素左边留出一定空间来放置图标。
<div class="control has-icons-left">
因为是邮箱输入框，所以选择一个信封的图标，同时添加修饰符使得图标居左并适配control元素左边留出的空间。
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
- icon:Bulma定义的图标类。
- is-small：以小尺寸显示图标的修饰符。也可以使用is-large修饰符来以大尺寸显示。
- is-left：居左排列。
现在control元素包含了一个左边带图标的输入框，如图所示:
<div class="control has-icons-left">
<input class="input" type="email" placeholder="e.g. coolcou@smith.com" re-quired>
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
说明：即使在页面加载后加载图标，布局也不会出现塌陷，Bulma确保了图标所占空间是固定的，即使图标未加载完成。
密码输入框
密码输入框和邮箱输入框非常类似，因此可以复制邮箱部分的代码，稍做改动，效果如图所示。
- label部分改成
“Password”。 - 输入框的类型改为password。
- 输入框占位符设置为＊＊＊＊＊＊。
- 图标改为fa-lock类型。
<div class="field">
<label class="label">Password</label>
<div class="control has-icons-left">
<input class="input" type="password" placeholder="＊＊＊＊＊＊＊＊" required>
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
邮箱输入框和密码输入框采用同样的类，因此显示效果相同。
复选框
添加“Remember me”复选框。<label>标签可以增大点击区域，使得“Remember me”文本同样可点击。
因为不需要使用图标，所以这里无须使用control辅助类，效果如图所示。
<div class="field">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
</div>
登录按钮
为了完成表单，还需要一个提交按钮。Bulma提供了button类来实现按钮效果，可在如下元素中使用：
- 锚标签
<a>； - 按钮标签
<button>； - 输入标签
<input type="submit">。
推荐使用<button>标签，因为它是灵活有效的表单元素，效果如图所示。
<div class="field">
<button class="button is-success">
Login
</button>
</div>
完整代码如下:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<! -- 在此处编写页面内容代码 -->
<section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-5-tablet is-4-desktop is-3-widescreen">
<form class="box">
<div class="field">
<button class="button is-success">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
评论前必须登录！
注册