<form>
元素样式。
checkbox
、radio
类型的 <input>
与其他元素稍有区别:
.am-checkbox
、.am-radio
class;.am-checkbox-inline
、.am-radio-inline
class。<select>
是一个比较奇葩的元素,长得丑还不让人给它打扮。
单使用 CSS, 很难给 select
定义跨浏览器兼容的样式,保留浏览器默认样式可能是它最好的归宿(Pure CSS 就是这么干的)。Amaze UI 中针对 Webkit 浏览器写了一点样式替换了默认的下上三角形。
在容器上添加 .am-form
class,容器里的子元素才会应用 Amaze UI 定义的样式。
<form class="am-form">
<fieldset>
<legend>表单标题</legend>
<div class="am-form-group">
<label for="doc-ipt-email-1">邮件</label>
<input type="email" class="" id="doc-ipt-email-1" placeholder="输入电子邮件">
</div>
<div class="am-form-group">
<label for="doc-ipt-pwd-1">密码</label>
<input type="password" class="" id="doc-ipt-pwd-1" placeholder="设置个密码吧">
</div>
<div class="am-form-group">
<label for="doc-ipt-file-1">文件上传域</label>
<input type="file" id="doc-ipt-file-1">
<p class="am-form-help">请选择要上传的文件...</p>
</div>
<div class="am-checkbox">
<label>
<input type="checkbox"> 复选框,选我选我选我
</label>
</div>
<div class="am-radio">
<label>
<input type="radio" name="doc-radio-1" value="option1" checked>
单选框 - 选项1
</label>
</div>
<div class="am-radio">
<label>
<input type="radio" name="doc-radio-1" value="option2">
单选框 - 选项2
</label>
</div>
<div class="am-form-group">
<label class="am-checkbox-inline">
<input type="checkbox" value="option1"> 选我
</label>
<label class="am-checkbox-inline">
<input type="checkbox" value="option2"> 同时可以选我
</label>
<label class="am-checkbox-inline">
<input type="checkbox" value="option3"> 还可以选我
</label>
</div>
<div class="am-form-group">
<label class="am-radio-inline">
<input type="radio" value="" name="docInlineRadio"> 每一分
</label>
<label class="am-radio-inline">
<input type="radio" name="docInlineRadio"> 每一秒
</label>
<label class="am-radio-inline">
<input type="radio" name="docInlineRadio"> 多好
</label>
</div>
<div class="am-form-group">
<label for="doc-select-1">下拉多选框</label>
<select id="doc-select-1">
<option value="option1">选项一...</option>
<option value="option2">选项二.....</option>
<option value="option3">选项三........</option>
</select>
<span class="am-form-caret"></span>
</div>
<div class="am-form-group">
<label for="doc-select-2">多选框</label>
<select multiple class="" id="doc-select-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="am-form-group">
<label for="doc-ta-1">文本域</label>
<textarea class="" rows="5" id="doc-ta-1"></textarea>
</div>
<p><button type="submit" class="am-btn am-btn-default">提交</button></p>
</fieldset>
</form>
设置表单元素的不同状态。
给 <input>
添加 disabled
属性以禁用表单元素。
<form class="am-form">
<input class="am-form-field" type="text" placeholder="禁止输入的表单..." disabled>
</form>
给 <fieldset>
元素增加 disabled
属性,禁用所有的子元素。
<form class="am-form">
<fieldset disabled>
<div class="am-form-group">
<label for="doc-ds-ipt-1">禁用的文本框</label>
<input type="text" id="doc-ds-ipt-1" class="am-form-field" placeholder="禁止输入">
</div>
<div class="am-form-group">
<label for="oc-ds-select-1">禁用的下拉选框</label>
<select id="oc-ds-select-1" class="am-form-field">
<option>禁止选择我</option>
</select>
</div>
<div class="am-checkbox">
<label>
<input type="checkbox"> 无法选中的复选框
</label>
</div>
<button type="submit" class="am-btn am-btn-primary">Submit</button>
</fieldset>
</form>
<a>
元素设置禁用状态需要加上 .am-disabled
class。
<a class="am-btn am-btn-primary am-disabled">禁止提交</a>
在 <form>
添加 .am-form-horizontal
class 并结合网格系统使用。
<form class="am-form am-form-horizontal">
<div class="am-form-group">
<label for="doc-ipt-3" class="col-sm-2 am-form-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">
</div>
</div>
<div class="am-form-group">
<label for="doc-ipt-pwd-2" class="col-sm-2 am-form-label">密码</label>
<div class="col-sm-10">
<input type="password" id="doc-ipt-pwd-2" placeholder="设置一个密码吧">
</div>
</div>
<div class="am-form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住十万年
</label>
</div>
</div>
</div>
<div class="am-form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="am-btn am-btn-default">提交登入</button>
</div>
</div>
</form>
在外围容器上添加 .am-form-inline
。 注意: 行内排列的元素并没有设置右边距,默认使用 inline-block
元素的间距,压缩 HTML 后行内表单元素的右边距会消失,需要自行处理。
<form class="am-form-inline" role="form">
<div class="am-form-group">
<input type="email" class="am-form-field" placeholder="电子邮件">
</div>
<div class="am-form-group">
<input type="password" class="am-form-field" placeholder="密码">
</div>
<div class="am-checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
<button type="submit" class="am-btn am-btn-default">登录</button>
</form>
表单 group 元素上添加 .am-form-icon
,依赖 icon
组件。
<form action="" class="am-form am-form-inline">
<div class="am-form-group am-form-icon">
<i class="am-icon-calendar"></i>
<input type="text" class="am-form-field" placeholder="日期">
</div>
<div class="am-form-group am-form-icon">
<i class="am-icon-clock-o"></i>
<input type="text" class="am-form-field" placeholder="时间">
</div>
</form>
<form action="" class="am-form">
<div class="am-form-group am-form-success">
<label class="am-form-label" for="doc-ipt-success">验证成功</label>
<input type="text" id="doc-ipt-success" class="am-form-field">
</div>
<div class="am-form-group am-form-warning">
<label class="am-form-label" for="doc-ipt-warning">验证警告</label>
<input type="text" id="doc-ipt-warning" class="am-form-field">
</div>
<div class="am-form-group am-form-error">
<label class="am-form-label" for="doc-ipt-error">验证失败</label>
<input type="text" id="doc-ipt-error" class="am-form-field">
</div>
</form>
添加 .am-form-icon
和 am-form-feedback
。
注意:Icon 的样式针对 .am-form-group
单行排列编写,多行的时候会出现位置不对的情况。
<form class="am-form">
<div class="am-form-group am-form-success am-form-icon am-form-feedback">
<input type="text" class="am-form-field" placeholder="验证成功">
<span class="am-icon-check"></span>
</div>
<div class="am-form-group am-form-warning am-form-icon am-form-feedback">
<input type="text" class="am-form-field" placeholder="验证警告">
<span class="am-icon-warning"></span>
</div>
<div class="am-form-group am-form-error am-form-icon am-form-feedback">
<input type="text" class="am-form-field" placeholder="验证失败">
<span class="am-icon-times"></span>
</div>
</form>
在表单元素上添加以下类名:
am-input-lg
am-input-sm
<form class="am-form">
<input class="am-form-field am-input-lg" type="text" placeholder="添加了 .am-input-lg">
<br/>
<input class="am-form-field" type="text" placeholder="默认的 input">
<br/>
<input class="am-form-field am-input-sm" type="text" placeholder="添加了 .am-input-sm">
<br/>
<div class="am-form-group am-form-select">
<select class=" am-input-lg">
<option value="">添加了 .am-input-lg</option>
</select>
</div>
<div class="am-form-group am-form-select">
<select class="">
<option value="">select 默认大小</option>
</select>
</div>
<div class="am-form-group am-form-select">
<select class=" am-input-sm">
<option value="">添加了 .am-input-sm</option>
</select>
</div>
</form>
使用 .am-form-set
嵌套一系列 <input>
元素。
<div class="am-g">
<div class=" col-md-8 col-sm-centered">
<form class="am-form">
<fieldset class="am-form-set">
<input type="text" placeholder="取个名字">
<input type="text" placeholder="设个密码">
<input type="email" placeholder="填下邮箱">
</fieldset>
<button type="submit" class="am-btn am-btn-primary am-btn-block">注册个账号</button>
</form>
</div>
</div>